Question

我有很多块具有不同的大小，填充和边距值。所以我想创建支持CSS类并组合如下;

CSS

.m-t-5 { margin-top: 5px; }
.m-t-10 { margin-top: 10px; }
.m-t-15 { margin-top: 15px; }

p-10 { padding: 10px; }
p-15 { padding: 15px; }

.f-left { float: left; }
.f-right { float: left; }

HTML

<div class="m-t-5 p-20 f-left lined"></div>
<div class="p-10 m-0 f-right"></div>

通过使用这个，我的所有类名都变得很大（我的意思是长度）。这是一个好习惯吗？请建议我继续这种方式或创建具有自己属性的多个CSS类。

问候。

Answer 1

有一些方法可以在这里提出建议：

还有Google自己的开发人员所遵守的HTML/CSS style guide。

Answer 2

现在习惯了这种方式

就像这样

.marginT10{margin-top:10px;}
.marginT20{margin-top:20px;}
.marginT30{margin-top:30px;}
.marginT40{margin-top:40px;}
.pull-left{float:left;}
.pull-right{float:right;}

Answer 3

两件事：

这非常好，很常见。实际上有助于保持DRY原则。

第二：编码css的唯一“最佳实践”是避免内联css，但即便如此也有例外。所以，如果它适合你，那么继续使用它。（但是你的行为再次被认为是可行的。）

Answer 4

我同意@ryan，但您也需要根据您的布局进行操作，以便尽可能地减少代码。并且还避免使用（ - ）＆amp;（_）等...并且使得非常简单＆amp;干净的命名约定。请参阅以下示例：

CSS

.mt5 {margin-top: 5px;}
.pd5 {padding: 5px;}
/* Margin Top 5 and Padding 5 */
.mt5pd5 {margin-top: 5px; padding: 5px;}

.fl {float: left;}
.fr {float: right;}

HTML标记

<div class="fl mt5 pd5">Welcome</div>
<div class="fl mt5pd5">Hello</div>

这是编写CSS代码的最佳方法

4 个答案: