https://ash.gd/_next/static/chunks/pages/posts/2013-10-27-a-simple…class-naming-convention-d0c19a303f40a2a4.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[936],{3794:function(s,e,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/posts/2013-10-27-a-simple-bem-class-naming-convention",function(){return l(1829)}])},7497:function(s,e,l){"use strict";var n=l(3555);let c=(0,n.zo)("div",{variants:{center:{true:{marginInline:"auto"}},mw:{0:{maxWidth:"44ch"},1:{maxWidth:"75rem"}}}});e.Z=c},3555:function(s,e,l){"use strict";l.d(e,{rS:function(){return t},zY:function(){return a},zo:function(){return c}});var n=l(6744);let{styled:c,getCssText:r,globalCss:a,createTheme:o,config:i,theme:t}=(0,n.Th)({media:{belowI1:"(max-width: 29.999em)",i1:"(min-width: 30em)",belowI2:"(max-width: 44.999em)",i2:"(min-width: 45em)",belowI3:"(max-width: 65.999em)",i3:"(min-width: 65em)",belowI4:"(max-width: 72.999em)",i4:"(min-width: 72em)"},theme:{fonts:{body:"'PT Root UI', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"},colors:{body:"#020202",bodySubtle:"rgb(69, 68, 68)",background:"rgb(253, 206, 245)",documentBorder:"#fff",accentA:"#090efe",accentB:"#f8ce03",accentC:"#e3fffd"},space:{1:"0.5rem",2:"1rem",3:"1.25rem",4:"1.875rem",5:"2.8125rem",page:"15vmin",documentBorderWidth:"$2",small:"$1",medium:"$2",large:"$3"}},utils:{stackInline:s=>({"& > * + *":{marginInlineStart:s}}),stackBlock:s=>({"& > * + *":{marginBlockStart:s}})}})},1829:function(s,e,l){"use strict";l.r(e),l.d(e,{__N_SSG:function(){return a},meta:function(){return i},tableOfContents:function(){return o}});var n=l(5893),c=l(1151),r=l(7497),a=!0;let o=[],i={title:"A Simpler BEM Class Naming Convention?",description:"BEM is a useful convention for structuring CSS, but can we make it less verbose?",date:"2013-10-27",tags:["CSS","BEM","HTML","Stylus"]};function t(s){let e=Object.assign({p:"p",div:"div",pre:"pre",code:"code",span:"span",em:"em",a:"a"},(0,c.ah)(),s.components);return(0,n.jsxs)(r.Z,{css:{stackBlock:"$medium"},children:[(0,n.jsx)(e.p,{children:"I've been using BEM style architecture for my CSS for a little while now. I like it a lot, but I wanted to know whether it's possible to avoid the repetition that results from stacking up modifiers. My aim is to take something like:"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"div"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"block__element block__element--modifier block__element--second-modifier"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]})]})})}),(0,n.jsx)(e.p,{children:"And shrink it down to this:"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"html","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"block__element--modifier--second-modifier"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"></"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]})})})}),(0,n.jsx)(e.p,{children:"Here's a practical example:"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"nav"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"#"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item main-nav__item--featured"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"#"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"    "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item main-nav__item--featured main-nav__item--xmas"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"    "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"#"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"    >"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"  >"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"nav"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]})]})})}),(0,n.jsxs)(e.p,{children:["This is a pretty straightforward example showing a block - ",(0,n.jsx)(e.code,{children:"main-nav"})," with a single type of descendant - ",(0,n.jsx)(e.code,{children:"item"}),". There are two modifiers, ",(0,n.jsx)(e.code,{children:"featured"}),"and ",(0,n.jsx)(e.code,{children:"xmas"}),". You can see that in order to use modifiers, we must add extra classes - one for each modifier."]}),(0,n.jsx)(e.p,{children:"If you're using many modifiers (of course, it's questionable whether you should be), class attributes can quickly become unwieldy. I wondered whether there was a better way, whether we could somehow concatenate all of our modifiers into a single class name. Yesterday I had a chance to investigate, and after a couple of attempts found a way. It results in markup that looks like this:"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"html","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"nav"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"#"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item--featured"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"#"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item--featured--xmas"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"href"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"#"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"Link"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"a"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"</"}),(0,n.jsx)(e.span,{style:{color:"#F07178"},children:"nav"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:">"})]})]})})}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.em,{children:"Mmm, minty fresh."})}),(0,n.jsxs)(e.p,{children:["So how does the CSS look? I've used attribute selectors comb

1ined with the ",(0,n.jsx)(e.code,{children:"@extend"})," mixin (Stylus is my preprocessor of choice). Complexity is shifted from my class attributes to my class definitions; but not too much so."]}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"stylus","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"stylus","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:"/**"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" * Blocks and elements still use simple class names like usual."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" */"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"main-nav"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#B2CCD6"},children:"text-align"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"center"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"main-nav__item"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#B2CCD6"},children:"display"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"block"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:"/**"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" * Modifiers are comprised of two class attribute selectors:"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" *"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" * 1. The base block or element class suffixed"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" *    with the modifier syntax (`--`)."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" *"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" * 2. The modifier name prefixed with the modifier syntax."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" *"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" * Each modifier extends the block / element base class."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:" */"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:"// `featured` modifier"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"["}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"*="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item--"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"]["}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"*="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"--featured"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"]"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"@extend"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"main-nav__item"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#B2CCD6"},children:"font-weight"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"bold"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:" "}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#676E95"},children:"// `xmas` modifier"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"["}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"*="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"main-nav__item--"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"]["}),(0,n.jsx)(e.span,{style:{color:"#C792EA"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"*="}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#C3E88D"},children:"--xmas"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"'"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"]"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"@extend"}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#FFCB6B"},children:"main-nav__item"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#B2CCD6"},children:"background"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"green"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"  "}),(0,n.jsx)(e.span,{style:{color:"#B2CCD6"},children:"color"}),(0,n.jsx)(e.span,{style:{color:"#89DDFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A6ACCD"},children:"red"})]})]})})}),(0,n.jsxs)(e.p,{children:["You can see a demo on ",(0,n.jsx)(e.a,{href:"http://codepen.io/Ash/pen/vkpxE",children:"CodePen"}),"."]}),(0,n.jsx)(e.p,{children:"This seems to work pretty well. The resulting CSS is not too complicated or bloated, and the HTML looks nice. I started to build out a project following this approach, but quickly changed my tactics and returned to stacking modifiers. I realised it felt wrong to me and kinda like an abuse of CSS rather than a stroke of ingenuity. I feel like all elements of the same type should share a class, and this approach breaks that."}),(0,n.jsx)(e.p,{children:"I also encountered some problems when I added JavaScript. Manipulating modifiers is harder because we can no longer simply add and remove classes; we must manipulate the class name itself. Theoretically it'd be possible to create a helper that interacts with classes defined in this way - manipulating the class string to find, add and remove modifiers - but we already know that DOM manipulation can poorly affect performance, without adding this complication."}),(0,n.jsx)(e.p,{children:"My conclusion is that pursuing this class name simplification isn't worth it. It's an unnecessary complication for little benefit other than occasionally cleaner looking (though possibly more confusing HTML). If you're using an HTML preprocessor such as Jade or HAML, perhaps a compilation step could interpolate the shortened class names into multiple classes. I think that'd be the most sensible way of achieving this."})]})}e.default=function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,c.ah)(),s.components);return e?(0,n.jsx)(e,Object.assign({},s,{children:(0,n.jsx)(t,s)})):t(s)}}},function(s){s.O(0,[774,737],function(){return s(s.s=3794)}),_N_E=s.O()}]);