•  09-06-2019
  •  | 
  •  

题

让我说清楚一些事情。

我。 恨. 。CSS。

这是一场永无休止的噩梦。每一个小的布局变化都感觉像是黑客攻击。问题的解决方案似乎经常涉及到一些数字，就像一些厨师试图计算出在他即将出名的大米布丁中到底要放多少肉豆蔻一样。然后是多浏览器问题、多分辨率问题。

..长话短说，这是一种痛苦。皮塔饼，如果你愿意的话。

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

你们使用过的东西中是否有类似的 CSS 概念？它可以为你带来很多跨浏览器的魔力，支持类似的变量（为什么我每次想要那种颜色时都必须输入 #3c5c8d），支持计算字段（被“编译”成 CSS 和 JS）等等。

或者，我是否正确地思考过这个问题？我是否试图将一个非常方形的块推入一个非常圆的孔中？

有帮助吗？

解决方案

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

其他提示

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

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

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

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

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

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

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

例如，而不是：

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

你可以这样做：

a, .entry, h1 { color: red }

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

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

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

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

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

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

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

咆哮结束。

  

然后是多浏览器问题

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

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

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

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

我认为所有这些的结合肯定可以解决大量问题（尽管公平地说，深入学习 CSS 并不是每个人都可以选择；有些人只是没有充分利用它来证明时间的合理性）。

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

对于变量支持，我已经使用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 ?>;
     }
  

问题的解决方案似乎经常涉及到像一些厨师试图弄清楚他将要在他即将成名的米饭布丁中放入多少肉豆蔻的数字一样晃动数字

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

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

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

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

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

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

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

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

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

这是关于这个主题的humerours文章，但也是信息性的： 特异性战争

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

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

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

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

  

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

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

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

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

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

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

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

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

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

掌握这一点需要时间。你不可能在一个周末学会 CSS 并且可以轻松上手。这有点欺骗性，因为该语言的进入门槛很低，但水流不断 深的. 。这里只是一些 的主题 你应该努力掌握并精通CSS：

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

您不需要预先了解所有这些，但您应该继续前进。就像其他语言和一般编程一样，您需要不断寻求学习更多内容并掌握技巧。CSS 是 Web 开发的基本组成部分，更多的开发人员需要像对待其他语言一样尊重它。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top