7

嗨,我正在创建一个网站,我对如何编写 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>

哪种方式是优化方式的最佳方式,我应该使用哪种方式,这很重要。

4

6 回答 6

7

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

我不会做后者,因为如果您要为每个样式项创建自定义类,那将违背样式的目的。考虑以下:

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

在上面,它与仅使用内联 CSS 差不多。要更改上面的外观,您需要更改实际的 HTML 而不是简单的类。

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

于 2013-06-13T08:47:05.053 回答
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 中添加redleftitems那么如果开发人员决定不希望特定项目为红色或左对齐,则他们将不得不覆盖当前规则,这很快就会变得混乱。

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

希望有帮助!!

于 2013-06-13T08:51:30.947 回答
2

我会根据它们所代表的内容命名类,而不是它们的外观。所以上课red是个坏主意。当您决定所有红色文本实际上应该是蓝色时,您最终可能会得到这样的 css:

.red {
    color: blue;
}

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

于 2013-06-13T08:52:36.873 回答
1

首先,不要使用暗示视觉意图的名称来标记您的 CSS 类,例如“minheightstyle”。CSS 背后的部分想法是分离内容和样式,这是一个经过验证的好处,您可以尝试使用您显示的类名来使其无效。所以,这是你的第一条经验法则——如果你想标记一个元素,你不要仅仅为了样式而标记它,你标记它是从元素与其他元素在其内容方面的不同之处获取线索。例如,对于您的三个divs,如果都相似,那么应该可以选择它们作为其父级的子级,例如:

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

如果其中一个是选定的菜单项(例如),您可以给它“selected”类并相应地设置它的样式:

.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 开发人员的生活就是这样),然后重复。但是尽量保持内容和风格分开——改变一个应该对另一个影响最小。

于 2013-06-13T09:42:21.520 回答
0
.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>
于 2013-06-13T08:45:30.110 回答
0

如果所有 div 都应该具有相同的 css 样式,则只需使用一个类并将其提供给所有 div 如果不是,则必须为每个 div 使用多个类:

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

.divv{最小高度:335px;}

于 2013-06-13T08:52:52.537 回答