CSS规范理.docVIP

CSS规范整理 一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库?/css/core? 通用UI元素样式库?/css/lib? JS组件相关样式库?/css/ui? 业务类的CSS是指和具体产品相关的文件，放在如下目录中： 读书?/css/book/? 电影?/css/movie/? 音乐?/css/music/? 社区?/css/sns/? ,,,,站?/css/site/? 同城?/css/location/? 电台?/css/radio/? 外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如： util-01?reset?/css/core/reset.css? util-02?通用模块容器?/css/core/mod.css? ui-01.?喜欢按钮?/css/core/fav_btn.css? ui-02.?视频/相册列表项?/css/core/media_item.css? ui-03.?评星?/css/core/rating.css? ui-04.?通用按钮?/css/core/common_button.css? ui-05.?分页?/css/core/pagination.css? ui-06.?推荐按钮?/css/core/rec_btn.css? ui-07.?老版对话框?/css/core/old_dialog.css? ui-08.?老版Tab?/css/core/old_tab.css? ui-09.?老版成员列表?/css/core/old_userlist.css? ui-10.?老版信息区?/css/core/notify.css? ui-11.?社区用户导航?/css/core/profile_nav.css? ui-12.?当前大社区导航?/css/core/site_nav.css? ui-13.?加载中?/css/lib/loading.css? 2、文件引入可通过外联或内联方式引入。 外联方式：（类型声明type=”text/css”可以省略）? 内联方式：（类型声明type=”text/css”可以省略）? link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。 3、文件名、文件编码及文件大,,,, 文件名必须由,,,,写字母、数字、中划线组成? 文件必须用UTF-8编码，使用UTF-8（非BOM），在HTML中指定UTF-8编码，在CSS中则不需要特别指定因为默认就是UTF-8。? 单个CSS文件避免过大（建议少于300行）? 二、注释规范 1、文件顶部注释（推荐使用） /*?*?@description:?中文说明?*?@author:?name?*?@update:?name?(2013-04-13?18:32)?*/? 2、模块注释 /*?module:?module1?by?张三?*/?…?/*?module:?module2?by?张三?*/? 模块注释必须单独写在一行 3、?单行注释与多行注释 /*?this?is?a?short?comment?*/ 单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。 /**?this?is?comment?line?1.*?this?is?comment?line?2.*/ 多行注释必须写在单独行内 4、特殊注释 /*?TODO:?xxxx?by?name?2013-04-13?18:32?*/ /*?BUGFIX:?xxxx?by?name?2012-04-13?18:32?*/ 用于标注修改、待办等信息 5、区块注释 /*?Header?*/?/*?Footer?*/?/*?Gallery?*/? 对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。 三、命名规范 使 用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首 选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。 /*?不推荐:?无意义?*/?#yee-1901?{}? /*?不推荐:?与样式相关?*/?.button-green?{}.clear?{}? /*?推荐:?特殊性?*/?#gallery?{}#login?{}.video?{