如何防止CSS样式表（或预处理的LESS或SASS ......）成为难以理解的混乱，无法预测哪些样式会影响每个元素，您必须对基于CSS的设计进行所有进一步的调整通过艰苦而无休止的试验和错误？
上下文：每次我开始在一个网站上工作时，我都会从一个干净的组织样式表开始，一个框架（通常是Bootstrap），然后是一个布局样式表，一个排版，对于某些网站来说是一个配色方案样式表，然后是一个通用的“看起来”，其中样式按区域和子区域分组，依此类推。这一切都很好，干净，直到慢慢添加东西，事情达到了“突破点”：我不能再“在我的脑海里”风格规则，选择器变得如此复杂，以至于我不能轻易地预测新规则是什么元素将适用于，所以我开始打破层次结构，并添加一个“tweaks1.css”调整图层，然后添加“tweaks2.css”，然后所有它都是下坡，造型已经变得完全不可理解！
......无论我是使用LESS还是SASS，都会发生同样的事情。 CSS的级联性质总是让我感觉最好。所以... 有没有办法强制CSS提交？这里有“设计模式”吗？
注意：我是一名程序员，我有不止一种范式和编程语言的经验，我在编写大型代码库方面没有问题，但是当我进入前端工作时，不知怎的“级联规则”逻辑CSS只是在某种程度上打破了我的想法...我过去常常遇到与Javascript spaghetti相同的“难以理解”的问题，但是对于代码有模式和最佳实践，我找到了将事情重构为提交的方法......
答案 0 :(得分：1)
这在CSS中总是很棘手。写作时最好的方法是评论和可视化组织你的CSS。例如，我的总是分为页面基本（定义字体，背景等）基本文本格式（p，h1-h6，i，b），链接和菜单（a，a：hover，nav），表格，格式化（div，section），表单/输入和转换/效果。
在测试阶段，我在Firefox中使用firebug来向我展示在元素级别应用的CSS属性，继承的内容以及将被覆盖但已被覆盖的内容。