用更通用的类替换CSS类

Question

我正在努力重构大量的CSS,我看到的一个共同趋势是为页面上的一个非常特定的项目创建了几个类.这些类不是试图描述它们的作用,而是命名为"PressReleaseText"或"SpecLabel"等.大多数这些只是定义一个项目,如字体大小或颜色.

我想知道,如果这将是最好只创建几个实用工具类,比如.fontSize140 {font-size: 140%;},.bgColorWhite{ background-color: white;}以及利用这些到位跨越当前的一组类中出现的所有重复的.

这样做有什么缺点吗？它变得模糊的地方是,如果当前类有3个属性设置,如颜色,背景颜色和字体大小,并且我已经有所有这三个的泛型类,我的html中的类定义看起来就像class="white bgColorBlue fontSize140".这似乎过分了.

Answer 1

这绝对是一种可怕的做法.它比你想要替换的当前类名要差10倍.请考虑以下类名:

• fontSize140
• bgColorWhite
• marginTop150

这些显然是非常具有描述性的类名.问题是他们描述了课程背后的风格,而不是风格的内容.虽然这可以更容易在HTML中阅读,但如果你决定进行最微小的重新设计,它将是一个完整的噩梦.

例如,假设我们只将这三个类应用于一个文本块.它的字体大小为140%,白色背景,上边距为150px.这一切都很好 - 直到我们决定它需要90%字体,蓝色背景,没有上边距.现在,您不仅需要更改CSS声明,还必须:

• (1)编辑HTML中的每个类的实例fontSize90bgColorBlueNoTopMargin或其他; 要么
• (2)单独留下类名,并在HTML中留下极其混乱的类名.

无论哪种方式,对你来说这将是一个巨大的痛苦,而当前的类名(例如specLabel,pressReleaseText)恰当地描述了他们风格的内容 ; 它们的样式可以很容易地改变而不会影响它们内部的内容,从而不会影响类的名称.