Question

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

我想知道是否最好只创建几个实用程序类，例如.fontSize140 {font-size: 140%;}，.bgColorWhite{ background-color: white;}，并使用它们代替当前类集中发生的所有重复。< / p>

这样做有什么缺点吗？它变得模糊的一点是，如果当前类有3个属性设置，如颜色，背景颜色和字体大小，并且我已经有所有这三个的泛型类，我的html中的类定义是否就像{ {1}}。这似乎过分了。

Answer 1

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

fontSize140
bgColorWhite
marginTop150

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

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

（1）将HTML中的类的每个实例编辑为fontSize90bgColorBlueNoTopMargin或其他;或
（2）单独留下类名，并在HTML中留下极其混乱的类名。

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

Answer 2

CSS的一部分内容是将内容与演示文稿分开，以便在不改变内容的情况下更改演示文稿。如果你到处都有class="white bgColorBlue fontSize140"，那么你已经击败了这个目标;你可以和style="color: white; background-color: blue; font-size: 140%"一起去。你的课程应该说明你的意思而不是你想要的样子。

如果您发现自己重复了许多课程的某些设置，例如以下

.PreReleaseText { font-size: 140% }
.SpecLabel { font-size: 140%; background-color: white }
.SomeOtherThing { font-size: 140% }

您可以将其中几个组合成一个单一的规则

.PreReleaseText, .SpecLabel, .SomeOtherThing { font-size: 140% }
.SpecLabel { background-color: white }

如果你真的只有几个相互同义的类，你可能想要考虑为什么会这样。为什么所有这些都采用相同的方式？您是否可以提出一些包含所有这些用途的类名？或者它是偶然的，他们碰巧的风格是一样的？如果它只是偶然的，那么它们应该有单独的规则，因此您可以轻松地单独更新每个类的样式。如果有一些统一的主题，那么也许你应该将它们合并为一个类。

请记住要考虑在不同媒体或重新设计中会发生什么。想象一下，该公司已被收购，您希望改变配色方案以匹配新的企业颜色，而无需进行全面的重新设计。如果您有一个.bgColorWhite类，但只有部分标记在该类中的东西应该在重新设计中更改为新颜色，那么您将不得不再次浏览所有模板和标记以分离出类，但如果你用更有意义的类标记它们，你可能只需调整相应类中的颜色。

这些是一些一般性指导方针;你应该总是使用最适合你的东西。如果你有一个更具体的例子，我可能会建议一个更好的方法来重构你的课程以满足你的特定需求。

Answer 3

就我而言，没有正确和错误的方法。这取决于你知道你重复使用的频率以及最容易理解CSS的原因。我经常看到像.fontSize140这样的常规内容会在以后必须进行更改时导致问题。在大多数情况下，我更喜欢对课程进行分组，但保留个人姓名。

所以我可能有

.Thing1,
.Thing2,
.Thing3 { font-size:14px; }

.Thing1 { font-weight:bold; }
.Thing2 { font-size:italic; }

而不是

.font14 { font-size:14px; }

然后仍然需要.Thing1和.Thing2分支。

那就是我以后可以随时轻松更改CSS，而不必担心共享.fontSize140是什么。

Answer 4

我会像.fontSomeSize那样过于笼统。这就是说我通常会尝试使用将事物定义为逻辑“类型”或“对象”的类，例如.ruled-list或.summary。

Answer 5

为什么不尝试这样的事情：

使用像sass这样的css预处理器。

/* define app/website colors */

$main-color: #223c61;
$secondary-color: #2954a2;
$accent-color: #4cceac;

/* some example css classes */
.text-main { color: $main-color; }
.bg-secondary { background-color: $secondary-color; }
.bg-accent { background-color: $accent-color; }

/* define app/website spacings */

$spacing-xs: 10px;
$spacing-sm: 15px;
$spacing-md: 25px;
$spacing-lg: 35px;

/* some example css classes */
.padding-up-xs { padding-top: $spacing-xs; }
.padding-down-lg { padding-bottom: $spacing-lg; }
.margin-left-md { margin-left: $spacing-md; }

上面的代码有通用的css类，但它没有绑定到特定的值。对于某些非常特定的样式，您始终可以创建自定义css文件来解决这个问题。

我看到很多人在他们的CSS中使用自定义边距和填充。请参阅下面的代码。

.blog-post-sidebar-right { margin-top: 14px; }
.news-post-bottom-text { margin-bottom: 23px; }

根据经验，我总是使用4/5预定义的边距和填充。而不是你在飞行中弥补的任意数字。

那么为什么不定义通用的css类来使用它们呢？我把同样的想法应用到我的所有CSS中。现在我可以在每个项目中拥有相同的代码库。

因为您现在使用的是css预处理器，所以它易于维护，灵活且易于扩展。

我不是说这是最好的选择，但它确实适合我。

用更通用的类替换CSS类

5 个答案: