许多框架试图从 HTML（自定义标签、JSF 组件系统）中抽象出来，以便更轻松地处理特定的鱼锅。
你们有没有使用过类似的概念应用于 CSS 的东西？可以为你做一堆跨浏览器魔法的东西，支持变量（为什么我每次想要那种颜色时都必须输入#3c5c8d），支持计算字段（被“编译”成 CSS 和 JS）等等。
或者，我是否正确地考虑了这一点？我是否试图将一个非常方形的块推过一个非常圆的孔？
SCdF
问问题
1628 次
18 回答
34
我发现最好的方法是真正学习 CSS。我的意思是真正学习CSS。
学习它可能是一门令人困惑的语言，但如果你阅读足够多的内容并练习，最终你会学会做事的最佳方式。
关键是要做到足够自然。如果您在开始之前就知道自己想做什么并且有足够的经验去做，那么 CSS 会非常优雅。
诚然，有时它也是一个主要的 PITA，但如果你真的练习它并了解什么有效，什么无效，以及如何解决问题，即使跨浏览器问题也不是那么糟糕。
所需要的只是练习，随着时间的推移，你可以变得擅长它。
于 2008-08-24T23:47:41.310 回答
11
如果你碰巧在使用 Ruby，那就是Sass。它支持分层选择器（使用缩进建立层次结构）等，这使得从句法角度扩展生活更容易（你重复自己的次数要少得多）。
不过，我当然和你在一起。虽然我认为自己是一名小型 CSS 专家，但我认为如果有像 Javascript 那样的 CSS 工具（Prototype、JQuery 等）会很好。你告诉工具你想要什么，它会在幕后处理浏览器的不一致。我认为那将是理想的。
于 2008-08-25T01:05:01.467 回答
9
您始终可以使用 a
template engine添加variables和 添加calculated fields到您的 CSS 文件中。
于 2008-08-24T23:49:58.373 回答
7
这详细说明了我之前的答案。
当我第一次开始使用 CSS 时，我也认为它不支持变量、表达式等很痛苦。但是随着我开始使用它越来越多，我开发了一种不同的样式来克服这些问题。
例如，而不是这个：
a { color: red }
.entry { color: red }
h1 { color: red }
你可以做：
a, .entry, h1 { color: red }
通过这样做，您可以将声明的颜色保留在一个位置。
一旦你使用了足够多的 CSS，你应该能够轻松克服大多数浏览器的不一致性。如果你发现你需要使用 CSS hack，那么可能有更好的方法来做到这一点。
于 2008-08-25T01:17:19.317 回答
6
对不起，伙计们，但你们都错过了重点。
抽象这个词是关键。假设你和 Sally 正在制作一个网站。当她使角落变圆时，您正在设计表格。你和她都定义了一些选择器。
如果你在不知不觉中选择了与 Sally 的类名冲突的类名怎么办？你看，当你在 CSS 中工作时，你不能“隐藏”（抽象出来）细节。这就是为什么你不能修复 IE 中的错误然后创建一个独立的解决方案，其他人可以按原样使用，就像你在编程语言中调用过程只关心前置条件和后置条件而不考虑它是如何工作的里面。你只是想你想完成什么。
这是网络最大的问题：它完全缺乏抽象机制！你们中的大多数人会惊呼：“没必要；你戒烟吧！”
相反，您将做这样的工作，修复布局错误或制作圆角或一遍又一遍地争论这种或那种情况的“最佳”标记。你会找到一个解释解决方案的网站，然后复制粘贴答案，然后根据你的具体情况调整它，甚至不用想你到底在做什么！是的，这就是你要做的。
吐槽结束。
于 2009-07-08T09:12:44.920 回答
4
看，这就是 SO 的问题——到目前为止，每个答案都提出了一个有效的观点，应该被视为最终答案。让我试着总结一下：
我认为将所有这些结合起来当然可以解决大量问题（尽管公平地说，深入学习 CSS 并不是每个人的选择；有些人只是没有足够的时间使用它来证明时间的合理性）。
以上几点都没有涉及到一些问题（我认为某些类型的计算字段需要编写一个 JS 库），但这肯定是一个好的开始。
于 2008-08-25T00:50:44.513 回答
3
对于变量支持，我使用了带有 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 ?>;
}
于 2008-08-25T01:51:33.057 回答
3
问题的解决方案似乎经常涉及到一些乱七八糟的数字，就像一些厨师试图计算出在他即将出名的大米布丁中究竟放了多少肉豆蔻
我只有在尝试使东西在 IE 中工作时才得到这个。
如果您学习 CSS 到可以编写大多数东西而无需查找参考的程度（如果您仍在定期查找参考，那么您并不真正了解它并且不能声称抱怨我认为），然后为 firefox/safari 开发，这是一个相当不错的地方。
在 FF/Safari 中工作后，将 IE 兼容性的痛苦和折磨留到最后，所以你的想法会将责任归咎于 IE，它该死的属于它，而不是一般的 CSS。
于 2008-08-25T02:30:56.270 回答
3
对于 CSS 框架，您可以考虑YUI Grids。它使基本布局更快更简单，尽管以原始形式使用它确实在语义上有所妥协。
于 2008-09-03T16:36:40.690 回答
3
CSS 变量（相对）很快就会出现，但我同意它们早就应该出现了。同时，可以使用 CSS 模板引擎（例如 Sass），甚至是您选择的动态 Web 语言，以编程方式生成样式表。
于 2008-10-30T14:01:34.993 回答
2
真正理解 CSS（以及让浏览器头疼）的关键是对 CSS 标准使用的盒子模型以及某些浏览器使用的不正确模型有充分的理解。一旦你掌握了它并开始学习选择器，你将摆脱浏览器特定的属性，CSS 将成为你期待的东西。
于 2008-08-25T00:35:50.617 回答
2
另请查看BlueprintCSS，这是 CSS 中的一个布局框架。它不能解决你所有的问题，但很多，而且你不必自己编写 CSS。
于 2008-08-25T05:46:00.187 回答
2
我相信初学者对 CSS 的常见错误与特异性有关。如果您正在为a标签设置样式，您确定要为文档中的每个标签或标签的某个“类”设置样式吗？
我通常开始对我的 CSS 选择器非常具体，并在我认为合适的时候概括它们。
这是一篇关于该主题的幽默文章，但也提供信息： Specificity Wars
于 2008-08-25T16:02:38.177 回答
0
CSS 需要一些时间来学习，但我最初发现最令人沮丧的是，需要大量的 hack 才能让所有浏览器都以相同的方式运行。学习一个不符合逻辑的系统似乎很愚蠢......但我坚持一个模糊的信念，即每个浏览器的特性背后都有逻辑，以 W3 规范的形式。似乎新一代浏览器正在慢慢融入其中——但 IE6 仍然每天都让我的生活陷入困境。
也许在兼容/有效的 CSS 代码和浏览器的伪劣实现之间创建一个抽象层并不是一件坏事。但是如果创建了这样的东西——它需要由 JS（或 jQuery）驱动吗？（在处理成本方面，这会造成不合理的负担吗？）
我发现在使用 CSS 编写脚本时“平整地面”很有用。那里可能有很多不同风格的重置脚本——但使用 YUI 重置帮助我减少了我会遇到的怪癖数量——而且 YUI 网格有时让生活变得更轻松。
于 2008-10-30T02:53:48.397 回答
0
@SCdF：我认为您在这里的总结是公平的。但是有些人没有时间学习 CSS 的论点是虚假的 - 想一想。替换你已经掌握的技术，你会明白为什么：
我恨。爪哇。有什么东西可以为我写吗？不是每个人都有时间掌握 Java。
CSS 肯定是一种不完美的技术——我寄希望于 5 年后我们将不再处理浏览器不兼容问题（我们几乎就在那里），并且我们将拥有更好的作者端工具（我已经为我自己编写了一个 Visual Studio 宏，它提供了你描述的那种变量和计算，所以这不是不可能的） - 但是坚持你应该能够在没有真正理解它的情况下有效地使用这项技术是不合理的.
于 2008-10-30T13:45:08.067 回答
0
尽管您正确地考虑了这一点，但您可能仍需要了解 CSS 的不同浏览器实现。这只是了解您的应用程序所处的环境。
澄清一下：这与理解 CSS 无关。如果你很了解这门语言，你仍然必须处理语言中的冗余、重复和缺乏控制结构。
10 多年来，我一直在扎实地编写 CSS，我得出的结论是，虽然该语言功能强大且有效，但实现 CSS 却很糟糕。所以我使用像Sass或Less或xCSS 之类的抽象层来连接语言。这些工具使用类似于 CSS 的语法，因此您正在解决问题域中的问题。使用 PHP 之类的东西来编写 CSS 是可行的，但不是最好的方法。
通过抽象层将问题隐藏在语言中，您可以交付更好的产品，在项目的整个生命周期中保持其完整性。手工编写 CSS 会加速软件腐烂，除非您提供了大多数 CSS 编码人员所没有的可靠文档。如果您正在编写一个文档齐全的 CSS 框架，那么您可能无论如何都不会手动编写它。只是效率不高。
CSS 的另一个问题是它缺乏对嵌套块声明的支持。这鼓励编码人员构建一个扁平的全局类集，并使用命名约定处理名称冲突。我们都知道全局变量是邪恶的，但为什么我们要这样写 CSS？给你的类一个上下文而不是把它们暴露给整个文档模型不是更好吗？您的命名约定可能有效，但这只是您必须掌握的另一项任务才能编写语言。
我鼓励那些以编写好的 CSS 为荣的人开始将一些从编程到标记的最佳实践应用到您的标记中。使用抽象层并不意味着您缺乏编写优秀 CSS 的技能，而是意味着您限制了对语言弱点的暴露。
于 2010-12-18T00:18:41.940 回答
0
您不需要脱离 CSS 的抽象——您需要在抽象中意识到 CSS 本身。CSS 并不是把像素放在屏幕上。相反，它是关于编写一个规则系统来帮助浏览器为您做出这些决定。这是必要的，因为在您编写 CSS 时，您不知道浏览器将应用它的内容；您也不知道浏览器将在哪个环境中执行此操作。
掌握这一点需要时间。你不能在一个周末学习 CSS 并做好准备。有点自欺欺人，因为语言门槛很低，但水深。以下是您应该寻求掌握的一些主题以精通 CSS：
- 级联和继承
- 盒子模型
- 布局方法，包括浮动和新的 flexbox
- 定位
- 当前的最佳实践（例如 SMACSS 或 BEM）可让您的样式保持模块化且易于维护
你不需要预先知道这一切，但你应该继续向前推进。就像其他语言和一般编程一样，您需要不断寻求学习更多知识并掌握工艺。CSS 是 Web 开发的基本组成部分，更多的开发人员需要像对待其他语言一样尊重它。
于 2016-09-19T19:01:03.463 回答