戏说前端之CSS编码规范
作者：互联网
前言
项目启动时 css 应该注意哪些问题
文件名规范
文件名建议用小写字母加中横线的方式。为什么呢？因为这样可读性比较强，看起来比较清爽，像链接也是用这样的方式，例如
// 地址: github的地址
https://github.com/wangjeaf/ckstyle-node那为什么变量名不用小写字母加小划线的方式，如：family_tree，而是推荐用驼峰式的familyTree？C语言就喜欢用这种方式命名变量，但是由于因为下划线比较难敲(shift + -)，所以一般用驼峰式命名变量的居多。
引入CSS文件的link可以不用带type=“text/css”，如下代码：
<link rel="stylesheet" href="test.css">因为link里面最重要的是rel这个属性，可以不要type，但是不能没有rel。
JS也是同样道理，可以不用type，如下代码：
<script src="test.js"></script>没有兼容性问题。
属性书写顺序
属性的书写顺序对于浏览器来说没有区别，除了优先级覆盖之外。但是如果顺序保持一致的话，扫一眼可以很快地知道这个选择器有什么类型的属性影响了它，所以一般要把比较重要的属性放前面。比较建议的顺序是这样的：
你可能会觉得我平时差不多就是这么写的，那么说明你有一个比较好的素养。并且我觉得规则不是死，有时候可以灵活，就像你可能会用transform写居中，然后把left/top/transform挨在一起写了，我觉得这也是无可厚非的，因为这样可以让人一眼看出你要干嘛。
不要使用样式特点命名
有些人可能喜欢用样式的特点命名，例如：
.red-font{
color: red;
}
.p1{
font-size: 18px;
}
.p2{
font-size: 16px;
}然后你在它的html里面就会看到套了大量的p1/p2/bold-font/right-wrap之类的类名，这种是不可取的，假设你搞了个red-font，下次UI要改颜色，那你写的这个类名就没用了，或者是在响应式里面在右边的排版在小屏的时候就会跑到下面去，那你取个right就没用了。有些人先把UI整体瞄了一下，发现UI大概用了3种字号18px/16px/14px，于是写3个类p1/p2/p3，不同的字号就套不同的类。这乍一看，好像写得挺通用，但是当你看他的html时，你就疯掉了，这些p1/p2/p3的类加起写了有二三十个，密密麻麻的。我觉得如果要这样写的话还不如借助标题标签如下：
.house-info h2{
font-size: 18px;
}
.house-info h3{
font-size: 16px;
}因为把它的字号加大了，很可能是一个标题，所以为什么不直接用标题标签，不能仅仅担心因为标题标签会有默认样式。
类的命名应当使用它所表示的逻辑意义，如signup-success-toast、request-demo、agent-portrait、 company-logo等等。
如果有些样式你觉得真的特别通用，那可以把它当作一个类，如clearfix，或者有些动画效果，有几个地方都要用到，我觉得这种较为复杂并且通用的可以单独作为一个类。但是还是趋向于使用意义命名。
不要使用hack
有些人在写CSS的时候使用一些hack的方法注释，如下：
.agent-name{
float: left;
_margin: 10px;
//padding: 20px;
}这种方法的原理是由于//或者_开头的CSS属性浏览器不认识，于是就被忽略，分号是属性终止符，从//到分号的内容都被浏览器忽略，但是这种注释是不提倡的，要么把.css文件改成.less或者.scss文件，这样就可以愉快地用//注释了。
还有一些专门针对特定浏览器的hack，如*开头的属性是对IE6的hack。不管怎么样都不要使用hack。
选择器的性能
选择器一般不要写超过3个，有些人写sass或者less喜欢套很多层，如下：
.listings-list{
ul{
li{
.bed-bath{
p{
color: #505050;
}
}
}
}}一个容器就套一层，一层一层地套下来，最底层套了七八层，这么长的选择器的性能比较差，因为Chrome里面是用递归从最后一个选择器一直匹配到第一个，选择器越多，匹配的时间就越长，所以时间会比较长，并且代码的可读性也比较差，为看到最里面的p标签的样式是哪个的我得一层层地往上看，看是哪里的p。代码里面缩进了7、8层看起来也比较累。
一般只要写两三个比较重要的选择器就好了，不用每个容器都写进去，重要的目标元素套上class或者id。
最后一个选择器的标签的应该少用，因为如果你写个.container div{}的话，那么页面上所有的div第一次都匹配中，因为它是从右往左匹配的，这样的写的好处是html不用套很多的类，但是扩展性不好，所以不要轻易这样用，如果要用需要仔细考虑，如果合适才使用，最起码不能滥用。
避免选择器误选
有时候会出现自己的样式受到其他人样式的影响，或者自己的样式不小心影响了别人，有可能是因为类的命名和别人一样，还有可能是选择器写的范围太广，例如有人在他自己的页面写了：
* {
box-sizing: border-box;
}结果导致在他个页面的公用弹框样式挂了。一方面不要写*全局匹配选择器，不管从性能还是影响范围来说都太大了，例如在一个有3个子选择器的选择器：
.house-info .key-detail .location{}在三个容器里面，*都是适用的，并且有些属性是会继承的，像font-size，会导致这三个容器都有font-size，然后一层层地覆盖。
还有一种情况是滥用了:first-child、:nth-of-type这种选择器，使用这种选择器的后果是扩展性不好，只要html改了，就会导致样式不管用了，或者影响到了其它无关元素。但是并不是说这种选择器就不能用，只要用得好还是挺方便的，例如说在所有的li里面要让最后一个li的margin-left小一点，那么可以这么写：
.listing-list li:last-child{
margin-left: 10px;
}这可能比你直接套一个类强。但是不管怎么样，不能滥用，合适的时候才使用，而不是仅仅为了少写类名。
减少覆盖
覆盖是一种常用的策略，也是一种不太优雅的方式，如下代码，为了让每个house中间的20px的间距，但是第一个house不要有间距：
.house{
margin-top: 20px;
}
.house:first-child{
margin-top: 0;
}其实可以改成这样：
.house + .house{
margin-top: 20px;
}只有前面有.house的.house才能命中这个选择器，由于第一个.house前面没有，所以无法命中，这样看起来代码就简洁多了。
还有这种情况，如下代码所示：
.request-demo input{
border: 1px solid #282828;
}
.request-demo input[type=submit]{
border: none;
}其实可以借助一个:not选择器：
.request-demo input:not([type=sbumit]){
border: 1px solid #282828;
}这样看起来代码也优雅了很多。
有一种覆盖是值得的，那就是响应式里面小屏的样式覆盖大屏，如下：
@media (min-width: 1025px){
.container{
width: 1080px;
margin: 0 auto;
}}我一开始是就是这么写的，为了遵循减少覆盖原则，但是后来发现这种实践不好，代码容易乱，写成覆盖的好处在于可以在浏览器明显地看到，小屏的样式是覆盖了哪个大屏的样式，这个在大屏的时候又是怎么样的。
少用!important
important用来覆盖属性，特别是在CSS里面用来覆盖style里的属性，但是important还是少用为妙。有时候你为了偷懒直接写个!important，以为这个的优先级是最高的了，往往螳螂捕蝉，黄雀在后，很可能过不了多久又要再写一个优先级更高的覆盖掉，这样就略显尴尬了。所以能少用还是少用。如果要覆盖还是先通过增加添加选择器权重的方式。
排版规范
不管是JS/CSS，缩进都调成4个空格，如果你用的sublime，在软件的右下角有一个Tab Size，选择Tab Size 4，然后再把最上面的Indent Using Spaces勾上，这样，当你打一个tab键缩进的时候就会自动转换成4个空格。如果你使用vim，新增或者编辑~/.vimrc文件新增一行：
:set tabstop=4也会自动把缩进改成4个空格，其它编辑器自行查找设置方法。因为t在不同的编辑器上显示长度不一样，而改成空格可以在不同人的电脑上格式保持一致。
多个选择器共用一个样式集，每个选择器要各占一行，如下：
.landing-pop,
.samll-pop-outer,
.signup-success{
display: none;
}每个属性名字冒号后面要带个空格，~、>、+选择器的前后也要带一个空格：
.listings > li{
float: left;
}正确使用background和img
显示一张图片有两种方式，可以通过设置CSS的background-image，或者是使用img标签，究竟什么时候用哪种呢？
如果是头图等直接展示的图片还是要img标签，如果是做为背景图就使用background，因为使用img可以写个alt属性增强SEO，而背景图那种本身不需要SEO。虽然background有一个一个background-position: center center很好，但是头图那种还是使用img吧，自己去居中吧，不然做不了SEO。
响应式的规范
响应式开发最不好不要杂合使用rem，文字字号要么全部使用rem，要么不要用，也不要使用transform: scale去缩小，因为被缩小的字号看起来会有点奇怪，别人都是14px，而你变成了13.231px，小了一点。响应式的原则一般是保持中间或者两边间距不变，然后缩小主体内容的宽度。
少用inline-block布局
有些人喜欢用inline-block，特别是刚开始学切图的人，因为block会换行，而inline-block不会换行还具有盒模型，因此inline-block用得很顺手，而float比较复杂，还要处理清除浮动之类的问题。如下布局：
应该写li，然后让li float，如果你让li display:inline-block也可以达到目的。但是inline-block用得多了可能会有一些奇怪的问题，你通常要在一个inline-block的元素里面套block的元素，inline-block是行内元素，而block是块级元素，这两者终究有点差别。这种应该用float/flex会更自然，如果你float用顺手了你会发现比inline-block好多了，并且更加专业。如果你没怎么用过flex ，那你可以尝试换一下使用flex，如果你没怎么用过float，可以尝试用一下。只有你的切图方式多样化了，你切起图来才能比较灵活。
凃老师
发布了17 篇原创文章 · 获赞 63 · 访问量 8963
私信
关注
标签：编码,font,样式,house,CSS,inline,戏说,选择器,block 来源： https://blog.csdn.net/tjx11111/article/details/104498451