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

CSSBEM规范学习笔记

时间:2023-03-30 23:53:16 CSS

块(Block)/*常规写法与BEM写法相同*/.list元素(Element)块中的子元素是块的子元素,而.list元素(Element)块中的子元素子元素也被认为是块的直接子元素。块中元素的类名必须以父块的名称为前缀。如上例,li.item是list的子元素/*常规写法*/.list{}.list.item{}/*BEM写法*/.list{}.list__item{}修饰符(modifier)“修饰符”可以理解为一个方块的特定状态,比如多种颜色的按钮。{}.btn-list__btn_green{}激活列表item.list{}.list.select{}.list.item{}.list.item.active{}.list{}.list_select{}.list__item{}。List__item_active{}写法原则选择器嵌套不会超过2层推荐写法第一项我是姓名

查看班级名我是链接
  • 第二个也是当前选中的item我是名字
  • 我是链接
  • 第三项特别突出我是名字我是链接
  • .xxx{}.xxx__item{}.xxx__item_hightlight{}.xxx__product-name{}。xxx__link{}.xxx__ming-zi-ke-yi-hen-chang{}//嵌套写.xxx__item_current{.xxx__link{}}无意义__使用新块保存新元素这样做更有意义Namespace.l-:布局(layouts).o-:对象(objects).c-:组件(components).js:js钩子(JavaScripthooks).is-|。has-:stateclasses.t1|.s1:typographysizes.u-:utilityclasses参考文档前端css、less、sass编码规范---BEMBEM官方文档