移动端手机前端css命名规范

手机前端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?{}?/*?推荐:?通用性?*/?.aux?{}.alt?{}?常用命名(多记多查英文单词)：page、wrap、layout、header(hea