Fatal编程技术网
  • css/
  • 用css设计样式的最佳方式是什么？

用css设计样式的最佳方式是什么？

css

用css设计样式的最佳方式是什么？,css,conventions,Css,Conventions,我通读了（这是一篇来自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 .w10

我通读了（这是一篇来自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%
HTML

<body class="m0 bc08070"> <!-- Margin 0%, Background Color (hsl) 0 80% 70% -->
我按照写css的顺序写类名：边距（第一）、宽度（下一个）、高度（之后）、背景色（之后）

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

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

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

您的代码彻底颠覆了HTML和CSS分离对web开发世界的影响。如果您打算在HTML中嵌入样式，您可以使用
style=“width:1000px”
属性而不是
class=“w100px”
来获得完全相同的效果，或者使用带有
和
标记的好的ole 1999样式HTML 3.2。在21世纪，我们没有无缘无故地抛弃这些标签，因为这就是为什么我们现在有独立的CSS文件

整个要点是根据类和ID的语义来分配它们，描述内容，而不是表示。HTML应该是完全机器可读的，没有任何关于呈现媒体的假设，特别是不是“屏幕”。您的HTML对于盲文阅读器、屏幕阅读器和搜索引擎来说应该是100%清晰和明显的，而不需要对布局进行任何引用

因此，不是：

<div class="w100px m10px">
  My content
</div>
不过，你肯定应该去阅读一些教程，并且忘记迄今为止所学的一切——很抱歉这么说。

你的代码完全颠覆了HTML和CSS分离对web开发世界所起的作用。如果您打算在HTML中嵌入样式，您可以使用
style=“width:1000px”
属性而不是
class=“w100px”
来获得完全相同的效果，或者使用带有
和
标记的好的ole 1999样式HTML 3.2。在21世纪，我们没有无缘无故地抛弃这些标签，因为这就是为什么我们现在有独立的CSS文件

整个要点是根据类和ID的语义来分配它们，描述内容，而不是表示。HTML应该是完全机器可读的，没有任何关于呈现媒体的假设，特别是不是“屏幕”。您的HTML对于盲文阅读器、屏幕阅读器和搜索引擎来说应该是100%清晰和明显的，而不需要对布局进行任何引用

因此，不是：

<div class="w100px m10px">
  My content
</div>
不过，你绝对应该去阅读一些教程，并且忘记迄今为止所学的一切——很抱歉这么说。

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

关于命名约定通常最好使用更具描述性的类名。我通常使用“页面名称”，比如说我正在为注册页面
。注册保存按钮
。所以基本上模式是`.{page}-{what}-{it}-{is}

命名的另一个问题是，如果你想拥有一家运营商并为一家公司工作，作为一名专业人员或团队成员，那么你的命名约定对于其他开发人员来说是无法理解的。我总是试图用“团队思维状态”来编写html/css/javascripts/代码

你的css看起来也不好，看起来也不有效，它不允许任何新的团队成员使用


如果你不想在颜色和其他方面重复你自己，你应该研究一下样式。
我只对包装、页面列和输入、按钮、链接等基本内容使用通用/可重用类

关于命名约定通常最好使用更具描述性的类名。我通常使用“页面名称”，比如说我正在为注册页面
。注册保存按钮
。所以基本上模式是`.{page}-{what}-{it}-{is}

命名的另一个问题是，如果你想拥有一家运营商并为一家公司工作，作为一名专业人员或团队成员，那么你的命名约定对于其他开发人员来说是无法理解的。我总是试图用“团队思维状态”来编写html/css/javascripts/代码

你的css看起来也不好，看起来也不有效，它不允许任何新的团队成员使用


如果你不想在颜色和其他方面重复你自己，你应该研究一下样式。
这可能是我见过的最糟糕的CSS。你严格地将意义和表达结合在一起，这是不应该的。这就是CSS分离的意义所在。如果要更改其中一个属性，该怎么办？是的，您需要编辑HTML、类名和属性本身。
margin:0%
通常被认为是不好的做法-数字0没有任何维度，因此将
%
、
px
或
em
添加到其中并没有任何区别。因此，它通常写为
margin:0
@Prinzhorn我见过一些网站宣传“完全无表布局”，而不是包含
。这是可比的；）@Prinzhorn，你认为我的css是最糟糕的，因为如果我想更改其中一个属性，我必须通过我的html重命名该属性？我可以用一个RegExp实现这一点，什么是含义和表示？@Oscar表示和含义之间的区别是名为
header
和
bigFontAndBlueBackground
的类之间的区别。一个描述它是什么，另一个描述它应该是什么样子。您应该根据元素的含义构造CSS。这并不总是可能的，但很有可能

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



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



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