样式比CSS更具纪律性的语言?(但少而又少)

CSS style sheets have a habit of growing big and chaotic over time.

There are a lot of rules, hints, and schools of thought that help achieving cleaner CSS. (For example here) However, all those require constant alertness, activity and a lot of discipline on the maintainer's end, with mixed real-world success. As Nicole Sullivan so nicely puts it:

In fact, in most cases, the things we considered best practices were leading to the bad outcomes we sought to avoid. I realized (unpopular though it might be), that we couldn’t make it work out well by trying harder. Each time we start a new project, we think “this time, I’m going to keep the code clean. This time the project will be a shining example of what can be done with CSS.” And without fail, over time, as more content and features are added to the site, the code becomes a spaghetti tangle of duplication and unpredictability.

Are there any efforts to create a language of some sort, with strict structural rules and a merciless compiler, that enforces strict rules that prevent style sheets from becoming spaghetti? The compiled end result would be CSS.

我不知道这样的语言会是什么样子,以及在存在众多可能性和组合的情况下,这是否是一个完全可以解决的问题。

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

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

编辑: LESS和SASS绝对朝着正确的方向发展,但是它们不是我想要的。它们引入了一些非常好的功能,对于CSS开发人员来说是一个天赐的礼物,但是我要问的是对定义的,强制执行的结构的了解甚至更多。

LGil2020/03/23 11:46:20

你检查过指南针吗?Compass是围绕Sass构建的框架。我认为它主要是添加功能和样板代码来添加预定义的库mixins和诸如此类的东西。但是,指南针可能甚至更接近您想要的。Compass基于BlueprintBlueprint是一个简单的CSS框架(可能也值得研究)。

对我而言,最好的方法是采用Compass和Sass(或CSS和Blueprint / LESS等类似工具),并编写非常简洁详细的样式指南,在找出最有效的方法时可以加班开发:此事,无论经验如何,都可能是错的。一旦掌握了这些准则,您就可以与Sass,Compass,LESS,Blueprint等机构的人员讨论如何制定经过深思熟虑和“研究”的准则。或者,您可以开始为这些精彩的项目做出贡献,我相信这些项目都是在开源许可证下进行的(Sass在MIT之下,LESS在Apache之下,我认为Compass和Blueprint也在某种形式的开源许可证下)。分叉,玩得开心:D

卡卡西Near2020/03/23 11:46:20

是否有任何努力来创建某种语言?编译后的最终结果将是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

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

Itachi神无2020/03/23 11:46:20

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:如果愿意,您仍然可以键入大括号和分号;)

樱西里猴子2020/03/23 11:46:20

您可以很容易地用任何解释语言编写意大利面条代码,因此,您真正要寻找的是CSS编译器。这是Google GWT通过从Java代码生成JavaScript来实现的。

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

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

最后,级联部分是大多数新设计师最容易出错的地方。如果您密切关注DOM和级联逻辑,利用一些良好的重置方法或基于网格的框架,并结合使用LESS(Ruby)或LessPHP之类的工具,您将最终获得更令人愉悦的CSS支持。我喜欢LESS,因为它可以为您提供准功能,变量和嵌套属性,这实际上有助于清理CSS。

樱小胖Mandy2020/03/23 11:46:20

好吧,您似乎了解Nicole Sullivan,所以,如果您已经了解OOCSS,我深表歉意,但是似乎没有人提出。我相信,如果不这样做,那么做这件事是她自己的项目。目前,它仅在Alpha测试中,但是您询问的是工作而不是完成的语言,所以也许这正是您想要的。它绝对声称是为了解决您描述的问题,但我自己没有使用过。

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