[{"data":1,"prerenderedAt":529},["ShallowReactive",2],{"page-\u002Fcss\u002Fcss的bem命名法":3},{"id":4,"title":5,"body":6,"description":518,"extension":519,"meta":520,"navigation":397,"path":525,"seo":526,"stem":527,"__hash__":528},"content\u002Fcss\u002Fcss的BEM命名法.md","Css的BEM命名法",{"type":7,"value":8,"toc":514},"minimark",[9,23,28,108,125,166,169,267,277,280,346,356,359,504,507,510],[10,11,12,13,17,18,22],"p",{},"BEM 是 ",[14,15,16],"code",{},"Block__Element--Modifier"," 的命名规范，我们经常会在嵌套语法里使用到，核心目的是",[19,20,21],"strong",{},"让类名自解释、避免样式冲突、方便团队协作","。",[24,25,27],"h2",{"id":26},"bem-的三个部分","BEM 的三个部分",[29,30,31,50],"table",{},[32,33,34],"thead",{},[35,36,37,41,44,47],"tr",{},[38,39,40],"th",{},"部分",[38,42,43],{},"英文",[38,45,46],{},"含义",[38,48,49],{},"写法",[51,52,53,72,90],"tbody",{},[35,54,55,61,64,67],{},[56,57,58],"td",{},[19,59,60],{},"B",[56,62,63],{},"Block",[56,65,66],{},"块，独立的功能单元",[56,68,69],{},[14,70,71],{},".block",[35,73,74,79,82,85],{},[56,75,76],{},[19,77,78],{},"E",[56,80,81],{},"Element",[56,83,84],{},"元素，块的一部分",[56,86,87],{},[14,88,89],{},".block__element",[35,91,92,97,100,103],{},[56,93,94],{},[19,95,96],{},"M",[56,98,99],{},"Modifier",[56,101,102],{},"修饰符，块或元素的状态\u002F变体",[56,104,105],{},[14,106,107],{},".block--modifier",[10,109,110,111,114,115,114,118,114,121,124],{},"我们之前在css优先级里讲过块级元素有哪些（有自己的语义。比如 ",[14,112,113],{},".header","、",[14,116,117],{},".button",[14,119,120],{},".card",[14,122,123],{},".menu","。），这里不复述：",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"card\">...\u003C\u002Fdiv>\n","html","",[14,133,134],{"__ignoreMap":131},[135,136,139,143,147,151,154,158,161,163],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"sVt8B","\u003C",[135,144,146],{"class":145},"s9eBZ","div",[135,148,150],{"class":149},"sScJk"," class",[135,152,153],{"class":141},"=",[135,155,157],{"class":156},"sZZnC","\"card\"",[135,159,160],{"class":141},">...\u003C\u002F",[135,162,146],{"class":145},[135,164,165],{"class":141},">\n",[10,167,168],{},"元素是块级元素内的组成部分，不能脱离块级元素单独使用，需要用下划线，必须说你可以用一个下划线来连接：",[126,170,172],{"className":128,"code":171,"language":130,"meta":131,"style":131},"\u003Cdiv class=\"card\">\n  \u003Ch2 class=\"card__title\">标题\u003C\u002Fh2>\n  \u003Cp class=\"card__text\">内容\u003C\u002Fp>\n  \u003Cimg class=\"card__image\" src=\"...\" \u002F>\n\u003C\u002Fdiv>\n",[14,173,174,188,210,231,257],{"__ignoreMap":131},[135,175,176,178,180,182,184,186],{"class":137,"line":138},[135,177,142],{"class":141},[135,179,146],{"class":145},[135,181,150],{"class":149},[135,183,153],{"class":141},[135,185,157],{"class":156},[135,187,165],{"class":141},[135,189,191,194,196,198,200,203,206,208],{"class":137,"line":190},2,[135,192,193],{"class":141},"  \u003C",[135,195,24],{"class":145},[135,197,150],{"class":149},[135,199,153],{"class":141},[135,201,202],{"class":156},"\"card__title\"",[135,204,205],{"class":141},">标题\u003C\u002F",[135,207,24],{"class":145},[135,209,165],{"class":141},[135,211,213,215,217,219,221,224,227,229],{"class":137,"line":212},3,[135,214,193],{"class":141},[135,216,10],{"class":145},[135,218,150],{"class":149},[135,220,153],{"class":141},[135,222,223],{"class":156},"\"card__text\"",[135,225,226],{"class":141},">内容\u003C\u002F",[135,228,10],{"class":145},[135,230,165],{"class":141},[135,232,234,236,239,241,243,246,249,251,254],{"class":137,"line":233},4,[135,235,193],{"class":141},[135,237,238],{"class":145},"img",[135,240,150],{"class":149},[135,242,153],{"class":141},[135,244,245],{"class":156},"\"card__image\"",[135,247,248],{"class":149}," src",[135,250,153],{"class":141},[135,252,253],{"class":156},"\"...\"",[135,255,256],{"class":141}," \u002F>\n",[135,258,260,263,265],{"class":137,"line":259},5,[135,261,262],{"class":141},"\u003C\u002F",[135,264,146],{"class":145},[135,266,165],{"class":141},[10,268,269,272,273,276],{},[14,270,271],{},"card__title"," 表示“card 这个块里的 title 元素”。它",[19,274,275],{},"只对 card 有意义","，换个块就不叫这个名字。",[10,278,279],{},"修饰符用来修饰块或者元素的状态、变化、外观变化，我们一般使用双连字符--来连接：",[126,281,283],{"className":128,"code":282,"language":130,"meta":131,"style":131},"\u003Cbutton class=\"button button--primary\">主要按钮\u003C\u002Fbutton>\n\u003Cbutton class=\"button button--large\">大按钮\u003C\u002Fbutton>\n\u003Cbutton class=\"button button--disabled\">禁用按钮\u003C\u002Fbutton>\n",[14,284,285,306,326],{"__ignoreMap":131},[135,286,287,289,292,294,296,299,302,304],{"class":137,"line":138},[135,288,142],{"class":141},[135,290,291],{"class":145},"button",[135,293,150],{"class":149},[135,295,153],{"class":141},[135,297,298],{"class":156},"\"button button--primary\"",[135,300,301],{"class":141},">主要按钮\u003C\u002F",[135,303,291],{"class":145},[135,305,165],{"class":141},[135,307,308,310,312,314,316,319,322,324],{"class":137,"line":190},[135,309,142],{"class":141},[135,311,291],{"class":145},[135,313,150],{"class":149},[135,315,153],{"class":141},[135,317,318],{"class":156},"\"button button--large\"",[135,320,321],{"class":141},">大按钮\u003C\u002F",[135,323,291],{"class":145},[135,325,165],{"class":141},[135,327,328,330,332,334,336,339,342,344],{"class":137,"line":212},[135,329,142],{"class":141},[135,331,291],{"class":145},[135,333,150],{"class":149},[135,335,153],{"class":141},[135,337,338],{"class":156},"\"button button--disabled\"",[135,340,341],{"class":141},">禁用按钮\u003C\u002F",[135,343,291],{"class":145},[135,345,165],{"class":141},[10,347,348,351,352,355],{},[14,349,350],{},"button--primary"," 表示“button 这个块的主要变体”。修饰符通常",[19,353,354],{},"和基础类一起用","，不单独出现。",[10,357,358],{},"这样做的优点很好懂，可以很好避免和普通命名的冲突，bem这种方式可以自带作用域。并且这样的类名自己携带解析，一眼就清楚是哪个组件使用的什么元素。我们在scss里经常使用嵌套语法，这样也是可以很好的偏好使用bem命名法：",[126,360,364],{"className":361,"code":362,"language":363,"meta":131,"style":131},"language-scss shiki shiki-themes github-light github-dark",".head {\n  margin-bottom: 8px;\n\n  &__title {\n    font-size: 14px;\n  }\n\n  &__meta {\n    font-size: 11px;\n  }\n\n  &--large {\n    font-size: 18px;\n  }\n}\n","scss",[14,365,366,374,393,399,409,423,429,434,444,458,463,468,479,493,498],{"__ignoreMap":131},[135,367,368,371],{"class":137,"line":138},[135,369,370],{"class":149},".head",[135,372,373],{"class":141}," {\n",[135,375,376,380,383,386,390],{"class":137,"line":190},[135,377,379],{"class":378},"sj4cs","  margin-bottom",[135,381,382],{"class":141},": ",[135,384,385],{"class":378},"8",[135,387,389],{"class":388},"szBVR","px",[135,391,392],{"class":141},";\n",[135,394,395],{"class":137,"line":212},[135,396,398],{"emptyLinePlaceholder":397},true,"\n",[135,400,401,404,407],{"class":137,"line":233},[135,402,403],{"class":145},"  &",[135,405,406],{"class":149},"__title",[135,408,373],{"class":141},[135,410,411,414,416,419,421],{"class":137,"line":259},[135,412,413],{"class":378},"    font-size",[135,415,382],{"class":141},[135,417,418],{"class":378},"14",[135,420,389],{"class":388},[135,422,392],{"class":141},[135,424,426],{"class":137,"line":425},6,[135,427,428],{"class":141},"  }\n",[135,430,432],{"class":137,"line":431},7,[135,433,398],{"emptyLinePlaceholder":397},[135,435,437,439,442],{"class":137,"line":436},8,[135,438,403],{"class":145},[135,440,441],{"class":149},"__meta",[135,443,373],{"class":141},[135,445,447,449,451,454,456],{"class":137,"line":446},9,[135,448,413],{"class":378},[135,450,382],{"class":141},[135,452,453],{"class":378},"11",[135,455,389],{"class":388},[135,457,392],{"class":141},[135,459,461],{"class":137,"line":460},10,[135,462,428],{"class":141},[135,464,466],{"class":137,"line":465},11,[135,467,398],{"emptyLinePlaceholder":397},[135,469,471,473,477],{"class":137,"line":470},12,[135,472,403],{"class":145},[135,474,476],{"class":475},"s4XuR","--large",[135,478,373],{"class":141},[135,480,482,484,486,489,491],{"class":137,"line":481},13,[135,483,413],{"class":378},[135,485,382],{"class":141},[135,487,488],{"class":378},"18",[135,490,389],{"class":388},[135,492,392],{"class":141},[135,494,496],{"class":137,"line":495},14,[135,497,428],{"class":141},[135,499,501],{"class":137,"line":500},15,[135,502,503],{"class":141},"}\n",[24,505,506],{"id":506},"哪些库遵守了bem准则",[10,508,509],{},"最经典的Element Plus就是使用的bem，比如el-button_text这样的，一眼就看得出使用的BEM。还有就是Ant Design的 ant-btn... 的中后台经常使用的组件库，还有Bulma部分使用bem的modal-card-head等。",[511,512,513],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":131,"searchDepth":190,"depth":190,"links":515},[516,517],{"id":26,"depth":190,"text":27},{"id":506,"depth":190,"text":506},"BEM 是 Block__Element--Modifier 的命名规范，我们经常会在嵌套语法里使用到，核心目的是让类名自解释、避免样式冲突、方便团队协作。","md",{"date":521,"tags":522},"2026-10-14",[523,524],"css","bem","\u002Fcss\u002Fcss的bem命名法",{"description":518},"css\u002Fcss的BEM命名法","m6HMtaVO5DN9pJQe8TfDSUk7RymeTMH5hgfpA74cbhI",1791957912796]