设计比CSS更严格的语言样式?(但不是LESS和SASS)

  • 本文关键字:LESS SASS 样式 CSS 语言 css sass less
  • 更新时间 :
  • 英文 :


CSS样式表有一个习惯,随着时间的推移,它会变得庞大而混乱。

有很多规则、提示和思想流派可以帮助实现更清洁的CSS。(例如这里)然而,所有这些都需要维护人员不断的警觉、活动和大量的纪律,在现实世界中取得了喜忧参半的成功。正如妮可·沙利文所说:

事实上,在大多数情况下,我们认为的最佳实践导致了我们试图避免的糟糕结果。我意识到(尽管这可能不受欢迎),我们不可能通过更努力来让它成功。每次我们开始一个新项目时,我们都会想"这一次,我会保持代码的整洁。这一次这个项目将成为CSS可以做的一个光辉的例子。"毫无疑问,随着时间的推移,随着更多的内容和功能被添加到网站中,代码将变成重复和不可预测的意大利面条。

有没有努力创造一种语言,用严格的结构规则和无情的编译器来执行严格的规则,防止样式表变成意大利面条?编译后的最终结果将是CSS。

我不知道这样的语言会是什么样子,也不知道考虑到大量的可能性和组合,这是否是一个可以解决的问题。

这方面有研究吗?有什么可以尝试的吗?

一个非常有趣的相关工具是CSS Lint,但我所问的远不止于此。

编辑:LESS和SASS绝对朝着正确的方向发展,但它们不是我想要的。它们引入了一些非常好的功能,对CSS开发人员来说是天赐之物,但我所问的问题越来越深入到定义的、强制的结构中。

您可以很容易地用任何解释语言编写意大利面条代码,所以您真正想要的是CSS编译器。这就是GoogleGWT通过从Java代码生成JavaScript所做的工作。

然而,CSS没有流控制、函数、变量等,这意味着围绕CSS使用更高级别的语言是没有意义的。从根本上讲,它只是具有级联逻辑的名称-值对。

如果你想控制你的CSS代码,你也需要控制你的DOM。如果定义ID为leftright的列,则在语义上限制设计器将它们移动到其他位置。另一方面,如果你做事聪明,你可以做得更多。

最后,级联部分是大多数新设计师最容易出错的部分。如果你密切关注DOM和级联逻辑,使用一些好的重置或基于网格的框架,并结合LESS(Ruby)或LessPHP等工具,你最终会得到更令人愉快的CSS。我喜欢LESS,因为它为您提供了准函数、变量和嵌套属性,这确实有助于清理CSS。

有没有努力创造一种语言。。。编译后的最终结果将是CSS。

据我所知,有两项努力可以做到这一点:

  • 减少

  • SASS

两者都旨在提供CSS的改进版本,使您能够用更多的结构进行编写。

此外,谷歌还展示了Chrome的开发版本,其中包含了一些类似的CSS添加。这很有趣,因为它指明了CSS的未来方向,但在中短期内,你需要使用Less或Sass,因为即使是Chrome中的工作也是非常实验性的,在未来一段时间内不会发布(即使是这样,你也需要等待其他浏览器效仿)。

[EDIT]这里有一个链接,详细介绍了谷歌在Chrome中的实验性CSS功能:http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/

【2012年4月18日更新】自从我写下这个答案以来,这方面已经取得了一些进展。进展缓慢,但仍有进展。好消息是CSS Variables刚刚作为W3C的初稿规范发布。看见http://lists.w3.org/Archives/Public/www-style/2012Apr/0228.html以供规范的正式发布。

所以这是个好消息。当然,进入浏览器和最终用户群需要多长时间是任何人的猜测,但至少有进步的迹象。

有Stylus,类似于LESS和SASS,但有透明的混合。

这意味着您可以通过将复杂性绑定到新的键/值对中来隐藏复杂性。网站示例:

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
form input
  padding 5px
  border 1px solid
  border-radius 5px

也许这种语法就是你想要的?

附言:如果你愿意,你仍然可以键入大括号和分号;)

你似乎知道Nicole Sullivan,所以如果你已经知道OOCSS,我很抱歉,但似乎没有人提起它。如果你不这样做,我相信这是她自己的项目。它现在只在Alpha测试中,但您询问了所做的努力和尚未完成的语言,所以也许这正是您想要的。它肯定声称是为了解决你描述的问题,但我自己没有用过。

https://github.com/stubbornella/oocss/wiki

您检查过指南针吗?Compass是围绕Sass构建的一个框架。我认为它主要添加了特性和样板代码,以添加预定义的mixins库等等。然而,Compass可能更接近您想要的。Compass基于Blueprint,这是一个直接的CSS框架(可能也值得一看)。

对我来说,最好的方法是采用Compass和Sass(或CSS和Blueprint/LESS以及类似的东西),并编写一份非常简洁和详细的风格指南,当你发现什么最有效时,你可以加班加点地制定:无论经验如何,你对这件事的第一想法都可能是错误的。一旦你制定了这些指导方针,你就可以和Sass、Compass、LESS、Blueprint等公司的人谈谈,按照你精心设计和"研究"的指导方针工作。或者你可以开始为这些精彩的项目做出贡献,我相信这些项目都是在开源许可证下进行的(Sass在麻省理工学院,LESS在Apache下,我认为Compass和Blueprint也在某种形式的开源许可证之下)。分叉并享受乐趣:D

最新更新