有谁知道一个很好的资源来解释 HTML ID 和类的良好命名约定，以及是否以元素类型（即 btn 或按钮或类似的）为 ID 加前缀？类应该是复数还是单数？我知道 ID 应该是单数的，因为它们是唯一的，但是类呢？ ID 和类应该使用名词，对吗？我正在使用在现有页面中注入其他页面的页面，有点像部分页面……因此……我想知道是否有人在 ID 和/或类前面加上前缀……有点像命名空间或相似的？任何意见或见解真的很感激。原文由 mark smith 发布，翻译遵循 CC BY-SA 4.0 许可协议

我不会以类型作为前缀，因为如果必须的话，您可以在选择器中推断出这一点 form#contact { property: value; } 您描述的方法称为匈牙利表示法，不是很流行。对于您提到的内容，您可以将注入的 HTML 放在一个具有唯一类/id 的 div 中，它具有一种本地化重置。查看 CSS 选择器特异性以确保您的规则将生效，而不是主机页面 CSS 中的其他规则。请参阅有关在父页面中设置元素样式的类似问题的答案。原文由 alex 发布，翻译遵循 CC BY-SA 3.0 许可协议

ID、类和包含元素类型前缀的 HTML 命名约定？

2015：关注现有 CSS 和 HTML 命名系统的全新答案

对于您选择的任何约定，我建议您选择针对项目需要的要求。

即：你的项目是小的还是大的？您的项目是要重复使用还是需要处理某种主题？从事 CSS/HTML 工作的开发人员是否热衷于或有足够的经验来坚持惯例？＆很快..

首先，如果您不知道这种常见的（好的？）做法： 避免将 ID 作为样式钩子，尽量只使用类

因为：

只有极少数块（即页眉、页脚）可以 100% 保证它们不会在其他地方重复使用
你想保持低特异性，总会有一些时候你需要覆盖它（不使用额外的 ID 选择器或！重要）

共同要求/约定：

名称应该直观/有意义
不要缩写名称，除非它是一个非常知名的缩写（即 msg 表示消息，accnt 表示帐户）
使用已知/常用名称：.site-nav、.aside-nav、.global-head、.btn-primary、.btn-secondary
允许结构层次结构（即 BEM 约定）
在命名中使用 - 或 _ ：可能是主观的（开发者的意见）并且取决于所使用的键盘语言。请注意，驼峰命名法已被搁置一旁，因为我认为是浏览器兼容性问题，尽管我从未找到这方面的证据。
除非特殊情况，否则切勿在选择器中使用元素：这允许更大的灵活性，即。你有使用 <input type="button"></input> 创建的按钮，你想切换到使用 <button></button> ，如果你在某些选择器中使用了元素类型，那么你可以计划一些烦人/耗时的重构/测试/ prod-bug-fixing，而如果您使用无元素选择器，那么切换将变得非常容易。 SMACCS 在其公约中也有它
对于状态，尝试匹配来自其他语言（php、java、c#）的已知约定：即，使用“is-active”、“is-badass”等
从左到右的名称：从最通用到最精确，即。 btn-bluetheme-create-accnt 或 accordion-modrnlook-userlist
类或 ID 名称应始终足够具体，以便在整个项目中进行搜索并仅返回相关结果
如果您使用后代选择器，则更喜欢直接后代 - 使用 .module-name > .sub-module-name vs .module-name .sub-module-name - 你将来会省去一些麻烦（更简单的 CSS 但也更高效，尽管术语“CSS 性能”可能会很可笑”）

已知约定：

结构命名约定： 通过描述它是什么来命名元素的类，而不是描述它的位置或外观。请参阅下面的示例。

 .page-container
     .page-wrap-header-n-content
     .page-header
          .branding-logo
          .branding-tagline
          .wrapper-search
          .page-nav-main
     .page-main-content
     .page-secondary-content
          .nav-supplementary
     .page-footer
          .site-info

表示命名约定： 通过描述元素的位置和/或外观来命名元素的类。请参阅下面的示例。

 .theme-ocean-blue
.theme-apricot-orange
.skin-red-tango
.skin-darkness

语义命名约定： 通过描述它所包含的内容来命名。如中。请参阅下面的示例。

 .product-review
.notification
.language-switch
.currency-switch
.list-of-friends
.latest-status

BEM 命名约定： 代表“块、元素、修饰符”。语法如 <module-name>__<sub-module-name>--<modifier-or-state> 。 Block 是一个“主”容器，不管你怎么称呼它，它都是一种模块/组件。元素只是主要组件（块）的子组件。修饰符是某种状态。 特点： 语法（使用 dbl 下划线和 dbl 破折号），& 子元素必须包含它们最接近的组件名称。请参阅下面的示例。

 .nav-primary
.nav-primary__list
.nav-primary__item
.nav-primary__link
.nav-primary__link--is-active

.grid
.grid__item
.grid__description
.grid__img-wrap
.grid__img

.global-footer
.global-footer__col
.global-footer__header
.global-footer__link

OCSS 命名约定： 代表面向对象的 CSS。将皮肤用于品牌目的或设计的一致性（即 bg 颜色、边框颜色等）。抽象结构样式。下面的抽象结构样式示例。 OOCSS 的两个主要原则：分离结构和皮肤，其次分离容器和内容。

 .global-width {
    min-width: 780px;    /* minimum width */
    max-width: 1400px;   /* maximum width */
    margin: 0 auto;      /* Centering using margin: auto */
    position: relative;  /* Relative positioning to create a positioning context for child elements */
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;    /* Overflow set to "hidden" for clearfixing */
}

一些 CSS 指南：

分享您的 CSS 样式指南已成为一种“趋势”，您可以阅读以下内容以挑选和选择似乎适合您需要的任何内容（命名约定还有更多，这可能超出您的问题范围）：

我的偏见意见：

我目前混合使用 BEM 、语义和结构命名约定，并且效果很好。

BEM 和语义一起工作得很好（是的，我将我的类命名为 .list-of-friends__single-friend ）。 BEM 使事情变得特别简单：CSS 中没有疯狂的嵌套和非常冗长的代码。

对于网站的裸结构，或者如果网站有多个结构，则每个“模板”也欢迎使用结构命名约定。在我看来，这应该只用于非常通用的元素，所以请谨慎使用。

命名约定：真的吗？？谢谢，但不，谢谢。您可以在特殊情况下考虑它（即在不同主题中对整个页面进行皮肤处理）。

OCSS 命名约定：我不得不承认，仍然需要进一步研究。我在下面的资源中提供了链接，供您进一步调查。

资源：

原文由 Adrien Be 发布，翻译遵循 CC BY-SA 4.0 许可协议

ID、类和包含元素类型前缀的 HTML 命名约定？

2015：关注现有 CSS 和 HTML 命名系统的全新答案

共同要求/约定：

已知约定：

一些 CSS 指南：

我的偏见意见：

资源：

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译