原创 十个实用的CSS代码技巧整理

为了让大家高效率的进行工作，本文归纳总结了十个实用的CSS代码技巧，希望对大家能有所帮助。简单来说，这十大技巧分别是注意外边距折叠，使用flex进行布局，所有元素设置为Border-box，重置元素的CSS样式，使用transform属性来创建动画，短横线命名，不要使用!important，使用AutoPrefixer达到更好的兼容性，Caniuse和验证。

1、注意外边距折叠

与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：

HTML<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;

}

2、使用flex进行布局

flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。

flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。

.container {

display: flex;

}

3、所有元素设置为Border-box

大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box-sizing属性有两个值：content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。
border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:
border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。

将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。

4、重置元素的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也是一个很棒的设置，我们紧接着就会介绍它。
5、使用transform属性来创建动画

最好使用transform()函数来创建元素的位移或大小动画，尽量不要直接改变元素的width，height以及left/top/bottom/right属性值。

下面的例子中，我们给.ball元素添加了一个从左向右的移动动画。推荐使用transform: translateX()函数来代替left属性。

.ball {

left: 50px;

transition: 0.4s ease-out;

}

/* 不建议 */

.ball.slide-out {

left: 500px;

}

/* 建议 */

.ball.slide-out {

transform: translateX(450px);

}

transform以及它的所有函数（translate, rotate, scale等）几乎没有浏览器兼容性问题，可以随意使用。

6、短横线命名

当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。

/* 正确 */

.footer-column-left { }

/* 错误 */

.footerColumnLeft { }

.footer_column_left { }

7、不要使用!important

说真的，不要使用!important。现在看起来可以快速的解决问题，但最终可能会导致大量的重写。相反，我们应该花点时间找到CSS选择器不工作的原因并更改它。

唯一可以使用的!important的地方是当您想要覆盖HTML中的内联样式时，但是内联样式同样也是一个坏的习惯，应该尽量的避免。

8、使用AutoPrefixer达到更好的兼容性

浏览器前缀是CSS中最烦人的事情之一，每个属性需要的前缀是不一致的，你永远不知道到底需要哪一个，如果真的要把它一个一个手动添加到样式表中，那无疑是一个无聊的噩梦。

值得庆幸的是，有工具可以自动为我们提供添加浏览器前缀的功能，甚至可以决定需要支持哪些浏览器：
在线工具：Autoprefixer

文本编辑器插件：Sublime Text, Atom

代码库：Autoprefixer (PostCSS)

9、Caniuse

对于CSS的属性Web浏览器仍然存在许多兼容性不一致的地方。使用caniuse来检查您使用的属性是否得到了广泛的支持？是否需要前缀？或者是否在某个浏览器中使用有要注意的地方？有了caniuse你在写CSS时就会更得心应手了。

10、验证

验证CSS可能不像验证HTML或JavaScript代码那么重要，但是通过工具运行一下你的代码仍然非常有用。它会告诉你是否犯了任何错误，警告错误的用法，并为您提供改进代码的提示。

就像压缩和Autoprefixer一样，有免费的工具可以利用：
在线

工具：W3 Validator, CSS Lint

文本编辑器插件：Sublime Text, Atom

代码库：stylelint (Node.js, PostCSS), css-validator (Node.js)

以上就是十个实用的CSS代码技巧整理。这些规则和实践经验，或多或少能帮助大家提高工作效率。关于前端的更多知识的学习和了解，大家可以上博学谷观看海量的学习视频资源。