- 2.1 规范
1）样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a–z）、数字（0–9）、下划线（_）组成。
2）可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用123456…red，blue，left，right之类的（如颜色、字号大小等）矢量命名。
3）尽量用单个单词简单描述class名称。
4）双单词或多单词组合方式：形容词_名词、命名空间_名次、命名空间_形容词_名词。 - 2.2Class和ID的使用方法
把id留给后台开发和JS使用，除此之外页面的page id（如首页的外层需要一个ID id=“page_index”），页面结构（header main footer）允许用id命名。其他禁止id使用在样式表CSS命名中，一律使用class命名。 - 2.3命名空间
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。 - 2.4添加文档样式
1）引用外部文件方式添加样式
2）严禁编写标记内代码，比如就应该写成,然后在样式表中去完成样式代码编写。
3）严禁在文档中使用代码块
4）分割样式表，降低代码复杂性，方便管理和维护。但不分割的太细碎，应考虑以后的维护和管理。 - 2.5属性简写
为了节省字节数及文件大小，以下属性请使用简写方式：
padding ：top right bottom left； margin ： top right bottom right；
border ： style width color； border-top ：style width color；
Border-bottom ：style width color； Border-left ：style width color；
Border-color ：top right bottom left； Border-style ：top right bottom left；
Border-width ：top right bottom left； Background ：color url（image）repeat posotion；
List-style ：type position url（image）； Font-weight：400/700； - 2.6缩写16进制色值
Color和background-color的属性值如果使用的是16进制色值，当6个数字两两相等时，使用缩写方式编写。如：#996600缩写成#960 - 2.7字体
1）全局定义字体：body{font：12px arial，helvetica，sans-serif；line-height：1.5；}
2）font-family：
A）等宽字体组合：Arial，Helvetica，sans-serif；
B）不等宽（宽扁）字体组合：Verdana，Trebuchet MS，sans-serif；
C）中文字体：除非内容文本需要，不推荐强制定义 - 2.8页面采用固定流式布局，使用像素（px）固定元素尺寸。
- 2.9添加必须的注释
可根据全局、布局、区块、功能等进行分类和添加注释，方便维护和代码搜索。 - 2.10CSS通用命名
（1）页面框架命名，一般具有唯一性，推荐用ID命名
（2）模块结构命名
（3）导航结构命名
（4）一般元素命名 - 2.11.图片命名
1）背景图片：bg001，bg002，bg003…
2）一般图片：img001，img002，img003…
3）特定图片：如banner，logo按照具体情况命名
4）按钮图片：btn_submit，btn_cancel…
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦