20个让你效率变的更高的CSS代码小技巧！
Posted 前端社
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20个让你效率变的更高的CSS代码小技巧！相关的知识，希望对你有一定的参考价值。
有一些是面向CSS初学者的，有一些知识点是进阶型的。
1、注意外边距折叠
这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。
例如：
<div class="square red"></div>
<div class="square blue"></div>
CSS
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
红色方块与蓝色方块的上下间距是40px，而不是70px。
2、使用flex进行布局
浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。
flex可以很容易的按照我们预期的方式创建布局。
flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。
目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。
.container {
display: flex;
}
3、重置元素的CSS样式
解决这个问题的最佳办法是在CSS开头为所有的元素设置通用的CSS Reset重置代码，这样你是在没有任何默认内外边距的基础上进行布局，于是所产生的效果也就是统一的。
网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，你可以在你的项目中引用它们。
如果你不想使用第三方代码库，你可以使用下面的样式来进行一个非常基本的CSS reset：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
上面的代码看起来有些霸道，将所有元素的内外边距都设置为0了，而正是没有了这些默认内外边距的影响，使得我们后面的CSS设置会更加的容易。
同时box-sizing: border-box也是一个很棒的设置，我们紧接着就会介绍它。
4、所有元素设置为Border-box
box-sizing属性有两个值：
content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。
border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:
border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。
5、将图片作为背景
这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。
有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。
举个例子：
HTML
<section>
<p>Img element</p>
<img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
CSS
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
background引入图片的一个缺点是页面的Web可访问性会受到轻微的影响，因为屏幕阅读器和搜索引擎无法正确地获取到图像。
6、更好的表格边框
例如，如果要向表格及其单元格添加简单的边框，则最可能的结果是：
如你所见，有很多重复的边框，看起来很不好看。
这里有一个快速的方法来删除所有的双倍边框：border-collapse: collapse，只需设置这个属性后，表格的边框看起来就顺眼多了：
7、更友好的注释
添加一些简单的注释可以将代码分类区分，方便自己和同事后期维护。
对于大的区域划分或者重要的组件可以使用下面的注释样式：
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
对于细节和不太重要的样式可以使用单行的注释方式：
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外，请记住，CSS中没有//注释，只有/**/注释：
/* 正确 */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* 错误 */
p {
padding: 15px;
// border: 1px solid #222;
}
8、短横线命名
同样，CSS中也不建议使用下划线连接的命名方式。
/* 正确 */
.footer-column-left { }
/* 错误 */
.footerColumnLeft { }
.footer_column_left { }
当涉及到命名时，您还可以考虑BEM，它遵循一组原则，提供基于组件并增加一致性的开发方法。
9、不要重复设置
只需将要设置的字体样式添加到<html>或<body>元素中，然后让它们自动向下继承。
html {
font: normal 16px/1.4 sans-serif;
}
然后我们就可以统一的一次改变页面上所有的文字样式了。
当然，CSS中并不是所有的属性都是可继承的，对于这些属性我们仍然需要在每个元素上单独设置。
10、使用transform属性来创建动画
下面的例子中，我们给.ball元素添加了一个从左向右的移动动画。
推荐使用transform: translateX()函数来代替left属性。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* 不建议 */
.ball.slide-out {
left: 500px;
}
/* 建议 */
.ball.slide-out {
transform: translateX(450px);
}
11、不要DIY，多使用代码库
CSS社区非常庞大，不断有新的代码库出现。
它们有各种用途，从微小的片段到构建响应式应用程序的整体框架。其中大多数也是开源的。
12、保持选择器的低权重
当初学习CSS时，我总是认为选择器会覆盖它上面的所有内容。
然而，情况并非如此，就如我们在下面的示例中所说明的：
HTML
<a href='#' id='blue-btn' class="active">按钮</a>
CSS
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
}
我们希望.active类中设置的样式会生效使按钮变为红色。
但是它并不会起作用，因为按钮在上面有一个ID选择器，它同样设置了background-color，ID选择器具有更高的权重，所以按钮的颜色是蓝色的。
选择器的权重大小规格如下：
ID (#id) > Class (.class) > Type (例如 header)
权重也会叠加，于是a#button.active的权重要比a#button的高。
13、不要使用!important
相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。
14、使用text-transform转换字母为大写
本条适用于英文环境，不适合中文
在HTML中，可以将某个单词全部写为大写字母来表达强调的含义。
比如：
<h3>Employees MUST wear a helmet!</h3>
如果你需要将某段文字全部转化为大写，我们可以在HTML中正常书写，然后通过CSS来转化。这样可以保持上下文内容的一致性。
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
text-transform: uppercase;
}
15、Em, Rem与px
一直以来都有很多的争论。事实是，这三种选择都是可行的，都有其利弊。
在什么时候在什么项目使用哪种单位是没有一个定论的，开发人员的习惯不同，项目的要求不同，都可能会使用不同的单位。
然而，虽然没有固定的规则，但是每种单位还是有一些要注意的地方的：
em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，但是由于em单位在每一级中都是相对于父元素进行计算的，所以要得出某个子元素em单位对应的px值，有时候是很麻烦的。
rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的所有标题和段落文本大小变得非常容易。
px - 像素单位是最精确的，但是不适用于自适应的设计。px单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到1px。
最重要的是，不要害怕尝试，尝试所有方法，看看最适合什么。
16、对于大型项目使用预处理器
预处理器是CSS的未来。它们提供诸如变量、CSS函数、选择器嵌套和许多其他很酷的功能，使CSS代码更易于管理，特别是在大型项目中。
举个简单的例子，下面是一个SASS代码的片段，它使用到了一些CSS变量和函数：
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
17、使用AutoPrefixer达到更好的兼容性
值得庆幸的是，有工具可以自动为我们提供添加浏览器前缀的功能，甚至可以决定需要支持哪些浏览器：
在线工具：Autoprefixer
文本编辑器插件：Sublime Text, Atom
-
代码库：Autoprefixer (PostCSS)
18、压缩CSS文件
压缩版本的文件将删除所有空白和重复，从而减少总文件的体积。
当然，这个过程也会使样式表完全不可读，所以要在生产环境中使用.min版本，同时为开发保留常规版本。
有许多不同的方法来压缩CSS代码：
在线工具：CSS Minifier, CSS Compressor
文本编辑器插件：Sublime Text, Atom
代码库：Minfiy (php), CSSO, CSSNano (PostCSS, Grunt, Gulp)
19、Caniuse
使用caniuse来检查您使用的属性是否得到了广泛的支持？
是否需要前缀？
或者是否在某个浏览器中使用有要注意的地方？
20、验证
它会告诉你是否犯了任何错误，警告错误的用法，并为您提供改进代码的提示。
就像压缩和Autoprefixer一样，有免费的工具可以利用：
在线工具：W3 Validator, CSS Lint
文本编辑器插件：Sublime Text, Atom
代码库：stylelint (Node.js, PostCSS), css-validator (Node.js)
链接：https://segmentfault.com/a/1190000019542534
设置星标，与10000+前端开发者共成长
以上是关于20个让你效率变的更高的CSS代码小技巧！的主要内容，如果未能解决你的问题，请参考以下文章