有没有人知道一个很好的资源来解释HTML ID和类的良好命名约定,以及是否用带有元素类型的ID作为前缀,即btn或按钮或类似的?
课程应该是复数还是单数?我知道ID应该是单数的,因为它们是唯一的,但是那些类呢?
ID和类应该使用名词,对吧?
我正在使用在现有页面中注入其他页面的页面,有点像部分页面...因此......我想知道是否有人在ID和/或类前面添加了一个名称...有点像命名空间或类似名称?
任何评论或见解都非常受欢迎。
答案 0 :(得分:66)
对于您选择的任何惯例,我建议您选择符合您项目需求的要求。
即:你的项目是小还是大?您的项目是否会被重用或需要处理某种主题?开发人员是否对CSS / HTML有敏锐的兴趣或经验足以坚持常规? &安培;等...... ..
首先,如果您不了解这种常见的(好的?)做法:避免使用ID作为样式挂钩,请尝试仅使用类
由于:
只有极少数的块(即页面页眉,页脚)可以100%保证它们不会在其他地方重复使用
你想保持特异性低,总是有时候你需要覆盖它(不使用额外的ID选择器或者!重要)
-
或_
:可能是主观的(devs&#39; views)&amp;取决于使用的键盘语言。请注意,我认为camelCase已经被置于一边,因为我认为没有找到相应的浏览器兼容性问题。<input type="button"></input>
创建的按钮,并且想要切换到使用<button></button>
,如果你在某些选择器中使用了元素类型,那么你可以计划一些烦人/耗时的重构/测试/ prod-bug-固定,而如果你使用无元素选择器,那么开关将无限容易。 SMACCS also has it in its conventions btn-bluetheme-create-accnt
或accordion-modrnlook-userlist
.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 */
}
有一种趋势&#34;要分享您的CSS样式指南,这里有一些您可以阅读和选择选择任何看起来符合你需要的东西(命名惯例,但更多,这可能超出了你的问题范围):
我目前使用的是 BEM ,语义&amp; 结构命名约定&amp;它运作得很好。
BEM &amp; 语义一起工作得很好(是的,我将我的类命名为.list-of-friends__single-friend
)。 BEM让事情变得更加简单:CSS和CSS中没有嵌套的疯狂。非常详细的代码。
结构命名约定也欢迎网站的裸结构,或每个&#34;模板&#34;如果网站有几个结构。在我看来,这应该只用于非常通用的元素,所以要小心使用。
演示命名约定:真的吗?谢谢,但不,谢谢。您可以在特殊情况下考虑它(即,在不同主题中整个页面)。
OCSS 命名惯例:我不得不承认,仍然需要进一步研究这个问题。我在下面的资源中提供了链接,供您进一步调查。
答案 1 :(得分:19)
很多人都没有意识到你可以做到这一点:
.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 */
}
答案 2 :(得分:11)
我不会在类型前添加前缀,因为如果你必须
,你可以在选择器中推断出这个form#contact {
property: value;
}
您描述的方法称为匈牙利符号,并不是很受欢迎。
对于你提到的内容,你可以将注入的HTML放在一个具有一个唯一类/ id的div中,该类具有一种本地化重置。查找CSS选择器特性以确保您的规则将生效,而不是主机页面的CSS中的其他规则。 See this answer to a similar question regarding styling an element within a parent page.