如何防止样式表变得难以理解？

Question

如何防止CSS样式表（或预处理的LESS或SASS ...）变得难以理解混乱，不可能再预测哪些样式会影响每个元素，并且您必须对CSS进行进一步调整艰苦和无尽的试验和错误？

上下文：每次我开始在一个网站上工作时，我从一个干净的，开始组织一套样式表，一个框架（通常是Bootstrap），然后是一个布局样式表，一个排版样式表，一些网站的颜色方案样式表，然后一个通用的“看起来”样式按地区和分区域分组等等。直到通过缓慢添加东西，这些都变得非常好，干净，事情达到了一个“突破点”：我不能再将风格规则“运行在我的头上”，选择器变得如此复杂，以至于我无法轻易预测新规则中的元素将适用于，所以我开始打破层次结构并添加一个“tweaks1.css”调整图层，然后是“tweaks2.css”，然后所有它是下坡，风格变得完全不可理解！

...无论我是否使用LESS或SASS，也会发生同样的事情。 CSS的级联性质总是让我感到最好。所以... 有什么办法强制CSS提交？这里有没有“设计模式”？

注：我是一个程序员，我有一个以上的范式和编程语言的经验，我没有问题闹得不可开交大的代码库，但是当我到前台工作，莫名其妙的“层叠规则”逻辑的CSS只是打破了我的想法...我曾经得到与JavaScript意大利面相同的“难以理解”问题，但对于代码有模式和最佳做法，我找到方法来重构提交的东西...

Answer 1

这在CSS中总是很棘手的部分。写作的最佳方式是评论和视觉组织您的CSS。例如，我总是分成几个部分，如页面基本（定义字体，背景等），基本文本格式（p，h1-h6，i，b），链接和菜单（a，a：hover，nav）格式（div，节），表单/输入和转换/效果。

在测试阶段，我使用Firefox中的firebug来显示在元素级别应用了哪些CSS属性，什么是继承的，什么会被继承，但是已被覆盖。