编写现代CSS代码的20个建议

/* Do */ .footer-column-left { } 
 
/* Don't */ .footerColumnLeft { } 
 
.footer_column_left { }

而涉及到具体的变量定名规范时，建议是应用BEM规范，只要遵守一些简单的原则即可以包管基于组件风格的定名一致性。你也可以参考CSS Tricks来获得更多的细节描述。

避免反复代码

大年夜部分元素的CSS属性都是大年夜DOM树根部持续而来，这也是其定名为级联样式表的由来。我们以font属性为例，该属性往往是持续自父属性，是以我们并不须要再零丁地为元素设置该属性。我们只须要在html或者body中添加该属性然后使其层次传递下去即可:

html { 
 
  font: normal 16px/1.4 sans-serif; 
 
}

应用transform添加CSS Animations

.ball {    
    left: 50px;    
    transition: 0.4s ease-out;    
}/* Not Cool*/.ball.slide-out {    
    left: 500px;    
}/* Cool*/.ball.slide-out {    
    transform: translateX(450px);    
}

不要反复造轮子

<div class="movie-poster">Star Wars: The Force Awakens</div>    
 
.movie-poster {    
    text-transform: uppercase;    
}

如今CSS社区已经异常宏大年夜，并且赓续地有新的各种各样的库开源出来。这些库可以赞助我们解决大年夜小的代码片到用于构建完全的响应式应用的全框架。所以如不雅下次你再碰着什么CSS问题的时刻，在计算撸起袖子本身上之前可以测验测验在GitHUB或者CodePen上搜刮可行筹划。

尽可能应用低优先级的选择器

并不是所有的CSS选择器的优先级都一样，很多初学者在应用CSS选择器的时刻都是推敲以新的特点去复写全部的持续特点，不过这一点在某个元素多状况时就麻烦了棘譬如下面这个例子:

a{    
    color: #fff;    
    padding: 15px;    
}    
 
a#blue-btn {    
    background-color: blue;    
}    
 
a.active {    
    background-color: red;    
}

Transform的几个属性translate、rotate、scale都具有比较好的浏览器兼容性可以宁神应用。

我们本来欲望将.active类添加到按钮上然后使其显示为红色，不过在膳绫擎这个例子中很明显起不了感化，因为button已经以ID选择器设置过了配风景，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级次序为：ID(#id) > Class(.class) > Type(header)

避免应用!important

卖力的说，切切要避免应用!important，这可能会导致你在将来的开辟中无尽的属性重写，你应钙揭捉?择更合适的CSS选择器。而独一的可以应用!important属性的场景就是当你想去覆源涑些行内样式的时刻，不过行内样式本身也是须要避免的。

应用text-transform属性设置文本大年夜写

Em, Rem, 以及 Pixel

已经有很多关于人们应当若何应用em，rem，以及px作为元素尺寸与文本尺寸的评论辩论，而笔者认为，这三个尺寸单位都有其实用与不实用的处所。不合的开辟与项目都有其特定的设置，是以并没有通用的规矩来决定应当应用哪个单位，这里是我总结的几个推敲:

3/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

　　别说自己懂手机还玩Root的才是发烧友

如今，你买一部安卓手机，你还会Root吗?如今，你拥有一部可以逃狱的iPhone，你还会逃狱吗?曾几时，当我们拿到新智妙手机之后，都邑第一时光选择Root(逃狱)，然则如今我们可能不会那么做了>>>详细阅读

本文标题：编写现代CSS代码的20个建议

地址：http://www.17bianji.com/lsqh/36968.html

1/2 1