远离CSS的抽象

Question

让我说清楚一点。

予。的恨即可。 CSS。

这是一场永无止境的噩梦。每一个小的布局变化都像一个黑客。问题的解决方案似乎经常涉及到像一些厨师试图弄清楚他将要在他即将出名的米饭布丁中放入多少肉豆蔻的数字。然后是多个浏览器问题，多个解决方案问题......

长话短说，这很痛苦。 PITA，如果你愿意的话。

许多框架试图从HTML（自定义标签，JSF组件系统）中抽象出来，以便更容易处理特定的鱼群。

你们有没有人使用过类似的概念应用于CSS？为你做一堆跨浏览器魔术的东西，支持变量（我为什么每次想要那种颜色时都要键入＃3c5c8d），支持计算字段（'编译'到CSS和JS中）等等。

或者，我是否正确地考虑过这个问题？我试图通过一个非常圆的洞推动一个非常方形的块？

Answer 1

我发现最有效的方法是真正学习CSS。我的意思是真的学习CSS。

学习它可能是一种令人困惑的语言，但如果你对它进行了充分的阅读和练习，最终你将学会最好的做事方法。

关键是要做到足够自然。如果你在开始之前知道自己想做什么，并且有足够的经验，那么CSS可以非常优雅。

当然，它有时也是一个主要的PITA，但即使是跨浏览器问题也不是那么糟糕，如果你真的练习它并了解哪些有效，哪些无效，以及如何解决问题。

只需要练习，及时就可以做到这一点。

Answer 2

如果你偶然使用Ruby，那就是Sass。它支持分层选择器（使用缩进来建立层次结构）等等，这使得从语法角度来看，生活更容易（你重复自己的次数要少得多）。

但是，我肯定和你在一起。虽然我认为自己是一个小型的CSS专家，但我认为如果有像CSS一样的工具（原型，JQuery等）会很好。你告诉工具你想要什么，它处理幕后的浏览器不一致。这将是理想的，可以解决。

Answer 3

您始终可以使用模板引擎将变量和计算字段添加到CSS文件中。

Answer 4

这详细阐述了我之前的回答。

当我第一次开始使用CSS时，我也认为这是一个痛苦，它不支持变量，表达式等。但随着我开始越来越多地使用它，我开发了一种不同的风格来克服这些问题。

例如，而不是：

a { color: red }
.entry { color: red }
h1 { color: red }

你可以这样做：

a, .entry, h1 { color: red }

您可以通过执行此操作将颜色声明保留在一个位置。

一旦你足够使用CSS，你应该能够轻松克服大多数浏览器的不一致性。如果您发现需要使用CSS hack，则可能有更好的方法。

Answer 5

很抱歉这些人说，但你们所有人都错过了这一点。

抽象这个词是关键。说你和莎莉正在建立一个网站。你是圆角的造型。你和她都定义了一些选择器。

如果在不知不觉中，你选择了与莎莉的名字相冲突的话？你看，当你在CSS中工作时，你不能“隐藏”（抽象出）细节。这就是为什么你无法修复IE中的错误，然后创建一个其他人可以按原样使用的独立解决方案，就像你用编程语言调用程序只关心前后条件而不考虑如何它在内部工作。您只需要想到想要完成的。

这是网络最大的问题：它完全缺乏抽象机制！你们中的大多数人都会惊呼：“这是不必要的;你们不要再抽烟了！”

相反，您将完成相应的工作，修复布局错误或制作圆角或对此案例或“案例”的“最佳”标记进行辩论。你会找到一个解释解决方案的网站，然后复制粘贴答案，然后根据你的具体情况调整它，甚至不用考虑你到底在做什么！是的，那就是你要做的。

咆哮结束。

Answer 6

  

然后是多浏览器问题

this有助于消除IE中的一些不一致之处。您还可以使用jQuery通过javascript添加一些选择器。

我同意Dan，了解它，这不是一个问题，甚至是有趣的。

Answer 7

看，这是SO的问题 - 到目前为止，每个答案都是有效的，应该被认为是最终答案。让我试着总结一下：

• CSS is good！ To expand further，有一个学习曲线但是一旦你学会了它，很多事情就会容易得多。
• （部分）浏览器不一致are solvable一般。
• （您的一些）Variable and calculated字段功能可以通过您使用的任何模板引擎来处理。

我认为所有这些的组合肯定解决了大量的问题（虽然公平地深入学习CSS不是每个人的选择;有些人只是不足以证明时间的合理性。）

上面提到的一些问题都没有（某些类型的计算字段需要编写JS库，我想），但这肯定是一个好的开始。

Answer 8

对于变量支持，我已经使用PHP和CSS标头来实现这一点。我想你可以用任何语言来做。这是一个php示例：

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }

Answer 9

  

问题的解决方案似乎经常涉及到像一些厨师试图准确计算出他即将出名的米饭布丁中含有多少肉豆蔻的数字。

我只是在试图让IE工作时才能得到这个。

如果你学习CSS，你可以编写大多数东西，而不必查阅参考（如果你仍然经常查找参考，你真的不知道它，并且不能声称抱怨我认为） ，然后为firefox / safari开发，这是一个非常好的地方。

在FF / Safari中工作之后，将IE兼容性的痛苦和痛苦留在最后，所以你的头脑会把责任归咎于IE，它该死的很好，而不是CSS。

Answer 10

CSS变量are coming（相对）很快，但我同意他们早就应该了。与此同时，可以使用CSS模板引擎（如Sass），甚至是您选择的动态Web语言，以编程方式生成样式表。

Answer 11

对于CSS框架，您可以考虑YUI Grids。它使基本布局更加快速和简单，虽然以原始形式使用它确实在语义上妥协。

Answer 12

另请查看CSS中的布局框架BlueprintCSS。它并没有解决你所有的问题，但很多问题，你不必自己编写CSS。

Answer 13

我认为初学者对CSS的常见错误与特异性有关。如果您要设置 a 标记的样式，您确定要确定样式文档中的每一个样式或 a 标记的某个“类”吗？

我通常开始对我的CSS选择器非常具体，并在我认为合适的时候对它们进行概括。

这是关于这个主题的humerours文章，但也是信息性的： Specificity Wars

Answer 14

真正理解CSS（以及浏览器头痛）的关键是对CSS标准使用的box model以及某些浏览器使用的错误模型的充分理解。一旦你掌握了它并开始学习选择器，你将远离浏览器特定的属性，CSS将成为你期待的东西。

Answer 15

CSS需要花费一些时间来学习，但我最初发现最令人沮丧的事实是，需要这么多黑客才能让所有浏览器以相同的方式运行。学习一个不遵守逻辑的系统似乎是愚蠢的...但我坚持认为每个浏览器的特性背后都有逻辑，以W3规范的形式存在。看起来新一代浏览器正在慢慢上线 - 但IE6仍然让我的生活每天都在地狱。

也许在兼容/有效的CSS代码和浏览器的劣质实现之间创建一个抽象层并不是一件坏事。但如果创建了这样的东西 - 它需要由JS（或jQuery）提供支持吗？ （就处理成本而言，这会产生不合理的负担吗？）

我发现在使用CSS编写脚本时，“平衡地面”非常有用。可能存在大量不同风格的重置脚本 - 但是使用YUI重置帮助我减少了否则会遇到的怪癖数量 - 而YUI网格有时会让生活变得更轻松。

Answer 16

@SCdF：我认为你的摘要是公平的。但有些人没有时间学习CSS的论点是假的 - 只需考虑一下。替换你掌握的技术，你会明白为什么：

  

予。讨厌。 Java的。那里有什么东西可以写给我吗？不是每个人都有时间掌握Java。

CSS肯定是一项不完美的技术 - 我非常希望5年后我们不再处理浏览器不兼容问题（我们几乎就在那里），并且我们将拥有更好的作者端工具（我已经编写了一个Visual Studio宏供我自己使用，它提供了你描述的那种变量和计算，所以这并非不可能） - 但要坚持你应该能够有效地使用这项技术而不是真正理解它只是不是不合理。

Answer 17

您正在考虑这个问题，但您可能仍需要了解CSS的不同浏览器实现。这只是了解您的应用程序所处的环境。

澄清：这不是关于理解CSS。如果你对语言有所了解，你仍然需要处理语言中的冗余，重复和缺乏控制结构。

我已经坚持写了十多年的CSS并且我得出的结论是，尽管语言功能强大且有效，但实现CSS很糟糕。所以我使用像Sass或Less或xCSS这样的抽象层来连接语言。这些工具使用类似于CSS的语法，因此您可以解决问题域中的问题。使用像PHP这样的东西编写CSS有效，但不是最好的方法。

通过抽象层隐藏语言中的问题，您可以提供更好的产品，在项目的整个生命周期中保持其完整性。手动编写CSS会加速software rot，除非您提供大多数CSS编码器都没有的可靠文档。如果您正在编写一个记录良好的CSS框架，那么您可能不会手动编写它。它效率不高。

CSS的另一个问题是它缺乏对嵌套块声明的支持。这鼓励编码人员构建一个扁平的全局类，并使用命名约定处理名称冲突。我们都知道全局变量是邪恶的，但为什么我们这样写CSS呢？为类提供上下文而不是将它们暴露给整个文档模型不是更好吗？并且您的命名约定可能会起作用，但这只是您必须掌握的另一项任务，以便编写语言。

我鼓励那些为编写优秀CSS而自豪的人开始将一些编程中的最佳实践应用到标记中。使用缩进层并不意味着你缺乏编写好CSS的技巧，这意味着你已经限制了你对语言弱点的接触。

Answer 18

你不需要远离CSS的抽象 - 你需要在抽象中认识到CSS本身。 CSS不是将像素放在屏幕上。相反，它是关于编写一个规则系统，帮助浏览器为您做出决定。这是必要的，因为在您编写CSS时，您不知道浏览器将应用它的内容;你也不知道浏览器将要做的环境。

掌握这需要时间。你不能在周末拿起CSS并且好好去。这有点欺骗，因为语言的进入门槛很低，但是水深。以下是您应该掌握的几个of the topics以便精通CSS：

• 级联与继承
• The Box Model
• 布局方法，包括浮动和新的flexbox
• 定位
• 当前最佳实践，例如SMACSS或BEM，以保持您的样式模块化和易于维护

你不需要事先知道这一点，但你应该继续前进。正如其他语言和编程一般，您需要不断寻求学习更多知识并掌握工艺。 CSS是Web开发的基础部分，更多开发人员需要以与其他语言相同的方式对待它。