Question

我在CSS中创建了许多基本类，比如“圆形”，“隐藏”，“红色”，“浮动”等......我使用它们就好像它们是LEGO片段一样，以获得理想的结果。为什么？因为我的网站是动态呈现的，并且它们可能有多种选择。我不想为每个可能的组合创建一个单独的类，所以我决定创建多个类并为每个div分配五个甚至六个不同的类。另一方面，我听说过DIVITIS问题。我知道我使用的所有div都是必要的。但我的问题是：

这些事情有问题吗？我的意思是，将它渲染在不同的设备上，或渲染时间等......

使用示例：

<div class="block spgreen toprounded">
<div class="boxnm left nmquart blue mkPln btn topLrounded"><h1 class="pdg txtCenter">Inicio</h1></div>
<div class="boxnm left nmquart green mkPln btn active"><h1 class="pdg txtCenter">Navegar</h1></div>
<div class="boxnm left nmquart orange mkPln btn"><h1 class="pdg txtCenter">Aprender</h1></div>
<div class="boxnm left nmquart red mkPln btn topRrounded"><h1 class="pdg txtCenter">Compartir</h1></div>
</div>

编辑：
每个css类的属性不超过5个。

编辑2：
我的设计基于“块”和“盒子”。块自动溢出，并且框总是浮动的。它们可以有4种不同的尺寸（宽度）：25％，50％，75％，100％。然后我创建了一个“魔术特性”列表，如：阴影，圆形等等......为了控制所有的东西，我想问一下，如果谷歌索引我的页面可能是“错误的”，或者用于Android手机来渲染它，或者或者......或者

有些css可能是：

div.block{ /* Block lines (will contain floated boxes) */
 position:relative;
 overflow:auto;
}
div.box{
 position:relative;
 margin:.5%; /* +1% (both-sides) */
}
 div.box.nm{
 margin:0;
}

/* Position */
.center{
 margin:.5% auto !important;
}
.left{
 float:left;
}
.right{
 float:right;
 text-align:right;
}

Answer 1

我个人更喜欢为css类命名，而不是它们的样子，例如：

<div class="menu">...
<label class="caption">...

然后我会创建一个设置为红色的类定义，并将所有类设置为它。

例如.menu，.menu .caption {color：red};

等等。

通过这种方式，您可以定义完全不同的样式，并且css命名保持不变。如果你有一个名为red，rounded等等的课程，你就会被这种造型所困扰，否则这些名字就变得毫无意义了。

当然，这可能不会与你的“动态渲染”联系在一起，但是你没有说明这是什么。

Answer 2

我想，这不是关于Divitis的。 divitis的经典（好的，更多的......）定义是关于使用不需要的包装器。当有人使用太多的通用容器，用类定义它们的语义时，它实际上称为 classitis 。）

但是我想在这里注意另一个问题：通过这个约定，你实际上将CSS作业（样式）转移回HTML。例如，如果您需要更改某个块的颜色，则不要触摸您的CSS文件 - 您自己编辑HTML（将'red'类替换为'orange'类）。至少可以说，我认为这不应该是CSS和HTML之间的合作方式。）

在我们的环境中，我们使用逻辑块，但它们只是它 - 逻辑块。我们并不孤单：如果你仔细研究Twitter Bootstrap框架的惯例，我猜你会看到相同的方法。 HTML中的逻辑块，CSS中的样式 - 当然，还有很少使用的通用块。对我而言，一个有说服力的例子是Bootstrap的图标样式：使用<i>个元素而不是更通用的spans。

DIVITIS并使用多个班级

2 个答案: