戏说前端之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。代码里面缩进了七、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，能够尝试用一下。只有你的切图方式多样化了，你切起图来才能比较灵活。