[{"1":2,"51":-5,"52":-5},"loaderData",{"3":4,"19":20,"50":-5},"root",{"5":6},"footer",{"7":8,"13":14,"15":16},"metadata",{"9":10,"11":12},"slug","me/footer","filepath","/home/runner/work/zenobi.us/zenobi.us/pkgs/content/data/me/footer.mdx","title","Footer","content",{"17":18},"compiled","var Component=(()=>{var f=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var j=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),M=(t,n)=>{for(var e in n)r(t,e,{get:n[e],enumerable:!0})},i=(t,n,e,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of p(n))!d.call(t,o)&&o!==e&&r(t,o,{get:()=>n[o],enumerable:!(s=l(n,o))||s.enumerable});return t};var h=(t,n,e)=>(e=t!=null?f(_(t)):{},i(n||!t||!t.__esModule?r(e,\"default\",{value:t,enumerable:!0}):e,t)),C=t=>i(r({},\"__esModule\",{value:!0}),t);var m=j((g,u)=>{u.exports=_jsx_runtime});var X={};M(X,{default:()=>x,frontmatter:()=>D});var c=h(m()),D={title:\"Footer\"};function a(t){let n={p:\"p\",...t.components};return(0,c.jsx)(n.p,{children:\"I'm Zenobius, A fullstack engineer.\"})}function x(t={}){let{wrapper:n}=t.components||{};return n?(0,c.jsx)(n,{...t,children:(0,c.jsx)(a,{...t})}):a(t)}return C(X);})();\n;return Component;","routes/b.tags.$tag._index",{"21":22,"40":41},"posts",[23],{"7":24,"27":28,"13":29,"30":31,"32":33,"34":35,"15":38},{"9":25,"11":26},"2018-10-03-bem-and-the-case-for-simplicity","/home/runner/work/zenobi.us/zenobi.us/pkgs/content/data/posts/2018-10-03-bem-and-the-case-for-simplicity.md","template","article","BEM and the case for simplicity","date","2018-10-03T00:00:00.000Z","stage","published","tags",[36,37],"css","architecture",{"17":39},"var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),g=(e,l)=>{for(var r in l)a(e,r,{get:l[r],enumerable:!0})},o=(e,l,r,c)=>{if(l&&typeof l==\"object\"||typeof l==\"function\")for(let s of y(l))!m.call(e,s)&&s!==r&&a(e,s,{get:()=>l[s],enumerable:!(c=F(l,s))||c.enumerable});return e};var f=(e,l,r)=>(r=e!=null?h(A(e)):{},o(l||!e||!e.__esModule?a(r,\"default\",{value:e,enumerable:!0}):r,e)),C=e=>o(a({},\"__esModule\",{value:!0}),e);var d=u((x,i)=>{i.exports=_jsx_runtime});var _={};g(_,{default:()=>p,frontmatter:()=>E});var n=f(d()),E={template:\"article\",title:\"BEM and the case for simplicity\",date:\"2018-10-03\",stage:\"published\",tags:[\"css\",\"architecture\"]};function t(e){let l={a:\"a\",code:\"code\",figure:\"figure\",h2:\"h2\",h3:\"h3\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",section:\"section\",span:\"span\",ul:\"ul\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(l.section,{children:[(0,n.jsx)(l.h2,{id:\"where-we-came-from\",children:\"Where we came from\"}),(0,n.jsx)(l.p,{children:\"You have a deadline, you need to deliver something approximating the design before you fully implement even a part of the design.\"}),(0,n.jsx)(l.p,{children:\"So you'd use a framework that creates css... usually something like Foundation or Bootstrap.\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"html\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"html\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"<\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"div\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" class\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"hero row\"'}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"div\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" class\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"columns small-12 medium-4 hero-image\"'}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"img\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" src\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"/static/images/hero-image.png\"'}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" />\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"div\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" class\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"columns small-12 medium-8 hero-content\"'}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"h3\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"People don't buy what you do; they buy why you do it.\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"p\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" We are drawn to leaders and organizations that are good at communicating\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" what they believe. Their ability to make us feel like we belong, to make\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" us feel special, safe and not alone is part of what gives them the ability\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" to inspire us.\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"\"})]})]})})}),(0,n.jsx)(l.p,{children:\"Great. It gets delivered and people get off your back.\"}),(0,n.jsx)(l.p,{children:\"Now you begin implementing the design. You rationalise that your framework has structured your page layout so all you need to do is fill in with colours and font sizes.\"}),(0,n.jsx)(l.p,{children:\"So you end up with something like:\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"css\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"css\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".hero\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" background-color\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" $\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"lightblue\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".hero-image\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" margin\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" 0\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" auto\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".hero-content\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" padding\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" 1rem\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".body.home-page\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" .hero\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" background-color\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" $\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"lightyellow\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".body.home-page\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" .hero\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" .hero-image\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" margin-top\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" 10rem\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})}),(0,n.jsx)(l.p,{children:\"It works. you ship it. deadline is near or just passed by.\"}),(0,n.jsx)(l.p,{children:\"You rationlise the following choices:\"}),(0,n.jsxs)(l.ol,{children:[`\n`,(0,n.jsx)(l.li,{children:\"atomised classes so client requests to change\"}),`\n`]})]}),`\n`,(0,n.jsxs)(l.section,{children:[(0,n.jsx)(l.h2,{id:\"bem\",children:\"BEM\"}),(0,n.jsxs)(l.p,{children:[\"You've probably seen it around. \",(0,n.jsx)(l.code,{children:\".block__element--modifier\"}),\".\"]}),(0,n.jsxs)(l.p,{children:[\"It \",(0,n.jsx)(l.code,{children:\".Has_Various-Styles\"}),\".\"]}),(0,n.jsx)(l.p,{children:\"It also proposes a re-usable component way of controlling the css cascade.\"}),(0,n.jsxs)(l.section,{children:[(0,n.jsx)(l.h3,{id:\"your-component\",children:\"Your component\"}),(0,n.jsx)(l.p,{children:\"A simple example of what we typically implement in our forms.\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"jsx\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"jsx\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"export\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" default\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" function\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" TextFormField\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" ({\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" id \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" cuid\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(),\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" label,\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" name,\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" type \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'text'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" value\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" }) {\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" classnames\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" =\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" (\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"...\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"parts) \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=>\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" parts.\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"filter\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(part \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=>\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" !!\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"part).\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"join\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"' '\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\")\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"return\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" (\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"div\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"classnames\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'form-field'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'form-field--text'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" type \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `form-field--${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"type\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}`\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" )\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}>\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"input\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"form-field__input\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"type\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" id={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"id\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" name={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"name\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" required\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" value={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"value\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}>\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"label\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"form-field__label\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" htmlFor={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"id\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}>\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" {\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"label\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" );\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})}),(0,n.jsx)(l.p,{children:\"And reusing this amounts to:\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"jsx\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"jsx\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"import\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" FormField \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"from\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'component-library/form-field'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"import\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" FormAction \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"from\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'component-library/form-action'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"export\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" default\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" class\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" App\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" extends\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" React\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".Component {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" render\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"() {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" (\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"form\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" onSubmit={this\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".handleSubmit\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" >\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"FormField\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" id={\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"`login-form-${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"cuid\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"()\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}`\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" name=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"email\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" value={this\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".state.email\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"email\"'})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" />\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"FormField\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" id={\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"`login-form-${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"cuid\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"()\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}`\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" name=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"password\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" value={this\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".state.password\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"password\"'})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" />\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"div\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"form-field-group form-field-group--horizontal login-form__form-field-group\"'}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"FormAction\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"submit\"'}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"login\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" );\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})}),(0,n.jsx)(l.p,{children:\"Then to style it you need to write:\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"css\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"css\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" .form-field\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" margin-bottom\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" 1rem\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" .form-field__input\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" border-color\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" grey\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" .form-field__label\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" color\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" grey\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})}),(0,n.jsx)(l.p,{children:\"Instead lets use BEM mixes:\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"jsx\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"jsx\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"export\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" default\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" function\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" TextFormField\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" ({\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" id \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" cuid\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(),\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" label,\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" name,\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" classNames,\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" mixClassName,\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" type \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'text'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" value\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" }) {\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" const\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" classnames\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" =\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" (\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"...\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"parts) \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=>\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" parts.\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"filter\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(part \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"=>\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" !!\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"part).\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"join\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"' '\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\")\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" (\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"div\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"classnames\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" TextFormField.CONST__BASE_CLASSNAME,\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"TextFormField\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\".\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"CONST__BASE_CLASSNAME\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}--text`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" type \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"TextFormField\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\".\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"CONST__BASE_CLASSNAME\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}--${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"type\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" mixClassName,\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" mixClassName \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"mixClassName\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}--text`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" mixClassName \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" type \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"mixClassName\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}--${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"type\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" classNames \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" classNames\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" )\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}>\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"input\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"classnames\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"TextFormField\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\".\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"CONST__BASE_CLASSNAME\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}__input`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" mixClassName \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"mixClassName\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}__input`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" )\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"type\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" id={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"id\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" name={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"name\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" required\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" value={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"value\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}>\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"label\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"classnames\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"(\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"TextFormField\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\".\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"CONST__BASE_CLASSNAME\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}__label`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" mixClassName \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"&&\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" `${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"mixClassName\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}__label`\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" )\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" htmlFor={\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"id\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}>\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" {\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"label\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" );\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"TextFormField.CONST__BASE_CLASSNAME = 'form-field';\"})})]})})}),(0,n.jsx)(l.p,{children:\"Now our app will look like :\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"jsx\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"jsx\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"import\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" FormField \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"from\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'component-library/form-field'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"import\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" FormAction \"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"from\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\" 'component-library/form-action'\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"export\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" default\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" class\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" App\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" extends\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" React\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".Component {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" render\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"() {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" return\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" (\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"form\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" className=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" onSubmit={this\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".handleSubmit\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" >\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"FormField\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" mixClassName=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form__form-field\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" classNames=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form__email-form-field\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" id={\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"`login-form-${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"cuid\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"()\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}`\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" name=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"email\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" value={this\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".state.email\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"email\"'})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" />\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"FormField\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" mixClassName=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form__form-field\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" classNames=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form__password-form-field\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" id={\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"`login-form-${\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"cuid\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"()\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:\"}`\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" name=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"password\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" value={this\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\".state.password\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\"}\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"password\"'})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" />\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"div\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" class=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"form-field-group form-field-group--horizontal login-form__form-field-group\"'}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\">\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" <\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\"FormAction\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" mixClassName=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form__form-action\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" classNames=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"login-form__submit-form-action\"'})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" type=\"}),(0,n.jsx)(l.span,{style:{color:\"#99FFE4\"},children:'\"submit\"'})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" >\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" login\"})}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\" \"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" );\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" }\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})}),(0,n.jsx)(l.p,{children:\"Now our css can minimise the specificity score of our css.\"}),(0,n.jsx)(l.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(l.pre,{tabIndex:\"0\",\"data-language\":\"css\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(l.code,{\"data-language\":\"css\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" border\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" 1px\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" dashed\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" silver\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form__form-field\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" margin-bottom\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" 1rem\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form__form-field__input\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" border\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" 1px\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" dashed\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" silver\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form__form-field__label\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" color\"}),(0,n.jsx)(l.span,{style:{color:\"#A0A0A0\"},children:\":\"}),(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\" darkgrey\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\";\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form__email-form-field\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#8B8B8B94\"},children:\" /* some inspiring css */\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form__password-form-field\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#8B8B8B94\"},children:\" /* some inspiring css */\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(l.span,{\"data-line\":\"\",children:[(0,n.jsx)(l.span,{style:{color:\"#FFC799\"},children:\".login-form__submit-form-action\"}),(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\" {\"})]}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#8B8B8B94\"},children:\" /* some inspiring css */\"})}),`\n`,(0,n.jsx)(l.span,{\"data-line\":\"\",children:(0,n.jsx)(l.span,{style:{color:\"#FFF\"},children:\"}\"})})]})})})]})]}),`\n`,(0,n.jsxs)(l.section,{children:[(0,n.jsx)(l.h2,{id:\"caveats\",children:\"Caveats\"}),(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsx)(l.li,{children:\"It's an approach to minimising impact on the maintenance story, where time is more critical than initial development phase.\"}),`\n`,(0,n.jsxs)(l.li,{children:[\"Changes to particular implementations to \",(0,n.jsx)(l.code,{children:\"login-form\"}),\" can be quarantined from each other.\"]}),`\n`]})]}),`\n`,(0,n.jsxs)(l.section,{children:[(0,n.jsx)(l.h2,{id:\"further-reading\",children:\"Further Reading\"}),(0,n.jsxs)(l.ul,{children:[`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://martinwolf.org/before-2018/blog/2014/05/making-use-of-the-bem-naming-system/\",children:\"https://martinwolf.org/before-2018/blog/2014/05/making-use-of-the-bem-naming-system/\"})}),`\n`,(0,n.jsx)(l.li,{children:(0,n.jsx)(l.a,{href:\"https://davidwalsh.name/designing-simplicity\",children:\"https://davidwalsh.name/designing-simplicity\"})}),`\n`]})]})]})}function p(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}return C(_);})();\n;return Component;","siteData",{"7":42,"13":45,"46":47,"15":48},{"9":43,"11":44},"sitedata/main","/home/runner/work/zenobi.us/zenobi.us/pkgs/content/data/sitedata/main.md","Zenobius","description","A product focused fullstack engineer based in Australia.",{"17":49},"var Component=(()=>{var m=Object.create;var a=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of l(e))!_.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=x(e,o))||s.enumerable});return t};var M=(t,e,n)=>(n=t!=null?m(p(t)):{},i(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>i(a({},\"__esModule\",{value:!0}),t);var c=g((F,u)=>{u.exports=_jsx_runtime});var C={};j(C,{default:()=>f,frontmatter:()=>A});var r=M(c()),A={title:\"Zenobius\",description:\"A product focused fullstack engineer based in Australia.\"};function d(t){return(0,r.jsx)(r.Fragment,{})}function f(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(d,{...t})}):d(t)}return b(C);})();\n;return Component;","routes/b","actionData","errors"]