CSS代码风格规则CSS代码有效性
使用有效的CSS代码。
可使用W3C CSS validator来验证css。
命名
class应优先虑以这元素具体目的来进行命名，应尽量简短且富有含义。
统一采用小写英文字母、数字、“-” 的组合。其中不得包含汉字、空格和特殊字符。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.demoimage {} /* "demo" 和 "image" 中间没加 "-" */</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.error_status {} /* 用下划线 "_" 是屌丝的风格 */</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.ads-sample {}</font>
复制代码
原则上，不建议缩写，除非一看就懂的缩写，如nav。
尽量避免使用id来控制样式。
框架css类命名清单
全屏：full_bg（全屏背景）
容器：wrapper（最外面的主框架）
页头：header（子项：h_1、h_2、……）
内容：container
页面主体：main
页尾：footer
导航：nav（子项：n_1、n_2、……）
菜单：menu（子项：m_1、m_2、……）
导航：nav（子项：n_1、n_2、……）
子菜单：submenu
侧栏：sidebar
栏目：column（扩展：column1、column2、……）
左右中：left、right、center
搜索：search
登陆：signin
选择器
避免出现过多的祖先选择器，各浏览器会有性能差异，消耗在选择器的时间也不尽相同。
尽量最多控制在3级以内。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
ul.example {}
.example1 .example2 .example3 .example4 {}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.example {}
.example1,
.example2 {}</font>
复制代码
非必要的情况下不要使用元素标签名和ID或class进行组合。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
ul#example {}
div.error {}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
#example {}
.error {}</font>
复制代码
简化css
写属性值的时候尽量使用缩写。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.example {
border-top-style:none;
font-family:Palatino, serif;
font-size:100%;
line-height:1.6;
padding-bottom:2em;
padding-left:1em;
padding-right:1em;
padding-top:0;
}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.example { border-top: none; font: 100%/1.6 Palatino, serif; padding: 0 1em 2em;}</font>
复制代码
属性值为0时，忽略单位
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.example { margin:0px; padding:0px;}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.example { margin:0; padding:0;}</font>
复制代码
属性值出现小数点忽略0
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.example { font-size:0.8em}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.example { font-size:.8em}</font>
复制代码
省略URI外的引号
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.example { background-image: url("images/noise.png");}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.example { background-image: url(images/noise.png);}</font>
复制代码
十六进制尽可能使用3个字符
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.example { color: #eebbcc; }</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.example { color: #ebc; }</font>
复制代码
Hacks
尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
尽量避免使用CSS filters。
CSS代码格式规则单行书写
一个类一行，每个属性间用空格隔开，不用强制换行。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.example {
display:block;
float:left;
width:200px;
height:300px;padding:10px;
}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.example { display: block; float: left; width: 200px; height: 300px; padding: 10px;}</font>
复制代码
分隔选择器
每个选择器和声明都要独立新行。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
a:focus, a:active { position: relative; top: 1px;}</font>
复制代码
/* 推荐 */
h1,
h2,
h3 { font-weight: normal; line-height: 1.2;}
复制代码
属性名完结
出于一致性的原因，在属性名和值之间加一个空格（可不是属性名和冒号之间噢）。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
h3 { font-weight:bold;}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
h3 { font-weight: bold; }</font>
复制代码
声明完结
考虑到一致性和拓展性，请在每个声明尾部都加上分号。
<font color="rgb(51, 51, 51)" size="3">/* 不推荐 */
.test {
display: block;
height: 100px
}</font>
复制代码
<font color="rgb(51, 51, 51)" size="3">/* 推荐 */
.test { display: block; height: 100px;}</font>
复制代码
css书写顺序
书写顺序按显示属性，自身属性， 文本属性顺序。
显示属性
display
list-style
position
float
clear
自身属性
width
height
margin
padding
border
background
文本属性
color
font
text-decoration
text-align
vertical-align
white-space
Css Meta规则编码
一般情况下编码同html的一致。
如果是urf-8，则不需要制定样式表的编码，因为它默认为urf-8。
注释头部注释
注明本CSS的用处，生成时间及作者等信息。
<font color="rgb(51, 51, 51)" size="3">/* CSS Document
Use for: website
Version: 1.0
Date: time
Author: your name
Update:
*/</font>
复制代码
页面注释
有时候一份CSS会把首页和各种二级页面样式写在一起，这时需要做页面注释。
<font color="rgb(51, 51, 51)" size="3">/***********************************
* 首页
***********************************/</font>
复制代码
分级注释
比如在main模块下，建立了news、photo等栏目，可使用分级注释，以指明层级结构。
<font color="rgb(51, 51, 51)" size="3">/*----------------main-----------------*/
#main {}
.main-bg {}
/* news */
.news {}
/* photo */
.photo {}</font>
复制代码
区块间注释
<font size="3">/* news */
.news {}
/* photo */
.photo {}</font>
复制代码
修改注释
当后期维护中有修改到css，需添加修改的注释。
<font color="rgb(51, 51, 51)" size="3">.news {} /* 修正横向滚动条错误 by your name */</font>
复制代码
|
|
收藏
淘帖
踩
