英文原文：Separation, Abstraction, and Cascading in CSS 摘要：LESS和Sass(或者类似方案)从三个方面解决了css存在的问题：分离，抽象和层叠。当我在接受他们时，我发现css还有一些其他问题需要解决。在这里我提出些解决方案。

介绍

有很多充分的理由说明LESS和Sass的用途。css很难做到可维护性。LESS和Sass（类似工具）使css变成了一个更加易用的语言。

但是，当人们谈论到为什么他们如此强大时，往往都失去了主见。的确，你的样式文件更简洁和易读了，然而，这里还有比纯粹的节省代码量和命名更深层次的东西。

在这篇文章中，我将从一个开发者和编程语言爱好者的直觉感受到的，尽可能图文并茂的解释下为什么css天生难以维护，并且没有达到他自身的设计目的；为什么LESS和Sass使这个糟糕的语言变得更加可用。我也将提出具体的解决方案，这些将使LESS和Sass提高到更高的一个层次。

零度分离

在以前，人们用HTML tables来设计页面的样式，文件看起来像酱紫：

CSS出现时，人们讨论了很多关于页面内容和样式的分离的问题。CSS基本上帮助你把样式从HTML文件中脱离出来。

样式仍然与你的样式文件定义的样式结构相关。他们没有自己的分组，如果你想重复利用一段样式，那么你可以复制粘贴，或者通过逗号分隔方式公用一段样式。但是两种方式都很糟糕！

还有一种更糟糕的解决方式，也是最常见的一种方式，那就是按照命名给定样式，我们可以看到在很多号称让你的html中写更少样式信息的糟糕的“css框架”中，应用的非常多。网格系统（grid）就是个很典型的例子。

但是这些问题出现的原因，不在于这些css框架的作者，很多web开发者也都在寻求解决这些问题的方案。归根到底，这些都是css作者的责任。使用css，的确能做到页面内容和样式分离，但是实现起来很费劲。

HTML和CSS的独立性是不一样的。HTML可以没有CSS，但是CSS没有了HTML，狗屁不是！

如果你真的想实现页面内容从样式分离，你必须把html和css放在同等的基础上设置，像这样（译注：图裂了）:

页面内容放到html文件，样式写到css文件中，然后通过第三种语言建立他们之间的关系。

LESS的 LESS Elements让其成为可能。人们在讨论LESS时，往往关注的是它减少了样式的定义和重复性，或者隐藏了依赖于浏览器的css特性。但是，这些都不是问题的本质。之前所有的讨论都试图实现通过定义一个独立于HTML文件的mixin样式，然后只需根据定义的名称绑定到一个或者多个HTML元素。

使用LESS，我可以定义个混合类Dorothy:

.dorothy() {
  background-color: green;
  text-color: yellow;
  border: 1px solid red;
}

呵呵，这个样式看起来有点丑，但是它仅是个样式。它不依赖于任何的HTML结构，甚至一个HTML标签。现在，如果你想使用它，只需要在需要的地方引用它就可以，下面是几个例子。

div.main {
  .dorothy;
}

blockquote {
  .dorothy;
}

这是LESS让HTML样式更加易用的一个方面，除此之外，你可以定义个包含大小和颜色的变量，这也是把样式绑定到HTML的另外一种方式.

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务