Question

我曾经把我称之为'普通类'的东西添加到我的CSS中，例如： -

.text-color{color:#2da8d9;}
.text-white{color:#fff;}
.text-lgrey{color:#919D9D !important;}
.text-dgrey{color:#879798 !important;}
.text-dkgrey{color:#656d6e !important;}
.text-dblue{color:#15355C;}
.text-lblue{color:#1466B1;}
.nopadding{padding: 0 !important; margin: 0 !important;}
.margin0{margin:0px !important;}
.margint5{margin-top:5px !important;}
.margint10{margin-top:10px !important;}
.margint20{margin-top:20px !important;}
.margint30{margin-top:30px !important;}
.margint40{margin-top:40px !important;}
.margint50{margin-top:50px !important;}
.margint60{margin-top:60px !important;}
.margint70{margin-top:70px !important;}
.margint80{margin-top:80px !important;}
.margint90{margin-top:90px !important;}
.margint100{margin-top:100px !important;}
.margint120{margin-top:120px !important;}
.marginb10{margin-bottom:10px !important;}
.marginb20{margin-bottom:20px !important;}
.marginb30{margin-bottom:30px !important;} 
.marginb40{margin-bottom:40px !important;}
.marginb60{margin-bottom:60px !important;}
.marginb80{margin-bottom:80px !important;}
.marginb90{margin-bottom:90px !important;}
.marginb100{margin-bottom:100px !important;}
.marginb120{margin-bottom:120px !important;}
.pleftnone{padding-left:0 !important;}
.padrl20{padding:0 20px;}
.padrl50{padding:0 50px;}
.marginl20{margin-left:20px;}
.padt20{padding-top:20px;}
.padt40{padding-top:40px;}
.padt80{padding-top:80px;}
.padt60{padding-top:60px;}
.padb30{padding-bottom:30px;}
.padb40{padding-bottom:40px;}
.padb60{padding-bottom:60px;}
.padb80{padding-bottom:80px;}
.padb100{padding-bottom:100px;}
.pad5{padding:5px;}
.pad10{padding:10px;}
.pad20{padding:20px;}
.pad30{padding:30px;}
.text-center{text-align:center}
.text-right{text-align:right}
.text-left{text-align:left}
.relative-position{position:relative !important}

然后在我需要使用它们时添加这些类，直到有人告诉我这样做是非常糟糕的做法？

我发现当在子元素等上使用绝对定位时，我已经在很多元素上添加了position: relative;，对我来说，添加一个类似乎很容易，而不是每次都在CSS中添加它。我可以理解它增加了HTML的大小，因为你添加更多的类，但它更少的CSS，因为你没有为每个类添加相同的样式？

只是想要对最佳做法做一些澄清，如果不是讨论这个问题，请提前道歉。

Answer 1

坏。想象一下类text-white margint5 marginb10 padrl20 padb40 text-center relative-position的元素。它很丑。如果您需要保证金32px怎么办？你会添加新的类margint32吗？你会为所有的CSS属性添加类吗？ border-radius，font-size，font-weight等。

了解 BEM 。

Answer 2

如果网站在响应式网页设计中具有移动友好性，那么使用普通课程并不好。示例：假设您在移动设备上使用margin10类，您希望将该值更改为20，如果您在mediaqueries中编写相同内容，则会更改具有类margin10的所有元素的边距，这可能会导致很多问题。

CSS - '常见类'不良做法与否？

2 个答案: