您的位置：首页 > Web前端 > CSS

前端代码标准最佳实践：CSS

2017-09-22 14:24 465 查看

1，命名

和其他语言规范一样，css的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。

不规范的命名：

[html]
view plain
copy

print?

#navigation{  
}  
.demoimage{  
}  
.error_status{  
}  

#navigation{
}
.demoimage{
}
.error_status{
}


规范的命名：
[html] view plain copy print?#nav{  
}  
.demo-image{  
}  
.error-status{  
}  
#nav{
}
.demo-image{
}
.error-status{
}


2, css选择器
不同的标签类型尽可能不用相同的css类名；尽可能不用标签类型选择器，用css类名和ID足够定义css，因为ID是可以唯一确定Dom元素的，而css类是不推荐用于不同的标签的；另外应该少用ID选择器定义，因为ID的唯一性使得定义的css无法重用。

不规范定义：

[html] view plain copy print?ul#menus{  
}  
div.info{  
}  
ul#menus{
}
div.info{
}



规范定义：

 

[html] view plain copy print?.main-menus{  
}  
.info{  
}  
.main-menus{
}
.info{
}



3，属性名称和值的定义精简
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;
4，css代码的格式
漂亮统一的代码格式可以提高代码的可读性和可维护性，css的最佳代码格式主要有以下几点：定义顺序以字母序排列，不考虑浏览器前缀；定义以分号结束；属性名称定义的分号后添加一个空格；多个选择器定义时，每个定义单独占一行。

[html] view plain copy print?/*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/  
background: fuchsia;  
border: 1px solid;  
-moz-border-radius: 4px;  
-webkit-border-radius: 4px;  
border-radius: 4px;  
color: black;  
text-align: center;  
text-indent: 2em;  
  
/*多个选择器定义时，每个选择器单独占用一行*/  
h1,  
h2,  
h3 {  
    font-weight: normal;  
    line-height: 1.2;  
}  
/*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

/*多个选择器定义时，每个选择器单独占用一行*/
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}



5，避免写兼容某个浏览器的css代码
避免写特定浏览器兼容代码，这里说的特定浏览器主要指的是万恶的IE系列浏览器，IE6，7尤为严重。碰到浏览器兼容问题，首先考虑的是能否换一种其它的解决方案，如果没有合适的解决方案，记得单独写一个css文件给这些特定的浏览器，不要把兼容代码和常规代码混合，这样方便代码的维护，如果后期不支持这些老旧浏览器，可以直接删除这些单独的css文件即可。

[html] view plain copy print?<!--[if IE 6]>  
<link rel="stylesheet" type="text/css" href="css/ie6.css" />  
<![endif]-->  
<!--[if IE 7]>  
<link rel="stylesheet" type="text/css" href="css/ie7.css" />  
<![endif]-->  
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->


<
d2d8
/pre>

6，记住块元素和行内元素的区别，避免写无用的css代码
块级元素显示会独占一行，而行内元素不会独占一行。常见的块级元素有：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，所以避免给行内元素定义这些无用的样式。


7，记住css定义的权重
css的选择器是有权重的，当有多个样式时，权重高的样式会起作用。说一个插曲，前段时间面试了不少前端工程师，问得最多的一个问题就是css权重问题，很可惜的是知道css权重的不多。以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

[code]
[html] view plain copy print?/*权重为1*/  
div{  
}  
/*权重为10*/  
.class1{  
}  
/*权重为100*/  
#id1{  
}  
/*权重为100+1=101*/  
#id1 div{  
}  
/*权重为10+1=11*/  
.class1 div{  
}  
/*权重为10+10+1=21*/  
.class1 .class2 div{  
}  

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                css
                                                html
                                                前端
                                                标准
                                                语言
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航