预处理器是一种工具，您要使用得先要有一个适合的环境。如果你思念将其集成到你的应用程序中，也需要额外的编码。
如果你不想让你的代码变得混乱，你需要有一个观察机制，用来监测你的文件。如果这样，你每个项目开始时就需要运行这个监测机制。
通常开发人员只看到.less或.sass文件，但是输出是什么非常重要。你可能有写得很好的Sass代码，但这并不意味着，你最终会有很好的CSS代码。可能会有一些特异性的问题，所以需要定期检测编译的版本。
BEM
好的，我找到了一个新的好玩工具。这个预处理器可以节省大量的时间，但他不能为你写出好的结构。首先，我开始考虑是一个命名约定，让我们来看以下的HTML标签：
XML/HTML Code复制内容到剪贴板
<header class="site-header">
<div class="logo"></div>
<div class="navigation"></div>
</header>
可能会写出对应的样式：
CSS Code复制内容到剪贴板
.site-header { … }
.logo { … }
.navigation { … }
这样的样式能正常的工作，但它有一个问题——阅读CSS，让人难于理解。例如，logo是属于header部分的，你可能有另一个logo要放在页脚footer处。那么将添加一个后代选择器来控制：
CSS Code复制内容到剪贴板
.site-header .logo { … }
但是使用这些选择器并不是很好的主意，因为它始终需要依赖于特定的标记和结构。一旦你把logo移到<header>外面，样式将会丢失。另外一种做法是给logo添加一个site-header，给其重新命名：
CSS Code复制内容到剪贴板
.site-header-logo { … }
很棒了，自己就是说明，但它并不能运用于所有情况之下。例如，我想在12的圣诞节使用一个圣诞节版本的logo。所以，我不能写：
CSS Code复制内容到剪贴板
.site-header-logo-xmas { … }
因为我的逻辑是，写一个选择器要像嵌套HTML标签一样匹配。
BEM可能解决这样的情况。这意味着块(Block)、元素(Element)和修改器（Modifier）和一些创建规则，你可以遵循这些规则。使用BEM，我们的小例将变成：
CSS Code复制内容到剪贴板
.site-header { … } /* block */
.site-header__logo { … } /* element */
.site-header__logo–xmas { … } /* modifier */
