Question

我通读了this（这是来自css-tricks.com的帖子）和this（这是对帖子的评论）。

这就是我的css的样子：

.m0 { margin : 0%;          }   //m0 = Margin 0% <br>
.mla { margin-left  : auto; }   //mla = Margin Left Auto <br>
.mra { margin-right : auto; }   //mra = Margin Right Auto

.w100px { width : 1000px; }   //w1000px = Width 1000px

.h100 { height : 100%; }   //h100 = Height 100%

等。

我只使用我的css类，如下：

<html class="h100">   <!-- Height 100% -->,

<body class="m0 h100">   <!-- Margin 0%, Height 100% -->, 

<div class="mla mra w1000px">   <!-- Margin-Left Auto, Margin-Right Auto, Width 1000px-->

等...

如果我想仅使用正文创建一个红色页面，我的类将如下所示：

CSS

.m0 { margin : 0%; }

.bc08070 { background-color : hsl(0, 80%, 70%); }
//bgi = Background Color (hsl) 0 80% 70%

HTML

<body class="m0 bc08070"> <!-- Margin 0%, Background Color (hsl) 0 80% 70% -->

我按照编写css的顺序编写类名：边距（第一个），宽度（下一个），高度（之后），背景颜色（之后）。

这样我就不会重写任何代码，如果我需要添加一个css属性，我可以添加相应的类，我觉得我有更好的控制方式。

在效率方面，这是css中最好的惯例吗？

如果不是，请深入了解最佳惯例，以便了解我正在使用的惯例，更重要的是，我为什么要使用它。

Answer 1

您的代码打破了HTML和CSS为Web开发世界所做的分离。如果你打算在HTML中嵌入你的样式，你可以使用style="width:1000px"属性而不是class="w100px"来获得完全相同的效果，或者使用{{返回到好的1999年式HTML 3.2。 1}}和<font>标记。我们并没有在21世纪没有理由抛弃那些标签，因为这就是我们现在有单独的 CSS文件的原因。

重点是按语义分配类和ID，描述内容，而不是演示文稿。 HTML应该完全是机器可读的，不需要任何关于渲染媒体的假设，特别是不是“屏幕”。对于盲文阅读器，屏幕阅读器和搜索引擎，您的HTML应该100％清晰明显，不需要 任何单一参考 进行布局。

所以而不是：

<color>

您应该使用：

<div class="w100px m10px">
  My content
</div>

正如您所看到的HTML现在完全没有您希望它的外观，它只包含您正在呈现的内容。然后你用它来设计它：

<article class="main">
  My content
</article>

你绝对应该阅读一些关于the Semantic Web的教程，并忘记你到目前为止学到的几乎所有东西 - 很遗憾地说。

Answer 2

我只使用通用/可重用的类来处理包装器，页面列和输入，按钮，链接等基本内容。

关于命名约定通常更好，以获得更多描述性的类名。我通常使用“页面名称”，假设我正在为注册页.register-save-button做一些事情。所以基本上模式是`。{page} - {what} - {it} - {is}

命名的另一个原因是，如果你想拥有一家公司，一个公司，一个专业人士或一个团队，你的命名惯例并没有让其他开发人员理解。我总是尝试用“团队心态”编写html / css / javascripts /代码。

你的css看起来也不好看似乎没有效果，没有什么可以让任何新的团队成员使用。

如果您不想重复颜色，那么您应该考虑LESS样式。

在CSS中设置样式的最佳方法是什么？

2 个答案: