当前位置: 首页 > Web前端 > HTML5

BEM命名css模块化解决方案

时间:2023-04-05 22:30:36 HTML5

BEMBlockElementModifier阅读http://getbem.com/introduction/https://cssguidelin.es/#bem-l...https://www.w3cplus.com/css/s...http://www.sohu.com/a/1501527...类似于http://suitcss.github.io/https://smacss.com/可扩展的模块化架构http://oocss.org/面向对象为什么使用BEMWeb开发是由模块化的目的驱动的:将项目拆分成多个部分以使其易于管理。Web组件1.避免继承并通过为每个元素使用唯一的CSS类来提供某种范围(例如)。.my-component__list-item2。通过将CSS功能保持在最低限度来减少样式冲突。3.在模块化环境中绕过继承4.嵌套选择器提高了CSS的特异性。需要变得更具体以获得现有的特异性。模块化上下文需要低特异性、独立于块的实体,这些实体本身就有意义。尽管块可以嵌套和交互,但在语义上它们仍然相同;没有优先级或等级。仅使用类名称选择器,不使用标签名称或ID,不依赖于页眉、容器、菜单、复选框、输入、徽标、按钮...

上的其他块/元素。block{color:#042;}元素(element)块的一部分,没有独立的意义,在语义上与块相关联任何元素在语义上都绑定到它的块。menu__item,list__item,checkbox__caption,header__title,menu__elements...
.block__elem{color:#042;}修饰符块或标志在组件上。使用它们来改变外观、行为或状态.block--mod或.block__elem--mod和.block--color-black和.block--color-red。修复装饰符中的空格被短划线替代disabled,highlighted,checked,fixed,sizebig,coloryellow,inputsizebig,buttonthemegreen...
...
例子(例子).form{}.form--theme-xmas{}。form--simple{}.form__input{}.form__submit{}.form__submit--disabled{}Sass3.3forBEM.note{color:#ffffff;&__content{背景:白色;}&__meta{背景:#f1f1f1;border-top:1pxsolid#eee;}&--featured{box-shadow:03px1pxrgba(0,0,0,0.1);}}$module:'note';.#{$module}{//默认情况下,我们的笔记有白色背景......&__content{background:white;}//但是“特色”笔记有一个灰白色的背景&--featured{.#{$module}__content{background:#eee;}}}