样式比CSS更具纪律性的语言？（但少而又少）

css CSS

卡卡西

2020-03-23

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开发人员来说是一个天赐的礼物，但是我要问的是对定义的，强制执行的结构的了解甚至更多。

第2748篇《样式比CSS更具纪律性的语言？（但少而又少）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
LGil 2020.03.23

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

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

卡卡西Near 2020.03.23

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

有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

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

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

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

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

樱小胖Mandy 2020.03.23

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android