样式语言比CSS强制执行更多的纪律? (但不是LESS和SASS)

时间:2011-06-21 13:03:32

标签: css sass less

随着时间的推移,CSS样式表有一个变大和混乱的习惯。

有很多规则,提示和思想流派有助于实现更清洁的CSS。 (例如here)但是,所有这些都需要持续的警觉性,活动以及维护者端的纪律很多,并且在现实世界中取得了成功。作为Nicole Sullivan so nicely puts it:

  

事实上,在大多数情况下,我们认为最佳实践的事情会导致我们试图避免的不良后果。我意识到(尽管它可能不受欢迎),我们不能通过更努力地努力使它运作良好。每次我们开始一个新项目时,我们都会想“这一次,我将保持代码清洁。这次项目将成为CSS可以做些什么的光辉榜样。“随着时间的推移,随着更多的内容和功能被添加到网站,代码变得意味着重复和不可预测的纠结。

是否有任何努力创建某种语言,严格的结构规则和无情的编译器,强制执行严格的规则,以防止样式表成为意大利面?编译的最终结果将是CSS。

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

这个领域有没有研究?有什么可以尝试的吗?

一个非常有趣的相关工具是CSS Lint,但我所询问的内容甚至更远。

  

编辑: LESS和SASS绝对走向正确的方向,但它们不是我想要的。他们介绍了一些非常好的功能,并且对于CSS开发人员来说是天赐之物,但是我所询问的内容甚至更多地进入了定义的强制结构。

5 个答案:

答案 0 :(得分:20)

你可以很容易地用任何解释语言编写意大利面条代码,所以你真正想要的是一个CSS编译器。这就是Google GWT通过Java代码生成JavaScript所做的一切。

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

如果你想要控制你的CSS代码,你也需要统治你的DOM。如果您要定义ID为leftright的列,那么您在语义上限制设计者将其移动到其他位置。另一方面,如果你对事情很聪明,你可以做更多的事情。

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

答案 1 :(得分:10)

  

是否有任何努力来创建某种语言......编译的最终结果将是CSS。

我知道有两项努力要做到这一点:

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

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

[编辑]以下链接详细介绍了Google在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

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

答案 2 :(得分:4)

Stylus,类似于LESS和SASS,但是有透明的mixins。

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

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

form input
  padding 5px
  border 1px solid
  border-radius 5px

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

PS:如果您愿意,您仍然可以键入大括号和分号;)

答案 3 :(得分:3)

你签出了Compass吗? Compass是围绕Sass构建的框架。我认为它主要添加功能和样板代码来添加预定义mixins和诸如此类的库。但是,Compass可能更接近您想要的内容。 Compass基于Blueprint,这是一个直接的CSS框架(也可能值得一试)。

对我而言,最好的方法是选择Compass和Sass(或CSS和Blueprint / LESS以及类似的东西),并编写一个非常简洁和详细的风格指南,当你找出最有效的方法时,你可以加班加点:你的无论经验如何,对此事的初步想法可能都是错误的。一旦你掌握了这些指导原则,你就可以与Sass,Compass,LESS,Blueprint等人一起讨论如何处理你的一些经过深思熟虑和“研究”的指导方针。或者你可以开始为这些精彩的项目做出贡献,我相信这些项目都属于开源许可证(Sass在麻省理工学院,LESS在Apache下,我认为Compass和Blueprint也在某种形式的开源许可下)。把它分开并享受乐趣:D

答案 4 :(得分:3)

嗯,你似乎知道Nicole Sullivan,所以如果你已经知道OOCSS,我道歉,但似乎没有人提起它。如果你不这样做,我相信这是她自己的项目。它现在只在Alpha测试中,但你问的是努力而不是语言,所以也许这就是你正在寻找的。它绝对声称是为了解决你描述的问题,但我自己并没有使用它。

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