您是否为css设置过多次使用它的类？_Css

您是否为css设置过多次使用它的类？

css

您是否为css设置过多次使用它的类？,css,Css,我总是被告知在css中取出多个属性，然后在一个规则中添加它们。如下图所示。（请原谅这个糟糕的例子）我经常看到这样的情况： .button, .list, .items { color: #444; } .someColor { color: #444; } 有了多条规则，就不能留下很多混乱吗只有在css教程和示例中，我才看到这一点： .button, .list, .items { color: #444; } .someColor { color: #444; } 在css中，只需

我总是被告知在css中取出多个属性，然后在一个规则中添加它们。如下图所示。（请原谅这个糟糕的例子）

我经常看到这样的情况：

.button, .list, .items { color: #444; }

.someColor { color: #444; }

有了多条规则，就不能留下很多混乱吗

只有在css教程和示例中，我才看到这一点：

.button, .list, .items { color: #444; }

.someColor { color: #444; }

在css中，只需添加另一类“.sameColor”。（div class=“button someColor”）

我从未见过这个，感觉它会在CSS中留下更少的混乱。这样行吗？或者你认为它会让你的HTML更加混乱吗？

这都是基于个人喜好。我已经尝试了这两种方法，并且更喜欢您列出的第二种方法，除了更通用的类名，例如middle段落或headerGraphic，因此它适用于某个区域而不是特定的颜色，因为颜色可以更改。

这都是基于个人偏好。我已经尝试了这两种方法，并且更喜欢您列出的第二种方法，除了使用更通用的类名，例如middle段落或headerGraphic，因此它适用于某个区域而不是特定的颜色，因为颜色可以更改。

尝试独立于其视觉效果来命名您的类。CSS的本质是在不改变HTML的情况下处理设计和布局。诸如.someColor或.left边栏之类的类名是一种不好的做法。颜色和位置可以改变。并将规则应用于语义HTML元素，而不是在所有不同的div和span上添加类。这应该是显而易见的，尽管很多人都错了

CSS是一组有限的规则，这使它成为一个完美的创造力刺激器。

尝试独立于类的视觉效果来命名类。CSS的本质是在不改变HTML的情况下处理设计和布局。诸如.someColor或.left边栏之类的类名是一种不好的做法。颜色和位置可以改变。并将规则应用于语义HTML元素，而不是在所有不同的div和span上添加类。这应该是显而易见的，尽管很多人都错了

CSS是一组有限的规则，这使它成为一个完美的创造力刺激器。

您的建议有点像一种串联样式，例如style=“color:#444”。因此，如果您想更改元素的颜色，您必须更改html，这意味着您已经将样式定义为内容的一部分。这正是css应该避免的

想象一下，如果您在多个html文件中多次包含“someColor”，并且您决定其中一些元素不应该包含“someColor”，毕竟，您有很多文件要处理

我可能也会避免使用列表选项，如果我正在制作一个组件，比如一个按钮，我希望在css文件中找到.mybutton类，并查看该组件的所有规则，而不必遍历各种无用的全局类。此外，如果有人在我们的全局类中出现并更改了颜色，他可能会打断我的按钮，而该按钮似乎控制了它自己的样式，因此不能以这种方式打断它。

想象一下，如果您在多个html文件中多次包含“someColor”，并且您决定其中一些元素不应该包含“someColor”，毕竟，您有很多文件要处理

我可能也会避免使用列表选项，如果我正在制作一个组件，比如一个按钮，我希望在css文件中找到.mybutton类，并查看该组件的所有规则，而不必遍历各种无用的全局类。此外，如果有人出现并在我们的全局类中更改了颜色，他可能会打断我的按钮，因为如果按钮控制了它自己的样式，则不能以这种方式打断它。

好的类名和ID是您应该优化的第一个位置。然后转到多个类名

但是，多个类名可能会有很大帮助，请考虑：

<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
    <div class="rightColumn">Right</div>
    <div class="middleColumn hasRignt">I have padding right of 210px</div>
       <!-- or -->
    <div class="leftColumn">Left</div>
    <div class="middleColumn hasLeft">I have padding left of 210px</div>
       <!-- or -->
    <div class="middleColumn">I have no padding</div>

结果是浮动的右/左列，中心区域用填充来补偿它们。这意味着您可以按照自己的意愿设置middleColumn的样式（例如，middleColumn.otherCoolSelector）

好的类名和ID是您应该首先优化的地方。然后转到多个类名

但是，多个类名可能会有很大帮助，请考虑：

<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
    <div class="rightColumn">Right</div>
    <div class="middleColumn hasRignt">I have padding right of 210px</div>
       <!-- or -->
    <div class="leftColumn">Left</div>
    <div class="middleColumn hasLeft">I have padding left of 210px</div>
       <!-- or -->
    <div class="middleColumn">I have no padding</div>

结果是浮动的右/左列，中心区域用填充来补偿它们。这意味着您可以按照自己的意愿设置middleColumn的样式（例如，middleColumn.otherCoolSelector）

对HTML元素应用多个类是完全可以接受的。诀窍是要明智；我通常会发现，当我这样做时，附加的类是对所应用的基本样式的添加或例外。例如，以下是我偶尔添加到已经有类的元素中的一些类：

```
错误
```
——如果用户输入无效数据，则设置当前元素的样式
```
first
```
——设置列表或表格行中第一个元素的样式，例如，禁止向左填充
```
last
```
——设置列表或表格行中最后一个元素的样式，例如，抑制右边距
```
偶数
```
——将斑马条纹应用于替换元素
```
hidden
```
——隐藏当前不相关的元素

这些额外的类通常使用服务器端语言（如ASP.NET或PHP）动态生成。还可以使用JavaScript在客户端添加或删除它们，特别是使用jQuery之类的库。这对于显示或隐藏响应事件的元素特别有用。

对HTML元素应用多个类是完全可以接受的。诀窍