全网整合营销服务商
先设计 后付费，服务更有保障
免费咨询热线：18838171308
先设计 后付费，服务更有保障
免费咨询热线：18838171308
坚持使用统的CSS命名规则并养成习惯，可以让你更容易维护、修改以前编写过的CSS代码，进而提高自己的工作效率，而且还能加强搜索引擎的SEO优化，方便记忆，那么，我们如何才能将CSS的命名做得井井有条呢？
1、CSS文件及样式命名
首先，先为大家展示些CSS文件及样式的命名样例，因为这些名称能使大家立马明白定义的文件，具体如下所示：
CSS文件命名规范
全局样式：global.css
框架布局：layout.css
字体样式：font.css
链接样式：link.css
打印样式：print.css
主要的：master.css
专栏：columns.css
主题：themes.css
对于CSS样式的命名规则，建议用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字，为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事看明白这样式大概是哪块的，这样节省了查找样式的时间。
例如：头部样式用header，头部左边，可以用header_left或header_l，还有如果是列结构的可以这样——box_1of3 （三列中的第列），box_2of3 （三列中的列）、box_3of3 （三列中的第三列），其它的我不举例了，大家按以上规律去命名好。
2、CSS的优先级
行内样式（inline style） > ID选择符 > 样式（class）、伪类（pseudo-class）和属性（attribute）选择符 > 类别（type），伪对象（pseudo-element）。
博客注解：
*内联样式（inline style）：元素的style属性，比如 <div style="color:red;"></div>，其中的color:red;是行内样式。
*ID选择符：元素的id属性，比如<div></div>可以用ID选择符#content
*伪类（pseudo-class）：常见的是锚（a）伪类，比如a:link,a:visited.
*属性选择符（attribute selectors）：比如div[class=demo],含有class为demo的div元素。
*类别选择器（type selector）：HTML标签选择，比如div .demo,div元素下含有class为demo的元素。
*伪对象选择器（pseudo-element selector）：比如div:first-letter,div元素下的第个单词。
3、不要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。
除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用些默认值覆盖你的定义。
4、CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯，在经过不断实践后，我决定采用下面这样的书写样式：
.classname {
width:100px;
}
当使用联合定义时，我通常将每个选择器单独写行，这样方便在CSS文件中找到它们，在后个选择器和大括号之间加个空格，每个定义也单独写行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许后个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好，后，关闭的大括号单独写行，这样的空格和换行有助与阅读
5、导入（Import）和隐藏CSS
因为老版本浏览器不支持CSS，个通常的做法是使用@import技巧来把CSS隐藏起来，例如：
@import url（main.css）；
然而，这个方法对IE4不起作用，这让我很是头疼了阵子，后来我用这样的写法：
@import main.css;
这样可以在IE中也隐藏CSS了，呵呵，还节省了5个字节呢！
6、层占据的空间
当调试CSS发生错误，你要像排版工人，逐行分析CSS代码，我通常在出问题的层上定义个背景颜色，这样能很明显看到层占据多大空间？
有些人建议用border，般情况也是可以的，但问题是，有时候border会增加元素的尺寸，border-top和boeder-bottom破坏纵向margin的值，所以使用background更加安全些。
