如何处理需要更改CSS类名称

我正在寻找人们处理不可避免的需要改变或以其他方式调整CSS类以适应新的HTML元素的策略。我经常在这种情况下发现自己，所以我希望其他人分享我的痛苦，并可以在这里提出建议。如何处理需要更改CSS类名称

想象一下，您有一个产品的表格，其语义类名称很好products。这是在你的样式表中适当的样式。几个月后，老板会要求您在网站上创建一个员工名单，“名称与产品列表完全一样”。

这立即引发了一个重要的问题：什么叫新员工表。我能想到的唯一选择是：

给它的类名products以及。这是最快的解决方案，但是破坏了语义。命名对于未来的开发者尤其没有多大意义。
将类名更改为可包含产品和员工列表的内容。这将否定标记与风格分离的效用，因为HTML需要改变。此外，我想不出一个非表象类别的名称，可以想象应用于产品和的员工名单。
引入一个新的类名并编辑CSS文件，使得.products { ... }变成.products, .staff { ... }和.products thead th.number { font-weight: bold }变成.products thead th.number, .staff thead th.number { font-weight: bold }等。另一种丑陋的解决方案随着时间的流逝只会变得更加复杂。

这里采取的最佳行动方案是什么？

N.B.我相信这个问题很容易用像LESS这样的框架解决（我没有亲自使用它），但是这个解决方案更多的是作为'掩饰'而不是实际的补救措施。

来源

2012-02-22 Sam Hastings

如何选择4：

制作一份“产品”为“员工”，继续对他们独立工作随着时间的推移。

来源

2012-02-22 17:01:42

啊，那是我无法想起的第四种选择！这不是我特别喜欢的解决方案。它打破了DRY原则，并且再次否定了分离内容和样式所带来的好处。然而现在它是最有吸引力的解决方案... – 2012-02-22 17:06:33

这也是一个更多未来的证明。 – 2012-02-22 17:07:40

如果你不得不把表格的风格写成几个字，那会是什么？我试着用它来命名我可以在多个地方使用的风格。然后我知道如果我使用这个类，它会是什么样子。

例子：

。表条纹{}

来源

2012-02-22 17:03:15

如果你在将来重新调整表格的大小，并且它不再被分条，那么你会被类名“.table-striped”卡住，它绝不会像表格的视觉属性那样。 – 2012-02-22 17:08:30

说实话，这是我见过的一个非常大的辩论。我已经从争论的双方读到了一些东西。一个很好的阅读让你的css模块化是：http://smacss.com/。即使你不同意，也有一些好的观点和提示。 – 2012-02-22 17:17:45

这是对的事情，我真的不喜欢CSS之一。随着所有强大的语言在我们的掌握之中，这一个似乎从一开始就处于非常普遍的情况下，像你的一样。我也一直在努力，最终要么将所有.product相关的类图像复制到我的新图像中，要么将我的新图像添加到.product图像中。他们可能会被拖出。

我也需要研究预处理器，因为我喜欢做的事情是OOP-y - 定义b'基类'，这两个.product和.mynewone继承并从那里继承。

但＃3是你最好的选择国际海事组织。

来源

2012-02-22 17:07:38 n8wrl

我打算用first option，因为如果一切都一样&那里只是内容的变化。因此，最好使用以前的products职员也可以&您可以在HTML页面内的评论<-- staff plan-->的帮助下单独定义您的职员面板。

来源

2012-02-22 17:08:01 sandeep

嗯......

基本上根本的问题是，你原来创建的第一个样式类（.products）的想法是过于狭窄而得名。并不总是有可能知道您将来需要重新使用CSS定义的重要部分，但根据您的问题，您似乎处于该业务线中。

核心CSS框架不必说“让我的新风格（.staff）是另一个相同的风格（.products）这些覆盖”

的方式，但我认为，LESS框架并给你可以快速定义具有所有属性的类（.coolTable），并在多个其他类定义（.products和.staff）中重新使用这些属性。

LESS框架不像CSS的功能扩展那样是一种“掩盖”。

来源

2012-02-22 17:17:35

我会去的第一个选项，有products类此块....或者也许像class="products staff"

这样，我不会有重复的样式（甚至从未来方面，当代码/风格可能会改变很多），并且产品的任何特定样式都可以通过新类来完成（或者通过在样式中使用父类来提供更具体的样式）。

是，product类单词不使多大意义在这里，但即使再次为未来的开发商来说，这仍然意味着您正在使用的样式人员类，没有涉及到逻辑...

但仍是的，如果可能修改标记放宽从product到其他一些字，我会做..但在这种情况下不作为这样一个主要要求...

来源

2012-02-22 17:19:18

为新类型的内容引入个别类名会可能是最多正确 solu灰。但不幸的是，目前的CSS语法并不完美，因此迫使我们在CSS中通过逐一列出完整选择符而过于冗长。

所以在实践中，大多数可维护的解决方案通常是试图为不同的事物找到一个共同的名称样式相同。

来源

2012-02-22 17:23:55

这里基本上有两种思想流派。

1）跟随标记的风格 2）跟风格的标记。

你必须弄清楚你想要做哪一个，并试图坚持一个或另一个。如果你混合太多，那就毫无意义，你就会陷入一片混乱。

在第一个中，您有一个不会更改的设置标记。你找出风格让它看起来像你想要的样子。这是在禅宗禅宗花园的静脉。它要求你的标记是非常有语义的。缺点是你经常会有很多重复的样式，因为使用这种方法时不能总是干净地设计样式。

第二，你创建了很多常见的样式，然后调整你的标记以适应样式。例如，你可能会有一些“float”，“thinBorder”，“bold”类，然后将这些样式应用于标记。这里的缺点是，如果你的风格需要改变，那么你必须改变HTML（或使粗体不是粗体或其他）。积极的一点是你的CSS更加干净和可维护。

它很烂，但你必须做出权衡。

来源

2012-02-22 17:50:38

我绝对是遵循标记的风格的倡导者。在我触摸任何CSS之前，我写了所有的HTML。所以考虑到这一点，我认为我更倾向于复制样式。然而，我全心全意地对那些不愿意使用表象类名的人表示不同意见。有时，元素的呈现是首先给它一个类名的唯一原因。 – 2012-02-23 12:59:23

如何处理需要更改CSS类名称

回答

相关问题