16

我又在小事上浪费时间了。我问自己的问题——现在是你——是：做 CSS 选择器/HTML 标记的“最佳方式”是什么？

我是不惜一切代价避免类，让 HTML 保持纯净和美丽，还是在我想要设置样式的任何地方添加类？

例如，如果我想为我网站的各种表单按钮设置样式，我会去吗？

input[type="submit"] { /* styles */ }

还是我向所有这些添加一个类“表单按钮”并执行

.form-button { /*styles */ }

在这个简单的例子中，人们可能不会想太多，但如果我想用不同的方式为第三个链接设置样式 - 语义，而不是表现 - 列表，我可以做到

.navigation ul:nth-of-type(2) a:nth-of-type(3) { /* styles */ }

而不是只给那个链接一类“不同的链接”并使用

.different-link { /* styles */ }

我知道在 2013 年，所有计算设备和它们运行的​​浏览器都应该足够快，以至于技术上次优的 CSS 选择器不会对最终用户产生任何影响。

所以最后，这似乎真的是一个问题，“我是把 HTML 弄得乱七八糟（用类）还是把 CSS 弄得乱七八糟（用冗长的选择器）？”

对此有何看法？

4

5 回答 5

13

HTML 和 CSS 之间的关注点分离

尽管从 HTML CSS 外部化应该被认为是独立的，但实际上并不是在插入 HTML 元素特定的选择器的情况下。在您的选择器与实际 HTML 元素相关的情况下，它们的层次结构使您的 CSS 与您的 HTML 源紧密绑定。这使您的 CSS 不灵活，并且可能比应有的更大。

因此 CSS 类。每当您使用类时，只要它们定义了足够的属性，这些定义就可以附加到任何 HTML 元素。尽管由于附加属性，您的 HTML 会变得更大，但语义不会改变。

为什么.form-button比input[type=submit]那时更好？

因为您可以将您的容器更改<input type=submit />为<button type=submit>容器，并为 UI 设计师提供更多的设计自由。如果您使用 CSS 类，那么您可能不会对其属性进行太多更改，但如果您使用标签名称，则必须彻底检查您的 CSS 文件并对其进行修改。

另一个例子是其他类型的输入，即取消按钮。如果它在视觉上与提交按钮相同，设计师可能会说提交是主要操作，取消是次要操作，因此它应该仅显示为一个链接。使用类将再次减少维护。

为什么只有类的 CSS 也不是灵丹妙药？

某些元素可能具有其他元素没有的特定 CSS 属性。以（未）有序列表为例。在这种情况下，编写基于标签的选择器来定义适用于特定 HTML 元素的 CSS 样式确实很有意义。但是为了避免选择页面上所有相同类型的元素，建议将 CSS 选择器定义为基于标签和基于类的选择器的组合。这可以说是在这种情况下有意义的CSS 类选择器约束。

建议仅将公共样式属性与基于类的选择器分开，并将特定样式添加到基于标签+类的选择器，约束为（LESS/SCSS 语法）：

/* generic */
.navigation {
    background-color: #999;
    margin: 0;

    .item {
        display: inline-block;
        padding: 10px;
    }
}

/* specific to UL */
ul.navigation {
    list-style: none;
}

这为您提供了最大的自由度并最大限度地提高了可维护性。

结论：基于类的选择器是首选提示：OOCSS

是的。大多数时候。通过这种方式，您将能够编写面向对象的 CSS（关于 SmashingMag 的文章，GitHub 存储库），减少代码重复和异常。它将提高您的 CSS 可维护性。

重要提示：与任何代码一样，您也不应该过度设计您的 CSS。我已经向您展示了如何提供灵活的样式定义，但您不应该总是遵循这些规则。您应该在开始时提供足够的灵活性，并在进行时根据需要进行重构。但大多数时候让自己站在课堂一边。

于 2013-10-12T21:43:10.367 回答
3

我通常会考虑耦合。

如果您只使用标签名称和复杂的选择器进行样式设置，那么您将 CSS 与 HTML 紧密结合。因此，如果您只更改一点点标记，您肯定会最终更改 CSS。对于只有一两个页面的简单站点，这可能没问题。

对于“复杂”的网站，我认为使用类是强制性的。使用类，您可以将 CSS 与 HTML 分离。我的意思是，如果您将类添加到“事物”（然后成为模块）的主要元素，您可以自由更改标记，只要您保留相同的类（显然，如果您更改了很多标记您可能还需要更改很多 CSS。对于更简单的更改，例如将元素包装在 a 中div或将 an 更改h1为 an，h2您无需更改 CSS）。

此外，您的 CSS 变得更易于阅读，因为当您阅读此内容时：

.blog-posts > .blog-post > .blog-post-title

你知道你在谈论博客文章标题的风格，这比

div > div > h1

（或任何其他类似的匿名选择器）。

因此，如果您使用类巧妙地设置样式，您最终会创建模块，这些模块可以具有更简单的选择器，因为您不需要从 HTML 根元素定位元素，而是从模块根元素定位元素：

.blog-post-title {}
.blog-post-subtitle {}
.blog-post-body {}
.blog-post-tags {}

等等。

SMACSS在我看来是组织样式表的好方法，我建议你阅读一下。正如我之前写的，如果你正在开发一个“简单”的网站，你不需要这么大惊小怪。但是对于复杂的网站，拥有可重用的模块是一大优势。

于 2013-10-12T21:52:31.610 回答
2

答：看你想要什么。

解释：

1) 使用此选择器input[type="submit"]，使用此选择器将定位您网站上的所有提交按钮，当您想为按钮分组/概括某些属性时，可以使用此选择器，例如font-family等font-weight...所以使用它是不够的，如果您要定位特定的提交按钮。

2） Using.form-button将针对任何具有 class 的元素.form-button，因此为了使其更具体，您可以使用input[type=submit].form-button它将限制类仅用于提交按钮。此外，每次需要设置按钮样式时都需要声明类。

3）.navigation ul:nth-of-type(2) a:nth-of-type(3)这就是我所说的过度特定的选择器。它只会降低性能。不仅如此，它还会给您带来严重的特异性问题。您需要在无法更改标记的地方使用它。正如您在问题的最后一点中指出的那样，在您计划定位的元素上调用 aclass会容易得多。

结论：

input[type="submit"]- 使用它来分组相似的属性，这些属性将由您网站上的所有提交按钮共享。

.form-button- 使用它来定位您希望拥有独特样式的按钮（除了在声明的属性之外您想要的其他样式input[type=submit]）

.navigation ul:nth-of-type(2) a:nth-of-type(3)- 我看不出有任何使用它的理由，除非你别无选择，只能使用它，因为它无缘无故地过于具体。同样，是否使用它取决于某些情况，所以不能说完全忽略这一点。

.different-link- 当然比使用过度特定的选择器来独特地设置按钮样式更好。

于 2013-10-12T21:09:48.497 回答
2

我对此的简单回答是：如果您通过网站提供相同的布局，您应该通过其标签名而不是类或 id 选择一个元素。

这些问题有点没有意义，因为您自己做出了很多假设并且也在不断地回答它并且这里不允许发表意见，您应该在http://programmers.stackexchange.com上提出问题。你提到

我知道在 2013 年，所有计算设备和它们运行的​​浏览器都应该足够快，以至于技术上次优的 CSS 选择器不会对最终用户产生任何影响。

那么可能是什么问题？

它们之间的唯一区别是它们将使用相同的 tagName 或相同的 class 或 id 对元素进行分组。他们不会做任何其他事情。

现在完全由您来编写代码，因为在许多页面上您可能也想更改按钮的样式。

伪

使用伪类或选择器是一个好主意，仅当您想要设置单个元素的子元素的样式时，因为提交按钮没有子元素，所以该选择器是模糊的。

直接选择元素

input[type="submit"] { /* styles */ }

这种方法是最简单但更好的方法，这样您就可以设置所有输入按钮的样式，而不必担心它们的类和 id。我自己更喜欢它。

使用 ID 或类

.form-button { /*styles */ }

您可能想要使用它，当您设计一个必须更大或更小的按钮时，可以说是为结帐按钮提交。这必须与其他不同。

于 2013-10-12T21:20:40.887 回答
1

这绝对不是一个或另一个。

您使用基于属性的 css 选择器设置提交样式的第一个示例input将引导您在需要非标准或外观不同的按钮的情况下覆盖该声明。因此，在这种情况下，最好使用非常通用的 CSS 声明，然后根据用例使用类为按钮添加不同的风格。

以Bootstrap为例。

我认为依赖 CSS 级联是不容忽视的（实际上它非常有用且功能强大），但根据我的经验，尝试完全消除类是不切实际的目标。

于 2013-10-12T21:09:55.890 回答