2015：关注现有CSS＆amp; HTML命名系统

对于您选择的任何惯例，我建议您选择符合您项目需求的要求。

即：你的项目是小还是大？您的项目是否会被重用或需要处理某种主题？开发人员是否对CSS / HTML有敏锐的兴趣或经验足以坚持常规？＆安培;等...... ..

首先，如果您不了解这种常见的（好的？）做法：避免使用ID作为样式挂钩，请尝试仅使用类

由于：

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

共同要求/惯例：

名称应该是直观/有意义的
不要缩写名称，除非它是一个非常着名的缩写（即msg for message，accnt for account）
使用已知/常用名称：.site-nav，.aside-nav，.global-head，.btn-primary，.btn-secondary
允许结构层次结构（即BEM惯例）
在namings中使用-或_：可能是主观的（devs＆＃39; views）＆amp;取决于使用的键盘语言。请注意，我认为camelCase已经被置于一边，因为我认为没有找到相应的浏览器兼容性问题。
除非特殊情况，否则切勿在选择器中使用元素：这样可以提供更大的灵活性，即。你有使用<input type="button"></input>创建的按钮，并且想要切换到使用<button></button>，如果你在某些选择器中使用了元素类型，那么你可以计划一些烦人/耗时的重构/测试/ prod-bug-固定，而如果你使用无元素选择器，那么开关将无限容易。 SMACCS also has it in its conventions
对于州，尝试匹配其他语言（php，java，c＃）的已知约定：即使用＆＃34; is-active＆＃34;，＆＃34; is-badass＆＃34;，＆amp;所以
从左到右的名称：从最通用到最精确，即。 btn-bluetheme-create-accnt或accordion-modrnlook-userlist
一个类或id名称应始终具体到足以在整个项目中进行搜索。仅返回相关结果
如果您使用后代选择器，则更喜欢直接后代 - 使用.module-name > .sub-module-name vs .module-name .sub-module-name - 您将来会为自己节省一些麻烦（简单的CSS但更高效，但术语＆＃ 34; CSS表现可能是可笑的＆＃34;）

已知惯例：

结构命名约定： 通过描述它的名称来定义元素的类，而不是它的位置或外观。见下面的例子。

.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命名约定： 代表＆＃34;块，元素，修饰符＆＃34;。语法如<module-name>__<sub-module-name>--<modifier-or-state>。 Block是＆＃34; main＆＃34;容器，一种模块/组件，无论你怎么称呼它。元素只是主要组件（块）的子组件。修饰语是某种状态。 特性：语法（使用dbl underscore＆amp; dbl dash），＆amp;子元素必须包含其最接近的组件名称。见下面的例子。

.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颜色，边框颜色......）。抽象结构样式。下面的抽象结构样式示例。 Two main principles of OOCSS: separate structure & skin, secondly separate container & content.

 .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指南：

有一种趋势＆＃34;要分享您的CSS样式指南，这里有一些您可以阅读和选择选择任何看起来符合你需要的东西（命名惯例，但更多，这可能超出了你的问题范围）：

我的偏见：

我目前使用的是 BEM ，语义＆amp; 结构命名约定＆amp;它运作得很好。

BEM ＆amp; 语义一起工作得很好（是的，我将我的类命名为.list-of-friends__single-friend）。 BEM让事情变得更加简单：CSS和CSS中没有嵌套的疯狂。非常详细的代码。

结构命名约定也欢迎网站的裸结构，或每个＆＃34;模板＆＃34;如果网站有几个结构。在我看来，这应该只用于非常通用的元素，所以要小心使用。

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

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

资源：

Answer 2

很多人都没有意识到你可以做到这一点：

.awesome {
 /* rules for anything awesome */
}

div.awesome {
 /* rules for only awesome divs */
}

button.awesome {
 /* rules for any awesome buttons, but not awesome divs */
}

div.awesome h1 {
 /* rules for H1s inside of any div.awesome */
}

div.awesome>button {
 /* rules for immediate children buttons (not grandchildren+) of div.awesomes */
}

Answer 3

我不会在类型前添加前缀，因为如果你必须

，你可以在选择器中推断出这个

form#contact {
    property: value;

}

您描述的方法称为匈牙利符号，并不是很受欢迎。

对于你提到的内容，你可以将注入的HTML放在一个具有一个唯一类/ id的div中，该类具有一种本地化重置。查找CSS选择器特性以确保您的规则将生效，而不是主机页面的CSS中的其他规则。 See this answer to a similar question regarding styling an element within a parent page.

ID，类的HTML命名约定以及包含元素类型前缀？

3 个答案:

2015：关注现有CSS＆amp; HTML命名系统

共同要求/惯例：

已知惯例：

一些CSS指南：

我的偏见：

资源：