提问人：Pekka 提问时间：6/21/2011 最后编辑：CommunityPekka 更新时间：8/30/2014 访问量：1137
样式语言比 CSS 更严格？（但不是 LESS 和 SASS）
Styling languages that enforce more discipline than CSS? (But not LESS and SASS)
问：
CSS 样式表有一种习惯，随着时间的推移会变得庞大和混乱。
有很多规则、提示和思想流派有助于实现更干净的 CSS。（例如这里）然而，所有这些都需要维护者时刻保持警觉、活跃和大量纪律，在现实世界中取得的成功喜忧参半。正如妮可·沙利文（Nicole Sullivan）所说：
事实上，在大多数情况下，我们认为最佳实践的事情导致了我们试图避免的不良结果。我意识到（尽管它可能不受欢迎），我们无法通过更努力地让它顺利进行。每次我们开始一个新项目时，我们都会想“这一次，我要保持代码干净。这一次，这个项目将成为CSS可以做些什么的光辉典范。随着时间的流逝，随着更多内容和功能添加到网站中，代码会变成重复和不可预测的意大利面条。
有没有努力创造某种语言，具有严格的结构规则和无情的编译器，执行严格的规则来防止样式表变成意大利面条？编译后的最终结果将是 CSS。
我不知道这样的语言会是什么样子，也不知道，考虑到大量的可能性和组合，这是否是一个可以解决的问题。
这方面有研究吗？有什么可以尝试的吗？
一个非常有趣的相关工具是 CSS Lint，但我要问的远不止于此。
编辑：LESS 和 SASS 绝对朝着正确的方向前进，但它们不是我想要的。它们引入了一些非常好的功能，对于CSS开发人员来说是天赐之物，但是我所问的问题甚至更深入地进入了定义的，强制的结构。
答：
10赞
Spudley
6/21/2011
#1
有没有努力创造某种语言......编译后的最终结果将是 CSS。
据我所知，有两项努力可以做到这一点：
两者都旨在提供 CSS 的改进版本，允许您使用更多结构进行编写。
此外，谷歌还展示了Chrome的开发版本，该版本以类似的方式对CSS进行了许多添加。这很有趣，因为它指出了 CSS 的未来方向，但在中短期内，您将需要使用 Less 或 Sass，因为即使是 Chrome 中的工作也非常具有实验性，并且不会在未来一段时间内发布（即使发布，您也需要等待其他浏览器效仿）。
[编辑]这里有一个链接，详细介绍了谷歌在Chrome中的实验性CSS功能： http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/
[2012年4月18日更新]自从我写这个答案以来，这方面已经取得了一些进展。进展缓慢，但仍然进步。好消息是，CSS 变量刚刚被 W3C 作为初稿规范发布。 有关规范的官方公告，请参阅 http://lists.w3.org/Archives/Public/www-style/2012Apr/0228.html。
所以这是个好消息。当然，进入浏览器和最终用户群需要多长时间是任何人的猜测，但至少有进步的迹象。
评论
0赞
Pekka
6/21/2011
有趣 - 你有关于 Chrome 的任何链接吗？
1赞
Spudley
6/21/2011
@Pekka -- 不知何故，我忽略了把它加入书签，所以我不得不用谷歌搜索它，但找到了它并把它添加到了答案中。
20赞
aleemb
6/21/2011
#2
你可以很容易地用任何解释型语言编写意大利面条代码，所以你真正要找的是CSS编译器。这就是 Google GWT 通过从 Java 代码生成 JavaScript 来为 JavaScript 所做的。
但是，CSS 没有流控制、函数、变量等，这意味着围绕 CSS 使用更高级别的语言是没有意义的。从根本上说，它只是具有级联逻辑的名称-值对。
如果你想控制你的 CSS 代码，你也需要控制你的 DOM。如果要定义具有 ID 的列，然后在语义上限制设计器将它们移动到其他任何位置。另一方面，如果你对事情很聪明，你可以做更多的事情。leftright
最后，级联部分是大多数新设计师最容易出错的部分。如果你密切关注 DOM 和级联逻辑，使用一些好的重置或基于网格的框架，并结合 LESS （Ruby） 或 LessPHP 等工具，你最终会得到更令人愉悦的 CSS。我喜欢 LESS，因为它为您提供了准函数、变量和嵌套属性，这确实有助于清理您的 CSS。
评论
1赞
Shauna
6/21/2011
如果我能给你投更多的票，我会的。每个人似乎都试图将CSS视为一种“编程语言”，但事实并非如此。拥有像 LESS 这样的工具可以使开发 CSS 更像编程语言（因此不需要范式转换），但最终，CSS 仍然只是名称-值对。
2赞
Pekka
6/21/2011
+1 这可能是它的长处和短处 - 执行纪律的解决方案必须控制（和构建）放入 DOM 和 CSS 规则的内容。最后，你会得到像GWT这样的东西——很多人不喜欢它，因为它太受限制了。@Shauna我知道CSS不是一种编程语言，但它所描述的内容仍然有规则和结构。
0赞
Shauna
6/21/2011
@Pekka - 是的，有，但不是像大多数人那样想要一个像你想要的、喜欢的或接受的编译器一样。与编译语言相比，遵循解释型语言需要更多的思考和跑腿工作，因为没有编译器可以对你大喊大叫。
0赞
Pekka
6/21/2011
@Shauna这正是我的问题 - 是否有以可检查和可编译的形式描述设计规则的方法，以及创建 CSS 的可能最终结果。
0赞
aleemb
6/22/2011
@Pekka，考虑一个与DOM+CSS相关的解决方案，并且能够编译，这是一个好的开始——这就是我所暗示的，尽管我不确定它是否能让你到达你想去的地方。使用 DOM+CSS，您现在有两个问题：结构和样式。您甚至可能最终会得到生成 HTML+CSS 的 ASP.NET 服务器端控件之类的东西。
3赞
cwoodall
6/22/2011
#3
你检查过指南针吗？Compass 是一个围绕 Sass 构建的框架。我认为它主要添加功能和样板代码以添加预定义库和其他内容。但是，Compass 可能更接近您想要的。Compass 基于 Blueprint，这是一个直接的 CSS 框架（可能也值得研究）。mixins
对我来说，最好的方法是使用 Compass 和 Sass（或 CSS 和 Blueprint/LESS 以及类似的东西）并编写一个非常简洁和详细的风格指南，当你弄清楚什么最有效时，你可以加班加点地制定：你对这个问题的第一个想法，无论经验如何，都可能是错误的。一旦你有了这些指导方针，你就可以和 Sass、Compass、LESS、Blueprint 等人谈谈，谈谈在你经过深思熟虑和“研究”的指导方针中工作。或者你可以开始为这些精彩的项目做出贡献，我相信这些项目都是在开源许可下进行的（Sass在麻省理工学院的领导下，LESS在Apache下，我认为Compass和Blueprint也在某种形式的开源许可下）。分叉它，玩得开心:D
评论
4赞
cwoodall
6/22/2011
只是为了完整起见，似乎还有一种叫做 HSS 的东西......我对此了解不多，但可能也值得一看
3赞
C. Warren Dale
6/22/2011
#4
Well you seem to know about Nicole Sullivan, so if you know about OOCSS already, I apologize, but no one seems to have brought it up. If you don't, it's her own project to do this very thing, I believe. It's only in Alpha testing right now, but you asked about efforts and not finished languages, so maybe this will be just what you're looking for. It definitely claims to be be for solving the problems you describe, but I haven't used it myself.
https://github.com/stubbornella/oocss/wiki
4赞
flying sheep
8/6/2011
#5
There is Stylus, something like LESS and SASS, but with transparent mixins.
That means that you can hide away complexity by bundling it into new key/value pairs. Example from the site:
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
form input
padding 5px
border 1px solid
border-radius 5px
Maybe this kind of syntax is what you want?
PS: you can still type braces and semicolons, if you prefer ;)
评论