远离CSS的抽象

让我说清楚一点.

我恨.CSS.

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

长话短说,这是一种痛苦.PITA,如果你愿意的话.

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

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

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

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

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

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

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

所需要的只是练习,及时你可以擅长它.

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

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

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

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

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

例如,而不是这样:

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

你可以做:

a, .entry, h1 { color: red }

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

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

很抱歉这些人,但你们所有人都错过了这一点.

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

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

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

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

咆哮结束.