0

I read through this (this is a post from css-tricks.com), and this (this one is a comment to a post).

This is how my css looks:

.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%

etc..

I use my css only with classes, like this: 

<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-->

etc...

If I want to create a red page using only the body my classes would look like this:

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% -->

I write the class names in the order I wrote the css in: Margin (first), Width (next), Height (after that), Background Color (after that).

This way I don't rewrite any code and if I need to add a css attribute I can just add the appropriate class, I feel I have much better control this way.

Is this the best convention in css in terms of efficiency?

If it's not, please go into great depth on the best convention so that I understand what convention I'm using, and more importantly, why I'm using it.

4

2 回答 2

4

您的代码完全违背了 HTML 和 CSS 的分离为 Web 开发世界所做的一切。如果您无论如何都要在 HTML 中嵌入您的样式，您可以只使用style="width:1000px"属性而不是class="w100px"完全相同的效果，或者返回到带有<font>和<color>标签的良好 ole 1999 风格的 HTML 3.2。在 21 世纪，我们并没有无缘无故地抛弃这些标签，因为这就是我们现在拥有单独的CSS 文件的原因。

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

所以而不是：

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

你应该使用：

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

如您所见，HTML 现在完全没有您想要的外观，它只包含您正在呈现的内容。然后您使用以下样式对其进行样式设置：

article.main {
  width:1000px;
  margin:10px;
}

不过，您绝对应该去阅读一些有关语义网的教程，并且忘记您迄今为止所学的几乎所有内容——很抱歉这么说。

于 2013-05-27T15:46:09.857 回答
0

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

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

命名的问题还在于，如果您想拥有一个运营商并为公司工作，作为专业人士或团队工作，那么您的命名约定不会让其他开发人员理解。我总是尝试以“团队精神状态”编写 html/css/javascripts/code。

您的 css 看起来也不太好，似乎也没有效果，它不允许任何新的团队成员使用。

如果你不想在颜色上重复自己，你应该看看LESS造型。

于 2013-05-27T15:59:41.033 回答