Question

您好我正在创建一个网站，我对如何编写CSS感到有点困惑.. 我想是否应该使用不同的类来制作相同的风格我应该制作风格特定的类并在每个地方使用它们......让我用一个例子......

假设我想给出一个最小高度，我应该使用它：

.div1,.div2,.div3{min-height:335px;}

并使用这样的HTML：

<div class="div1">afads</div>
<div class="div2">fads</div>
<div class="div3">fads</div>

或者我应该这样做： CSS：

.minheightstyle{min-height:225px;}
.leftitems{float:left;}
.red{background-color:red;}
.blue{background-color:blue;}
.grey{background-color:grey;}

HTML：

<div class="minheightstyle leftitems red">my text in red bg</div>
<div class="minheightstyle leftitems blue">my text in blue bg</div>
<div class="minheightstyle leftitems grey">my text in grey bg</div>

哪种方式是优化方式的最佳方式，我应该使用哪种方式，这有关系。

Answer 1

我不会这样做。我不会做第一个，因为如果元素具有相同的样式，那就是类。

如果您要为每个样式项创建自定义类，那么我不会执行后者，因为这会破坏样式的目的。请考虑以下事项：

<div class="font-size color margin text padding float-left">some div</div>

在上面，仅使用内联CSS就吓人了。要更改上面的外观，您需要更改实际的HTML而不是简单的类。

我宁愿创建一个通用类，例如article使用文章的样式而不是class="font-verdana margin color"等。也许对于颜色你可能有一点，因为你想为三个div使用不同的颜色，但一般来说这三个div应该有相同的类。

Answer 2

从技术上讲，这两个都无关紧要。

然而，我们的目标应该是让您的css清晰，可重复使用且理想情况下最小化，并且您应该定位您的选择器和规则以显示此信息。

某些规则（如背景和颜色）通常仅适用于特定元素。因此，您应该将其应用于要定位的元素的ID：

<div id="header">XXX</div>

#header {
    background-color: red;
    color: #000;
}

请记住：ID应该是唯一的，只适用于页面上的单个元素。当您的目标是定位多个元素时，将使用类。

如果您要将规则应用于许多项目，则需要使用该课程。在很多情况下，应用类似于第二个示例的规则，例如经常应用于大量元素的类clearfix。例如，其他人可能有点不必要。在你的第一个例子中，你最好定位父包装器，然后有这样的规则：

.parent > div {
    min-height:335px;
}

在一天结束时，这通常是个人偏好，但请记住，您的代码应该尽可能整洁。

在编写代码时我始终牢记的一件事是“如果我将其传递给其他开发人员，他们是否能够一目了然地了解发生了什么？”

如果其他开发人员添加或更改您的代码，他们编辑您的CSS比编辑HTML 要容易得多，如果他们使用的话，情况尤其如此CMS或跨不同模板文件传播代码的东西。因此，如果您开始在HTML中添加red和leftitems，则开发人员必须覆盖当前规则，如果他们认为他们不希望特定项目为红色或左对齐，这很快就会变得混乱。

对于阅读此内容的任何高级用户，我建议使用SCSS而不是CSS，因为它可以使上述内容变得更加容易，因为它允许在CSS中嵌套和变量 - http://sass-lang.com/

希望有所帮助!!

Answer 3

我会为他们所代表的内容命名课程，而不是他们的样子。所以课程red是一个坏主意。当你确定所有红色文本实际上都是蓝色时，你最终可能会得到这样的css：

.red {
    color: blue;
}

这没有意义，实际上使造型更加困难。

Answer 4

首先，不要使用建议视觉意图的名称来标记CSS类，例如“minheightstyle”。 CSS背后的部分思想是分离内容和样式，这是一种经过验证的好处，您尝试使用您显示的类名来使其无效。所以，这是你的第一个经验法则 - 如果你想要标记一个元素，你不仅仅为了样式标记它，你可以用它来标记元素与其他元素在内容方面的不同之处。例如，使用您的三个div，如果所有都相同，那么应该可以选择它们作为其父项的子项，例如：

#parent > div {
    min-height: 300px;
}

如果其中一个是选定的菜单项（例如），您可以为其指定“已选择”类并对其进行相应的样式设置：

.selected {
    min-height: 300px; }

一般来说，在设计选择器时尝试推理结构，而不是考虑样式。这可能是您将丢弃的建议，采取更简单的措施，但我向您保证，如果您认真对待今天的网页设计，这是您可以做出的最佳投资。内容和风格的分离是绝对必要的，不仅仅是今天的HTML和CSS，它还与其他领域相关。

第二，你应该记住，你编写的规则是由浏览器盲目地应用的 - 即最终用你的样式表覆盖的元素，每个CSS的规范必须从它的任何地方重新计算它们的样式。。也就是说，如果您（例如）决定使用以下选择器覆盖所有元素的样式：

* { 
    margin: 0; padding: 0; }

..因为你决定厌倦了浏览器在这里和那里应用自己的小边距和填充之间的小不一致，并且你想要对页面上的边距和填充进行钢控制，那么你应该知道浏览器将绑定上面的规则（或者在那里计算样式，或者将其推迟到以后）到你拥有的每个元素。知道了这一点，您应该推断将上述规则应用于某些元素是否更好。相同的推理通常适用于背景图像 - 将背景颜色应用于元素的子项，或者仅仅是元素本身（结果通常在视觉上无法区分）会更好吗？

 <div id="menu">
      <div>Apples</div>
      <div>Oranges</div>
      <div>Bananas</div>
 </div>

 #menu > div {
      background-color: brown;
 }

或

 #menu {
      background-color: brown;
 }

至于你眼前的问题，一个好的经验法则是最小化代码，包括标记和样式。为孩子们删除相同的类名，CSS完全能够在没有类名的情况下选择它们：

<div id="foo">
    <div>my text in red bg</div>
    <div>my text in blue bg</div>
    <div>my text in grey bg</div>
</div>

#foo > div
{
    min-height: 300px;
    float: left;
}

#foo > div:nth-child(1)
{
    color: red;
}

#foo > div:nth-child(2)
{
    color: green;
}

#foo > div:nth-child(3)
{
    color: blue;
}

当然，还有其他方法可以选择上面的内容，但只是尝试应用CSS 真正的工作原理。从细节中抽象是一件好事，但优化需要了解所述细节。在设计标记时尽量不要考虑样式 - 键入它就好像作者（您的）样式将始终被禁用，或者键入标记元素时考虑到内容。然后应用CSS，审查（通常需要“包装”，但这些是Web开发人员的生活），并重复。但是要尽量保持内容和风格分开 - 改变一个应该对另一个产生最小的影响。

Answer 5

.text {in-height:225px; float:left;}
.red{background-color:red;}
.blue{background-color:blue;}
.grey{background-color:grey;}

<div class="text red">my text in red bg</div>
<div class="text blue">my text in blue bg</div>
<div class="text grey">my text in grey bg</div>

Answer 6

如果所有div应该具有相同的css样式，只需使用一个类并将其提供给所有div，否则你必须为每个div使用多个类：

<div class="divv">afads</div>
<div class="divv">fads</div>
<div class="divv">fads</div>r code here

.divv {min-height：335px;}

编写CSS的最佳方法

6 个答案: