使用元素 ID/类名称而不是其他 CSS 选择器

发布于 2024-12-05 07:52:42 字数 400 浏览 0 评论 0原文

我应该在多大程度上尝试使用其他 CSS 选择器而不是元素 ID/类名称,反之亦然。

例如: body > header nav ul+ul { ... } 当我可以做 #socialnav { ... } 来实现同样的事情时。

HTML 代码示例(显然代码中其他地方有带有子导航的标头):

<header>
    <nav>
        <ul>...</ul>
        <ul....</ul>
    </nav>
</header>

对此有何共识?我的意思是,我发现使用 CSS 选择器可以做到这一点,但是有缺点吗?

To what extend should I be attempting to use other CSS selectors instead of element IDs/class names or vice versa.

For instance: body > header nav ul+ul { ... } when I could just do #socialnav { ... } to achieve the same thing.

Example HTML code being (obviously there are headers with child navs elsewhere in the code):

<header>
    <nav>
        <ul>...</ul>
        <ul....</ul>
    </nav>
</header>

What is the consensus on this? I mean, I find it manageable doing it using CSS selectors, but is there a disadvantage?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

时光磨忆 2024-12-12 07:52:43

您的首要指导原则应该是保持标记语义。上面的标记就是一个很好的例子 - 您以语义上有意义的方式使用 headernavul 标记。

您的第二个指导原则应该是保持关注点分离(例如,内容和演示)。如果在标记中添加类名或 id 在语义上对您没有任何帮助,并且您能够制作没有它们的 CSS 选择器,那么您应该避免向标记添加额外的噪音。

然而,有时类名和 id 非常有用(不仅在 CSS 中,而且在 JavaScript 中),因此它们占有一席之地。如果不需要它们,请不要使用它们,因为它们会给您的标记添加不必要的混乱。

Your first guiding principal should be to keep the markup semantic. Your markup above is a great example of this - you're using header, nav, and ul tags in semantically meaningful ways.

Your second guiding principal should be to maintain separation of concerns (e.g., content and presentation). If adding a class names or id's to your markup does nothing for you semantically and you're able to craft CSS selectors w/out them, then you should avoid adding extra noise to the markup.

Sometimes, however, class names and id's are very useful (not just in CSS but also in JavaScript), so they have their place. Just don't resort to them if they're unneeded and are therefore adding unnecessary clutter to your markup.

如若梦似彩虹 2024-12-12 07:52:43

这取决于您的喜好。

我发现使用 body > 并不明智。 header nav ul+ul,因为你的文档结构发生了一个小变化,你必须重写CSS选择器。

对于主文档中不是非常重要的部分的元素使用 .classselectors#id-selectors ,并使用 #one-special-item > 。 ul>力> a:hover span 选择更具体的元素。

It's up to your preferences.

I find it not wise to use body > header nav ul+ul, because a small change in your document structure, and you have to rewrite the CSS selector.

Use .classselectors and #id-selectors for elements which aren't an incredible important part of the main document, and use #one-special-item > ul > li > a:hover span to select the more specific elements.

哽咽笑 2024-12-12 07:52:43

一般来说,我会尝试避免在 CSS 中使用 ID 选择器。

我发现处理类比使用 ID 容易得多。

如果在服务器端应用程序(例如 ASP.NET)中使用标记,ID 可能会在以后引起问题,其中 ID 的呈现方式与标记中的显示方式不同。

但是,ID 选择器确实优先于类选择器:

http://jsfiddle.net/wcLrF/

Generally I try and avoid ID selectors in CSS.

I find it a lot easier to deal with classes than using IDs.

IDs can cause issues later on down the line if the markup is used in a Server-Side application, such as ASP.NET, where the IDs are rendered as something different to how they display in the markup.

However, ID selectors do take priority over class selectors:

http://jsfiddle.net/wcLrF/

递刀给你 2024-12-12 07:52:43

您应该将样式表编写为站点的规则集。

  • 如果您正在编写想要处理单个特定内容的样式,那么引用该元素的 ID 是一个很好的做法。

  • 如果您正在编写的样式是您的一般网站外观和感觉的一部分,那么应该尽可能多地引用标记名和/或类。

有时,实际的 html 代码很难遵守这些规则,但如果您尝试总体上遵守这些规则,那么您就会没事。如果您需要支持不支持您通常想要使用的所有 CSS 功能的旧版浏览器(咳,IE,咳),您可能还需要改变您的规则。

所以是的,我想说你在问题中所做的方式是推荐的方法。

You should write your stylesheets as rule sets for your site.

  • If you are writing a style which is you want to to work with a single specific piece of content, then it is good practice to reference that element's ID.

  • If you are writing a style which is part of your general site look and feel, then it should be written to reference tagnames and/or classes as much as possible.

There will be times when the actual html code is such that it becomes hard to follow those rules, but if you try to stick to that in general then you'll be okay. You may also need to bend your rules if you need to support older browsers (cough, IE, cough) that don't support all the CSS features that you'd normally want to use.

So yes, I would say that the way you've done it in the question is the recommended approach.

天暗了我发光 2024-12-12 07:52:43

使用 ID 和类作为选择器比使用普通 css 选择器要快得多。有些人还认为您应该只使用类,因为它们鼓励样式表中的可重用性。

这是一篇关于面向对象 CSS 的非常好的文章: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-orient-css-oocss/

Using IDs and Classes as selectors is much faster than using normal css selectors. Some also argue that you should ONLY use classes because they encourage reusability in your stylesheets.

Here's a really good article about Object Oriented CSS: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文