CSS与DRY

时间:2009-05-02 01:04:08

标签: html css dry

您正在创建HTML布局。让我们假设您不需要多个样式表的好处,HTML大小的小幅增加不是一个问题,并且您有一个只使用一次的样式。我经常赞成在这里使用内联样式,因为我将CSS类名或ID的重复视为您当前不需要的抽象成本,并且可能永远不会使用。

标准学说这些天总是使用语义标记和CSS样式创建HTML布局,所以我在这里遗漏了一些东西吗?请让我知道你的想法。

6 个答案:

答案 0 :(得分:10)

即使您只使用特定样式,仍然可以将其与其他样式保持一致,而不是将其内联。首先,关注点的分离导致可维护性的提高。如果您知道自己只是进行了样式更改,那么只需一个地方即可查找任何更改。另一个好处是必须输入类名的自我文档。通过赋予该样式一个名称,即使它被使用一次,它使下面的语义代码更具说明性 - 您可以读到这不仅是这个随机p一个段落,它也是,例如{{ 1}}段。

当然,这是假设您永远不会再次使用该特定样式。如果您可能,那么甚至有更多理由将其分解为命名样式。内联样式并不邪恶,但它们有点像门户药物。

答案 1 :(得分:5)

理想情况下,您的CSS应该是“面向对象”(至少,像CSS那样可以是OO)。您应该从设置公共属性的类中“继承”,并在定义可在其他地方使用的属性时创建新类。

看一下试图支持这些原则的OOCSS project(或者重新介绍它们)。

quote Welbog

  

......在我看来,“OOCSS”只是一种不随便写的CSS。与在OO语言中编写非面向对象设计的方式大致相同,您可以轻松搞乱创建CSS的基本理念。 OOCSS似乎在说,“让我们不要再搞砸了,伙计们。”

答案 2 :(得分:3)

保持HTML和CSS分离的一个优点是,您可以在不更改任何HTML的情况下重新设置网页外观。

史蒂夫

答案 3 :(得分:1)

在某些情况下,我通常会忽略为单个元素上的简单样式更改创建新类。通常很清楚,当你这样做的时候,你需要将这种特定的风格应用到其他东西的可能性很小到零。对我来说最常见的情况是当我需要某些特定的填充/边距位于正确的位置时,但它不是一个足够重要的元素来拥有自己的ID。

这可能不是一个流行的观点,但在这些情况下我不认为内联风格是邪恶的。

答案 4 :(得分:0)

就我个人而言,我发现我有一两个元素,我会在其中添加一个内联样式,回过头来看看我需要的不仅仅是那个元素,所以我会把它改成一个类或忘掉它并且无法改变它。

您还可以尝试放置某个div / page类,并在样式表中编写后代样式而不是内联元素。

此外,如果你决定添加javascript,那么你将不会在那里有一个标记良好的课程,你需要更改它。

通常这对于动态生成的网站来说并不是什么问题,但是当你过度使用大量的内联标签时,它可能会成为一个大问题。如果他们希望禁用可访问性等样式,它也会使人们更难 - 你通常可以通过使用类来克服这个问题。

说,使用<b style="color:red">bold</b>代替body.products div b {color:red}。

我个人是选择者的粉丝,没有使用过多的课程。它们更具可重用性,您可以使用样式表在一个位置编辑整个站点。

但这有点过分<p style="font-weight:bold;font-size:1.2em; text-index:20px;">Indented Bold Paragraph</p>因此<p class="indent bold larger">text</p> instead you can do

or ``<p><b></b></p>

答案 5 :(得分:0)

“愚蠢的一致性是小脑袋的大人物”

那么,在这种情况下,哪个是愚蠢的一致性? :)为什么DRY优先于标记和样式的分离?

您能确定您的CSS规则只会使用一次吗?更重要的是,你怎么能确定它将来不需要改变,你怎么能确定你是需要做出改变的人?你确定你甚至需要添加一个类或id来定位这个独特的元素吗?

我想我无法看到如何添加

<input type="submit" style="border: 1px solid red;"/>

是一些如何“优越”到12个左右的更多字符

<input type="submit" class="b-red">

.b-red {border: 1px solid red;}

或可能等效的字符数

input {border:1px solid red;}

当然,在某些情况下,每个经验法则都可以而且应该被违反。问题是,你从DRY中获得了什么,超过了跟随标记/风格二分法的重要性?