mar*_*ith 61 html css xhtml naming-conventions
有没有人知道一个很好的资源来解释HTML ID和类的良好命名约定,以及是否使用元素类型的ID(例如btn或按钮或类似物)作为前缀？
课程应该是复数还是单数？我知道ID应该是单数的,因为它们是唯一的,但是那些类呢？
ID和类应该使用名词,对吧？
我正在使用在现有页面中注入其他页面的页面,有点像部分页面......因此......我想知道是否有人在ID和/或类前面添加了一个名称..有点像命名空间或类似？
任何评论或见解真的很感激.
Adr*_* Be 68
对于您选择的任何惯例,我建议您选择针对项目需求的要求.
即:你的项目是小还是大？您的项目是否会被重用或需要处理某种主题？开发人员是否对CSS/HTML有敏锐的兴趣或经验足以坚持常规？等等..
首先,如果您不了解这种常见的(好的？)实践:避免将ID作为样式挂钩,尝试仅使用类
因为:
只有极少数的块(即页面页眉,页脚)可以100%保证它们不会在其他地方重复使用
你想保持特异性低,你总是需要覆盖它(不使用额外的ID选择器或者!重要)
-或_在namings:可能主观(开发者的意见)和取决于使用的键盘语言.请注意,我认为camelCase已经被搁置以避免出现浏览器兼容性问题,尽管我从未找到过这方面的证据.<input type="button"></input>,你想切换到使用<button></button>,如果你在一些选择器中使用元素类型,那么你可以计划一些烦人/耗时的重构/测试/ prod-bug修复,而如果你使用无元素选择器然后开关将变得无比容易.SMACCS也在其公约中有它btn-bluetheme-create-accnt要么accordion-modrnlook-userlist.module-name > .sub-module-namevs .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样式指南,这里有一些你可以阅读以挑选任何看起来适合你的需求(命名约定,但更多,这可能超出你的问题的范围):
我目前使用BEM,语义和结构命名约定的混合,并且它已经运行得很好.
BEM和语义很好地协同工作(是的,我将我的类命名为 .list-of-friends__single-friend).BEM使事情变得特别简单:CSS中没有嵌套的疯狂和非常冗长的代码.
结构命名约定也欢迎网站的裸结构,或者如果网站有多个结构,则每个"模板".在我看来,这应该仅用于非常通用的元素,因此请谨慎使用.
演示命名约定:真的吗？谢谢,但不,谢谢.你可以在特殊情况下考虑它(即皮肤整个页面在不同的主题).
OCSS命名惯例:我必须承认,仍然需要进一步研究这个问题.我在下面的资源中提供了链接,供您进一步调查.
Rya*_*nce 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 */
}
ale*_*lex 11
我不会在类型前添加前缀,因为如果必须的话,你可以在选择器中推断出这个
form#contact {
property: value;
}
您描述的方法称为匈牙利表示法,并不是很受欢迎.
对于你提到的内容,你可以将注入的HTML放在一个具有一个唯一类/ id的div中,这有一种本地化的重置.查找CSS选择器特性以确保您的规则将生效,而不是主机页面的CSS中的其他规则.有关在父页面中设置元素样式的类似问题,请参阅此答案.