什么是最好的方式在CSS样式？ [英] What is the best way to style in css?
问题描述
我阅读了这（这是css-tricks.com的帖子）和此（此为对帖子的评论） ）。
这是我的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> <！ - 边距 - 左边自动，边距 - 右边自动，宽度1000像素 - >
等...
想要仅使用正文创建红色页面，我的类将如下所示：
CSS
.m0 {margin：0％; }
.bc08070 {background-color：hsl（0，80％，70％）; }
// bgi =背景颜色（hsl）0 80％70％
HTML
< body class =m0 bc08070> <！ - 保证金0％，背景颜色（hsl）0 80％70％ - >
我按照我写css的顺序写入类名：Margin（first），Width这种方式我不重写任何代码，如果我需要添加一个css属性我下一个），高度（之后），背景颜色（之后）。
<可以只添加适当的类，我觉得我有更好的控制这种方式。
这是css中效率最好的约定吗？
如果不是，深度的最佳约定，以便我了解我使用什么约定，更重要的是，为什么我使用它。
p>你的代码打破了HTML和CSS为web开发世界所做的分离的整个过程。如果你打算在HTML中嵌入你的样式，你可以使用 style =width：1000px属性，而不是 class =w100px 可以获得完全相同的效果，或者回到使用< font> 和 < color> 标记。在21世纪，我们没有理由地抛弃这些标签，因为这就是为什么我们现在有单独的 CSS文件。
按 语义 分配类和ID，描述内容，而不是演示。 HTML应该是完全机器可读的，没有任何关于渲染媒体的假设，特别是不是屏幕。对于盲文阅读器，屏幕阅读器和搜索引擎，您的HTML应该是100％清晰明了，而不需要 任何单个引用布局。
而不是：
< div class =w100px m10px>
我的内容
< / div>
您应该使用：
< article class =main>
我的内容
< / article>
您可以看到HTML现在完全没有 / em>，它只包含您所呈现的内容 。然后你使用以下样式：
article.main {
width：1000px;
margin：10px;
}
你应该去阅读一些关于语义网，而且几乎忘记了你迄今为止学到的一切 - 对不起，说。
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.
Your code defeats the entire point of what the separation of HTML and CSS has done for the web development world. If you are going to embed your styling in the HTML anyway, you could just use style="width:1000px" attributes instead of class="w100px" for the exact same effect, or go back to good ole 1999-style HTML 3.2 with <font> and <color> tags. We didn't ditch those tags without reason in the 21st century, because that's why we have separate CSS files nowadays.
The whole point is to assign classes and IDs by their semantic meaning, describing the content, not the presentation. The HTML should be completely machine readable, without any assumption about rendering media, specifically not a 'screen'. Your HTML should be 100% clear and obvious to a braille reader, a screen reader, a search engine, without any single reference to layout.
So instead of:
<div class="w100px m10px">
My content
</div>
You should use:
<article class="main">
My content
</article>
As you can see the HTML is now completely devoid of how you want it to look, it just contains the content you're presenting. And then you style it with:
article.main {
width:1000px;
margin:10px;
}
You should definitely go read some tutorials about the Semantic Web though, and forget nearly everything you've learned so far - sorry to say that.
这篇关于什么是最好的方式在CSS样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
