gpt4 book ai didi

css - 在 css 中设置样式的最佳方式是什么?

转载 作者:太空宇宙 更新时间:2023-11-03 21:52:01 27 4
gpt4 key购买 nike

我通读了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 的顺序写类名:Margin(第一个),Width(第二个),Height(最后一个),Background Color(最后一个)。

这样我不需要重写任何代码,如果我需要添加一个 css 属性,我可以只添加适当的类,我觉得我可以更好地控制这种方式。

就效率而言,这是 css 中最好的约定吗?

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

最佳答案

您的代码完全颠覆了 HTML 和 CSS 的分离为 Web 开发世界所做的一切。如果你打算在 HTML 中嵌入你的样式,你可以使用 style="width:1000px"属性而不是 class="w100px"为获得完全相同的效果,或使用 <font> 返回到 ole 1999 风格的 HTML 3.2|和 <color>标签。在 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;
}

你绝对应该去阅读一些关于 the Semantic Web 的教程尽管如此,并且几乎忘记了您到目前为止所学的一切 - 很抱歉这么说。

关于css - 在 css 中设置样式的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16776258/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com