远离CSS的抽象
让我说清楚一点。
我恨。 CSS。
这是一场永无止境的噩梦。每一次微小的布局更改都感觉像是骇客。解决问题的方法似乎常常需要像一些厨师那样四处乱动,试图确切地计算出要在即将成为著名的大米布丁中加入多少肉豆蔻。然后是多重浏览器问题,多重分辨率问题。
..简而言之,这很痛苦。如果我们愿意,可以使用PITA。
许多框架都试图从HTML(自定义标签,JSF组件系统)中抽象出来,以使处理特定内容变得更加容易。
你们有没有使用过类似概念适用于CSS的东西?可以为我们做一堆跨浏览器魔术的东西,支持类似的变量(为什么我每次想要该颜色时都必须键入#3c5c8d),支持计算字段(已"编译"为CSS和JS),等等。
另外,我什至在正确地考虑这一点?我是在试图将一个非常方形的方块推过一个非常圆的孔吗?
解决方案
回答
我发现最有效的方法是真正学习CSS。我的意思是真正学习CSS。
它可能是一门令人困惑的语言,但是如果我们对它有足够的了解和实践,最终我们将学到做事的最佳方法。
关键是要做到足够自然。如果我们在开始之前就知道要做什么,并且我们有足够的经验来做,那么CSS可能非常优雅。
诚然,有时它也是主要的PITA,但是如果我们真正地实践它并了解什么有效,什么无效以及如何解决问题,那么即使跨浏览器问题也不是那么糟糕。
它所要做的就是练习,随着时间的流逝,我们可以变得很擅长。
回答
我们始终可以使用模板引擎将变量和计算的字段添加到CSS文件中。
回答
Then comes the multiple browser issue
这样做有助于消除IE中的某些不一致之处。我们还可以使用jQuery通过javascript添加一些选择器。
我同意Dan的观点,学习它并不是什么问题,甚至很有趣。
回答
真正理解CSS(和浏览器头疼)的关键是对CSS标准使用的盒子模型以及某些浏览器使用的不正确模型的扎实理解。一旦掌握了这些知识并开始学习选择器,我们将摆脱浏览器特定的属性,并且CSS将成为我们期待的东西。
回答
瞧,这就是到目前为止的所有答案所提出的问题,它是有道理的,应被视为最终答案。让我尝试总结一下:
- CSS很好!为了进一步扩展,有一个学习曲线,但是一旦我们学习了它,许多事情就会变得容易得多。
- (某些)浏览器不一致通常可以解决。
- (一些)可以通过使用任何模板引擎来处理可变字段和计算字段的功能。
我认为所有这些结合起来肯定可以解决很多问题(尽管公平地深入学习CSS并不是每个人的选择;有些人只是不够用它来证明时间的合理性)。
以上几点都不存在一些问题(我认为某些类型的计算字段需要编写JS库),但这当然是一个好的开始。
回答
如果碰巧我们偶然使用了Ruby,那就是Sass。它支持层次选择器(使用缩进来建立层次结构)等等,从语法的角度来看,这使生活变得更容易扩展(重复的次数少了很多)。
我当然会和你在一起。虽然我认为自己是CSS的小专家,但是我认为如果有像Javascript一样的CSS工具(原型,JQuery等),那会很好。我们告诉工具我们想要什么,它可以处理浏览器在后台发生的不一致情况。 methinks,那将是理想的。
回答
这详细说明了我以前的答案。
当我刚开始使用CSS时,我还以为它不支持变量,表达式等而感到痛苦。但是,随着我开始越来越多地使用它,我开发了一种不同的样式来克服这些问题。
例如,代替此:
a { color: red } .entry { color: red } h1 { color: red }
你可以做:
a, .entry, h1 { color: red }
通过执行此操作,可以将声明的颜色保留在一个位置。
一旦使用了足够多的CSS,我们就应该能够轻松克服大多数浏览器的不一致性。如果发现需要使用CSS hack,则可能有更好的方法。
回答
为了提供变量支持,我将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 ?>; }
回答
Solutions to problems seem to often involve jiggering numbers around like some chef trying to work out exactly how much nutmeg to put in his soon-to-be famous rice pudding
我仅在尝试使IE中的内容正常工作时才得到此信息。
如果我们学习CSS到可以无需编写参考就可以编写大多数东西的地步(如果我们仍在定期查找参考,那么我们就不了解它,也不能声称自己抱怨),为Firefox / Safari开发,这是一个不错的地方。
在FF / Safari中运行IE之后,将IE兼容的痛苦和痛苦留到最后,因此责任将归咎于该死的IE,而不是一般的CSS。
回答
还要查看BlueprintCSS,它是CSS中的布局框架。它并不能解决我们所有的问题,但是可以解决很多问题,我们不必自己编写CSS。
回答
我相信,初学者使用CSS的常见错误与特定性有关。如果要对标签进行样式设置,是否确定要对文档中某个标签或者标签的某个"类"中的每个样式进行样式设置?
通常,我通常从CSS选择器开始就非常具体,并在认为合适时对其进行泛化。
这是关于这个主题的幽默文章,但也具有参考意义:
回答
特战
回答
对于CSS框架,我们可以考虑使用YUI网格。尽管使原始布局以其原始形式使用,但确实在语义上有所妥协,但它使基本布局变得更快,更简单。
CSS需要花费一些时间来学习,但是我最初发现最令人沮丧的一件事是,需要如此多的hack才能使所有浏览器以相同的方式运行。学习一个不遵循逻辑的系统似乎是愚蠢的……但是我坚信模糊的信念是,每个浏览器的特质背后都有逻辑,以W3规范的形式存在。似乎新一代浏览器正在慢慢流行起来,但是IE6仍然每天让我的生活变得地狱。
也许在兼容/有效的CSS代码和浏览器的伪劣实现之间创建一个抽象层并不是一件坏事。但是,如果创建了这样的东西,是否需要由JS(或者jQuery)提供支持? (这会在处理成本方面造成不合理的负担吗?)
回答
我发现在使用CSS编写脚本时"平整地面"很有用。可能有很多不同类型的重置脚本,但是使用YUI重置帮助我减少了否则会遇到的怪癖,并且YUI网格有时使生活变得更轻松。
I. Hate. Java. Is there something out there that will just write it for me? Not everyone has the time to master Java.
@SCdF:我认为总结很公平。但是,有些人没有时间学习CSS的说法是虚假的,请三思而后行。替换我们已经掌握的技术,我们将看到原因:
回答
CSS当然是一种不完善的技术,我非常希望从现在起的5年内,我们将不再处理浏览器不兼容的问题(我们几乎已经解决了),并且我们将拥有更好的作者端工具(我已经编写了一个供我自己使用的Visual Studio宏,它提供了我们描述的变量和计算的种类,因此这并非不可能),但坚持认为我们应该能够在不真正了解该技术的情况下有效使用该技术是不合理的。
回答
CSS变量即将(相对)问世,但我同意它们早就该了。同时,可以使用CSS模板引擎(例如Sass),甚至可以使用我们选择的动态Web语言,以编程方式生成样式表。
不好意思,但是你们所有人都错了。
抽象一词是关键。假设我们和Sally正在建立一个网站。当她使圆角变圆时,我们正在对表格进行样式化。我们和她都定义了一些选择器。
如果在不知不觉中选择了与Sally冲突的类名怎么办?我们会看到,使用CSS时,我们不能"隐藏"(抽象)细节。这就是为什么我们不能修复IE中的错误,然后创建一个其他人可以按原样使用的独立解决方案的原因,就像我们在编程语言中调用过程只关心前置条件和后置条件,而不考虑其在内部的工作方式一样。我们只需要想到要完成的工作即可。
这是Web的最大问题:它完全缺乏抽象机制!你们中的大多数人都会惊呼:"这是没有必要的;我们停止抽烟!"
取而代之的是,我们要反复做一些工作,例如修复布局错误,制作圆角或者在"最佳"标记上进行辩论。我们会找到一个说明解决方案的站点,然后将答案复制粘贴,然后将其调整为适合特定情况,甚至不考虑自己在做什么!是的,这就是我们要做的。
回答
咆哮的尽头。
不过,我们正在正确地考虑这一点,我们可能仍然需要了解CSS的不同浏览器实现。这仅仅是了解应用程序所处的环境。
需要澄清的是:这与了解CSS无关。如果我们精通该语言,则仍然需要处理该语言中的冗余,重复和缺少控制结构。
我已经牢固地编写CSS已有10多年了,我得出的结论是,尽管该语言功能强大且有效,但实现CSS却很糟糕。因此,我使用Sass或者Less或者xCSS之类的抽象层来连接该语言。这些工具使用类似于CSS的语法,因此我们可以在问题的领域中解决问题。使用PHP之类的工具编写CSS可以,但是并不是最好的方法。
通过抽象层将问题隐藏在语言中,我们可以交付更好的产品,该产品将在项目的整个生命周期中保持其完整性。除非我们提供大多数CSS编码人员都没有的可靠文档,否则手工编写CSS会加速软件的崩溃。如果我们要编写一个文档完善的CSS框架,则可能永远不会手动编写它。只是效率不高。
CSS的另一个问题是由于它不支持嵌套块声明。这鼓励编码人员构建一个扁平的全局类集,并使用命名约定来处理名称冲突。我们都知道全局变量是邪恶的,但是为什么我们要用这种方式编写CSS?给类一个上下文而不是将它们暴露给整个文档模型不是更好吗?命名约定可能会起作用,但这只是我们必须掌握的另一项任务才能编写语言。
段落数量不匹配