时间：2021-07-01 10:21:17 帮助过：37人阅读
和其他语言规范一样，css的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。
不规范的命名：
1 #navigation{2 }3 .demoimage{4 }5 .error_status{6 } 规范的命名：
1 #nav{2 }3 .demo-image{4 }5 .error-status{6 } 不同的标签类型尽可能不用相同的css类名；尽可能不用标签类型选择器，用css类名和ID足够定义css，因为ID是可以唯一确定Dom元素的，而css类是不推荐用于不同的标签的；另外应该少用ID选择器定义，因为ID的唯一性使得定义的css无法重用。
不规范定义：
1 ul#menus{2 }3 div.info{4 } 规范定义：
1 .main-menus{2 }3 .info{4 } css的某些属性定义可以可以分拆为各个独立项，比如padding，border, margin, background, font等，虽然分拆定义的可读性会好一些，但是就目前的经验来看，前端工程师们对这些常用的css理解程度足够好，合并后的定义不会对可读性带来影响，反而代码更简洁；此外对属性值为0的单位可以省略，在0后面添加入px em cm等单位是毫无意义的；对小数值可以省略小数点前的0；url值两端的引号可以省略。
不规范的定义：
规范定义：
border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;margin: .8em;background: #00FF00 url(bgimage.gif) no-repeat fixed top;
漂亮统一的代码格式可以提高代码的可读性和可维护性，css的最佳代码格式主要有以下几点：定义顺序以字母序排列，不考虑浏览器前缀；定义以分号结束；属性名称定义的分号后添加一个空格；多个选择器定义时，每个定义单独占一行。
1 /*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/ 2 background: fuchsia; 3 border: 1px solid; 4 -moz-border-radius: 4px; 5 -webkit-border-radius: 4px; 6 border-radius: 4px; 7 color: black; 8 text-align: center; 9 text-indent: 2em;10 11 /* http://www.cnblogs.com/sosoft/ */12 /*多个选择器定义时，每个选择器单独占用一行*/13 h1,14 h2,15 h3 {16 font-weight: normal;17 line-height: 1.2;18 }
避免写特定浏览器兼容代码，这里说的特定浏览器主要指的是万恶的IE系列浏览器，IE6，7尤为严重。碰到浏览器兼容问题，首先考虑的是能否换一种其它的解决方案，如果没有合适的解决方案，记得单独写一个css文件给这些特定的浏览器，不要把兼容代码和常规代码混合，这样方便代码的维护，如果后期不支持这些老旧浏览器，可以直接删除这些单独的css文件即可。
1 4
块级元素显示会独占一行，而行内元素不会独占一行。常见的块级元素有：div p ul ol table h1~h6 等；行内元素有：a em img input label select span strong textarea等。块级元素的display默认样式是block，而行内元素是inline，可以通过重新定义display来互转块级元素和行内元素。但是记住以下的css样式对行内元素是无效的：width height 和垂直方向设置的margin padding，所以避免给行内元素定义这些无用的样式。
css的选择器是有权重的，当有多个样式时，权重高的样式会起作用。说一个插曲，前段时间面试了不少前端工程师，问得最多的一个问题就是css权重问题，很可惜的是知道css权重的不多。以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
1 /*权重为1*/ 2 div{ 3 } 4 /*权重为10*/ 5 .class1{ 6 } 7 /*权重为100*/ 8 #id1{ 9 }10 /*权重为100+1=101*/11 #id1 div{12 }13 /*权重为10+1=11*/14 .class1 div{15 }16 /*权重为10+10+1=21*/17 .class1 .class2 div{18 }
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现，因为光是靠前后的样式定义来影响最终的样式是不靠谱的，也会给后期的维护埋下一个雷区；另外为了代码的重用性，应尽可能定义小的权重，这和不推荐使用id来定义样式是一样的道理。
各个浏览器对不同的标签有其不同的内置的样式，为了使得在不同的浏览器下标签的表现相同，可以定义一个单独的base.css文件，重新定义各种标签的默认样式。另外推荐的css文件组织是：定义一个base.css，用于css reset，定义一个common.css，用于定义各种公用css类。这里有一份base.css，其实是以上提到的base.css和common.css的合并，分享给大家：base.css
这种设计方式越来越受到大家的欢迎，各种前端框架中也能看到大量这样的设计。设计的核心思想是：把css定义中的固定部分和可变部分分开定义，使得代码达到最大程度的重用，这样的结果是增加了元素上添加的css类个数，但是提高了代码的维护性和可读性。如下的例子代码来自bootstrap的按钮样式定义
按钮有一个固定的基础样式btn
1 .btn { 2 display: inline-block; 3 *display: inline; 4 padding: 4px 10px 4px; 5 margin-bottom: 0; 6 *margin-left: .3em; 7 font-size: 13px; 8 line-height: 18px; 9 *line-height: 20px;10 color: #333333;11 ...12 *zoom: 1;13 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);14 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);15 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);16 }
在此基础上定义各种按钮的特定样式
1 .btn.disabled, 2 .btn[disabled] { 3 cursor: default; 4 background-color: #e6e6e6; 5 background-image: none; 6 opacity: 0.65; 7 filter: alpha(opacity=65); 8 -webkit-box-shadow: none; 9 -moz-box-shadow: none;10 box-shadow: none;11 }12 13 .btn-large {14 padding: 9px 14px;15 font-size: 15px;16 line-height: normal;17 -webkit-border-radius: 5px;18 -moz-border-radius: 5px;19 border-radius: 5px;20 }21 22 .btn-large [class^="icon-"] {23 margin-top: 1px;24 }25 26 .btn-small {27 padding: 5px 9px;28 font-size: 11px;29 line-height: 16px;30 }31 32 .btn-small [class^="icon-"] {33 margin-top: -1px;34 }35 36 .btn-mini {37 padding: 2px 6px;38 font-size: 11px;39 line-height: 14px;40 }
另外再推荐一下bootstrap框架，在github中排名第一的前端框架，出自于twitter。