如何用6种方法提升CSS编写效率？

说实话，写CSS有时候就像是在玩一场没有尽头的俄罗斯方块。你以为自己把所有的方块都堆得整整齐齐，后来啊只要加一个新的样式，整个页面就像多米诺骨牌一样崩塌了。是不是很抓狂？ 拖进度。 别担心，我们都有过这种经历。今天我们就一起来看看CSS中的一些提升效率的使用技巧，让你的开发效率更高！这不仅仅是关于代码，更是关于如何保持你的理智。

目前大多数人对于CSS的使用只是停留在基本层面 设置位置，宽高，背景色等等。这当然没错，毕竟这是CSS的基石。但是CSS还有很多的高级使用技巧，在开发时省去很多时间。如果你还在用老一套的方法去写每一个按钮的圆角和颜色，那你真的需要停下来看看这篇文章了。艾编程前端博客曾经分享过 虽然我们今天只讲6种方法，但每一种都足以让你在深夜的代码调试中少掉几根头发。

1. 建立秩序：将布局与其他CSS分开

你有没有试过在一个几千行的CSS文件里找一个特定的margin值？那种感觉就像是在大海捞针。单独的布局样式使您可以更轻松地专注于其他CSS。将这些样式与CSS的其余部分分开， 等着瞧。 这您可以更轻松地专注于不同部分的外观，而不必关注它们相对于靠近它们的部分的行为。这可以通过添加网格系统来实现。

想象一下你的CSS文件就像一个乱糟糟的房间。如果你把衣服和书混在一起，你永远找不到东西。但是如果你把它们分开，生活就会变得美好很多。 提到这个... 将布局与其他CSS分开， 这不仅仅是为了整洁，更是为了让你在修改导航栏宽度的时候，不会不小心把文章内容的字体颜色给改了。

这可以通过添加网格系统来实现。当然 我不是说你必须非得用Bootstrap或者Foundation，哪怕是你自己定义的一套简单的类名，只要能把结构性的东西和装饰性的东西剥离开来那就是胜利。记住CSS不能像JavaScript那样抽象出问题。 往白了说... 它没有控制流程或功能。不过这是一件好事，所以呢不要尝试通过创建较长的选择器链，深层嵌套的样式或高度通用的样式来模仿它。