用于ID，类和包含元素types前缀的HTML命名约定？
有没有人知道一个很好的资源来解释HTML标识和类的良好命名约定，以及是否与元素types即btn或button或类似的ID前缀？
class级应该是复数还是单数？ 我得到的ID应该是单一的，因为它们是独一无二的，但是类怎么样呢？
ID和类应该使用名词，对吗？
我正在使用页面注入现有页面中的其他页面，有点像部分页面…因此…我想知道是否有人作为ID和/或类前名称前缀..有点像名称空间或类似？
任何意见或见解真的很感激。
我不会用types的前缀，因为你可以在select器中推断这一点
form#contact { property: value; } 你所描述的方法被称为匈牙利符号，并不是很受欢迎。
对于你所提到的，你可以把你注入的HTML放在一个div中，并且有一个唯一的class / id，它有一个本地化的重置。 查找特定于CSSselect器以确保您的规则会生效，而不是主持人页面的CSS中的其他规则。 看到这个答案有关在父页面中设置元素样式的类似问题。
2015年：专注于现有的CSS和HTML命名系统的新鲜答案
对于您select的任何会议，我build议您挑选针对您的项目需求的需求。
即：你的项目很小还是很大？ 你的项目将被重用或需要处理某种主题？ 开发人员对CSS / HTML敏感或有经验的开发人员是否足够坚持惯例？ 等等..
首先，如果你不知道这个常见的（好的）做法： 避免ID作为样式钩子，试着只使用类
因为：
-
只有非常less的块（即页眉，页脚）可以100％保证他们不会在其他地方重复使用的事实
-
你想保持特异性低，总是有时间你需要重写它（不使用额外的IDselect器或！重要）
通用要求/惯例：
- 名字应该是直观/有意义的
- 不要缩写名称，除非它是一个非常有名的缩写（即消息的msg，accnt for account）
- 使用已知/通用名称：.site-nav，.aside-nav，.global-head，.btn-primary，.btn-secondary
- 允许结构层次（即BEM公约）
- 在命名中使用
-或_：可能是主观的（开发者的意见），取决于使用的键盘语言。 请注意，camelCase已被搁置在浏览器兼容性问题，我相信，虽然我从来没有find一个这样的证据。 - 除非特殊情况，切勿在select器中使用元素：这样可以提供更大的灵活性。 你有你使用
<input type="button"></input>创build的<button></button>，如果你在一些select器中使用了元素types，那么你可以使用<button></button>来切换到那些烦人/消耗重构/testing/ prod-bug-fixing，而如果你使用无元素select器，那么开关就会容易得多。 SMACCS在其惯例中也有 - 对于状态，尝试匹配来自其他语言（php，java，c＃）的已知约定：即，使用“is-active”，“is-badass”等等
- 从左到右的名称：从最通用的到最精确的，即。
btn-bluetheme-create-accnt或accordion-modrnlook-userlist - 类或id名称应始终具有足够的特定性，以便在整个项目中进行search并仅返回相关结果
- 如果使用后代select器，首选直接后代 – 使用
.module-name > .sub-module-name与.module-name .sub-module-name– 将来你可以节省一些头痛的事情（更简单的CSS，也可以更高性能，尽pipe术语“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 dash的用法），＆子元素必须包含最接近的组件名称。 看下面的例子。
.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。 使用皮肤品牌的目的或devise的一致性（即。颜色，边框颜色…）。 摘要结构风格。 下面的抽象结构风格的例子。 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样式指南，这里有几个你可以阅读挑选任何似乎适合你的需要（命名约定，但也更多，这可能超出了你的问题的范围）：
- github.com/styleguide/css/
- cssguidelin.es
- css-tricks.com/sass-style-guide
- codepen.io/chriscoyier/blog/codepens-css
我的偏见：
我目前使用了BEM ， 语义和结构命名约定的组合，并且工作得很好。
BEM和语义工作很好地结合在一起（是的，我把我的名字命名为“ .list-of-friends__single-friend ）。 BEM使事情变得更加简单：在CSS和非常冗长的代码中没有嵌套的疯狂。
结构命名约定也适用于网站的裸露结构，或者如果网站具有多个结构，则每个“模板”也是如此。 在我看来，这应该只用于非常通用的元素，所以请谨慎使用。
演示命名约定：真的？ 谢谢，但不是谢谢。 你可以在特殊情况下考虑它（即在不同的主题中整个页面）。
OCSS的命名规则：我不得不承认，还是要进一步研究这个。 我在下面的资源中提供了链接，供您进一步调查。
资源：
- http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
- http://getbem.com/
- http://bem.info/method/definitions/
- http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
- https://github.com/stubbornella/oocss/wiki
- https://css-tricks.com/semantic-class-names/
- http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html
- http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/
- CSS类的命名约定
- 我可以在CSS类名中使用骆驼大小写吗？
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Underscores_in_class_and_ID_Names
- https://softwareengineering.stackexchange.com/questions/141988/practical-considerations-for-html-css-naming-conventions-syntax
- http://smacss.com/book/type-module
- github.com/styleguide/css/
- cssguidelin.es
很多人不知道你可以做这个东西：
.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 */ }
