Question

我想知道CSS，堆叠许多不同的广义类是否是一个好习惯，而不是为每种情况构建新类来实现同样的结果。

例如，使用详细的类，这就是我通常编写CSS的方式：

HTML

<div class="profile-page">
<div class="profile-page-left">
    <img src="" class="profile-picture"/>
    <p class="about-me-section">Who Cares</p>
</div>
<div class="profile-page-right">
   <p class="name"><span class="fname">John</span> Thomas</p>
   <p class="title">Boss</p>
</div>
</div>

CSS

.profile-page{
   margin-left:auto;
   margin-right:auto;
   width:800px;
}

.profile-page-left{
   float:left;
   width:50%;
}

.profile-page-right{
   float:right;
   width:50%;
}

/* etc */

现在，广义类的结果相同：

HTML

<div class="center width-800">
<div class="float-left width-Half">
    <img src="" class="width-400 height-400 border-width-3 border-color-blue"/>
    <p class="width-800 color-gray">Who Cares</p>
</div>
<div class="float-right width-Half">
   <p class="width-800 color-gray opacity-80perc"><span class="color-red hover-opacity-100perc">John</span> Thomas</p>
   <p class="color-gray">Boss</p>
</div>
</div>

CSS

/* Positioning */

.float-left{
   float:left
}

.center{
   margin-left:auto;
   margin-right:auto;
}

/* Size */

.width-800{
   width:800;
}

.half{
    width:50%;
}


/* etc */

我的问题：

广义类是否是CSS中普遍接受的方法？这可以成为一个大型项目的有效方式吗？

广义类方法提供了可读性和（从长远来看）减少了项目所需的类数，但却牺牲了HTML的可读性。

也许还有一些我没想过的其他优点/缺点。

Answer 1

不，广义类不是一个如此膨胀的想法。

类名通常应该描述标记的意图，而不是应用的确切样式。如果你使用通用类，那么将CSS放在每个元素的内联样式中几乎是一样的。样式表将成为从类名到相应样式的转换，并且所有布局都在HTML中，而不是在应该的样式表中。

堆叠泛化类而不是构建特定类是一个很好的CSS实践吗？

1 个答案: