远离 CSS 的抽象

Question

许多框架试图从 HTML（自定义标签、JSF 组件系统）中抽象出来，以便更轻松地处理那个特定的鱼缸。

你们有没有使用过类似的概念应用于 CSS 的东西？ 为你做一堆跨浏览器魔法的东西，支持像变量（为什么我每次想要那种颜色时都必须输入#3c5c8d），支持计算字段（被“编译”成 CSS 和 JS）等。

或者，我是否正确地考虑了这一点？ 我是否试图将一个非常方形的块推过一个非常圆的孔？

Answer 1

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

学习它可能是一种令人困惑的语言，但是如果您阅读足够多的内容并进行练习，最终您将学会做事的最佳方式。

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

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

所需要的只是练习，随着时间的推移，你会变得擅长它。

Answer 2

如果您碰巧在使用 Ruby，则可以使用Sass 。 它支持层次选择器（使用缩进来建立层次结构），除此之外，这使得从句法角度扩展生活更容易（你重复自己的次数要少得多）。

不过，我当然和你在一起。 虽然我认为自己是一个小型 CSS 专家，但我认为如果有像 Javascript 一样的 CSS 工具（Prototype、JQuery 等）会很好。 你告诉工具你想要什么，它会在幕后处理浏览器的不一致。 那将是理想的，我想。

Answer 3

您始终可以使用template engine将variables和calculated fields添加到 CSS 文件中。

Answer 4

这详细说明了我以前的答案。

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

例如，而不是这样：

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

你可以做：

a, .entry, h1 { color: red }

通过这样做，您可以将声明的颜色保留在一个位置。

一旦你足够多地使用 CSS，你应该能够轻松克服大多数浏览器不一致的问题。 如果您发现需要使用 CSS hack，那么可能有更好的方法来做到这一点。

Answer 5

对不起，伙计们，但你们所有人都没有抓住重点。

抽象这个词是关键。 假设您和 Sally 正在制作一个网站。 当她使角落变圆时，您正在为表格造型。 你和她都定义了一些选择器。

如果您在不知不觉中选择了与 Sally 的名称冲突的班级名称怎么办？ 你看，当你在 CSS 中工作时，你不能“隐藏”（抽象出）细节。 这就是为什么你不能修复 IE 中的错误，然后创建一个其他人可以按原样使用的自包含解决方案，就像你在编程语言中调用过程一样，只关心前置和后置条件而不考虑它是如何工作的里面。 你只要想想你想完成什么。

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

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

吐槽结束。

Answer 6

然后是多浏览器问题

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

我同意Dan ，学习它，这不是什么大问题，甚至很有趣。

Answer 7

看，这就是 SO 的问题——到目前为止，每个答案都提出了一个有效的观点，应该被视为最终答案。 让我试着总结一下：

• CSS 不错！ 为了进一步扩展，有一个学习曲线，但是一旦你学会了它，很多事情就会容易得多。
• （某些）浏览器不一致一般是可以解决的。
• （您的一些） 变量和计算字段功能可以通过您使用的任何模板引擎来处理。

我认为将所有这些结合起来肯定会解决一大堆问题（尽管公平地深入学习 CSS 并不是每个人的选择；有些人只是没有足够的时间来使用它来证明时间）。

以上几点都没有涵盖一些问题（我认为，某些类型的计算字段需要编写 JS 库），但这当然是一个好的开始。

Answer 8

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

Answer 9

对于变量支持，我使用带有 CSS 标头的 PHP 来实现这一点。 我认为你可以用任何语言做到这一点。 这是一个 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 10

问题的解决方案似乎经常涉及到乱七八糟的数字，就像一些厨师试图计算出在他即将成为著名的布丁中到底放多少肉豆蔻一样

我只在尝试让东西在 IE 中工作时才得到这个。

如果您学习 CSS 到可以编写大部分代码而无需查找参考文献的程度（如果您仍在定期查找参考文献，那么您并不真正了解它，我认为也不能声称抱怨），然后为 firefox/safari 开发，这是一个非常好的地方。

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

Answer 11

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

Answer 12

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

Answer 13

另请查看BlueprintCSS ，这是一个 CSS 布局框架。 它不能解决您所有的问题，但可以解决很多问题，而且您不必自己编写 CSS。

Answer 14

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

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

这是一篇关于这个主题的幽默文章，但也提供了信息： Specificity Wars

Answer 15

CSS 需要一些时间来学习，但我最初发现最令人沮丧的事情是需要进行如此多的 hack 才能让所有浏览器以相同的方式运行。 学习一个不遵守逻辑的系统似乎很愚蠢……但我一直坚信每个浏览器的特性背后都有逻辑，以 W3 规范的形式。 似乎新一代浏览器正在慢慢适应 - 但 IE6 仍然每天让我的生活陷入困境。

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

我发现在使用 CSS 编写脚本时“平整地面”很有用。 那里可能有许多不同风格的重置脚本——但使用 YUI 重置帮助我减少了我会遇到的怪癖的数量——而 YUI 网格有时让生活更轻松一些。

Answer 16

@SCdF：我认为你在这里的总结是公平的。 但是有些人没有时间学习 CSS 的论点是错误的 - 想一想。 替换你已经掌握的技术，你就会明白为什么：

我恨。 爪哇。 有什么东西可以为我写吗？ 不是每个人都有时间掌握 Java。

CSS 肯定是一种不完美的技术——我寄予厚望，从现在起 5 年后我们不会再处理浏览器不兼容问题（我们快到了），并且我们将拥有更好的作者端工具（我已经为我自己编写了一个 Visual Studio 宏，它提供了你描述的那种变量和计算，所以这不是不可能的） - 但是坚持认为你应该能够有效地使用这项技术而不真正理解它是不合理的.

Answer 17

您不需要对 CSS 进行抽象——您需要在抽象中意识到 CSS 本身。 CSS 并不是将像素放在屏幕上。 相反，它是关于编写一个规则系统，帮助浏览器为您做出这些决定。 这是必要的，因为在您编写 CSS 时，您不知道浏览器将应用它的内容； 您也不知道浏览器将在什么环境中执行此操作。

掌握这一点需要时间。 你不能在周末学习 CSS 并做好准备。 这有点欺骗，因为语言的入门门槛如此之低，但水流很深。 这里只是您应该努力掌握的几个主题以精通 CSS：

• 级联和继承
• 盒子模型
• 布局方法，包括浮动和新的 flexbox
• 定位
• 当前的最佳实践，例如 SMACSS 或 BEM，可让您的样式保持模块化且易于维护

你不需要事先知道这一切，但你应该继续向前推进。 与其他语言和编程一样，您需要不断地学习和掌握这门手艺。 CSS 是 Web 开发的基本组成部分，更多的开发人员需要像对待其他语言一样尊重它。

Answer 18

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

澄清一下：这不是关于理解 CSS。 如果您非常了解该语言，您仍然必须处理该语言中的冗余、重复和缺乏控制结构。

我已经扎实地编写 CSS 超过 10 年，我得出的结论是，虽然该语言强大而有效，但实现 CSS 却很糟糕。 所以我使用了一个抽象层，比如Sass或Less或xCSS来接口到语言。 这些工具使用类似于 CSS 的语法，因此您正在解决问题域中的问题。 使用 PHP 之类的东西来编写 CSS 是可行的，但不是最好的方法。

通过抽象层隐藏语言中的问题，您可以提供更好的产品，在项目的整个生命周期中保持其完整性。 除非您提供了大多数 CSS 编码人员没有的可靠文档，否则手动编写 CSS 会加速软件腐烂。 如果您正在编写一个有据可查的 CSS 框架，您可能无论如何都不会手工编写它。 只是效率不高。

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

我鼓励那些以编写好的 CSS 为荣的人开始应用一些从编程到标记的最佳实践。 使用抽象层并不意味着您缺乏编写优秀 CSS 的技能，而是意味着您限制了对语言弱点的暴露。