[{"1":2,"62":-5,"63":-5},"loaderData",{"3":4,"19":20,"61":-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,"51":52},"posts",[23,41],{"7":24,"27":28,"13":29,"30":31,"32":33,"34":35,"15":39},{"9":25,"11":26},"2018-05-24-how-i-use-npm","/home/runner/work/zenobi.us/zenobi.us/pkgs/content/data/posts/2018-05-24-how-i-use-npm.md","template","article","How I use NPM","date","2018-05-24T00:00:00.000Z","stage","published","tags",[36,37,38],"nodejs","architecture","npm",{"17":40},"var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var r in e)c(l,r,{get:e[r],enumerable:!0})},t=(l,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(l,o)&&o!==r&&c(l,o,{get:()=>e[o],enumerable:!(i=F(e,o))||i.enumerable});return l};var E=(l,e,r)=>(r=l!=null?p(y(l)):{},t(e||!l||!l.__esModule?c(r,\"default\",{value:l,enumerable:!0}):r,l)),k=l=>t(c({},\"__esModule\",{value:!0}),l);var s=g((x,a)=>{a.exports=_jsx_runtime});var v={};f(v,{default:()=>h,frontmatter:()=>b});var n=E(s()),b={template:\"article\",title:\"How I use NPM\",date:\"2018-05-24\",stage:\"published\",tags:[\"nodejs\",\"architecture\",\"npm\"]};function d(l){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",figure:\"figure\",h2:\"h2\",li:\"li\",p:\"p\",pre:\"pre\",section:\"section\",span:\"span\",ul:\"ul\",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\"Npm lifecycle scripts are great:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[\"it exposes all the keys in a \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" as environment variables to child processes\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"by default running an entrypoint will also attempt to run a \",(0,n.jsx)(e.code,{children:\"pre*\"}),\" and a \",(0,n.jsx)(e.code,{children:\"post*\"}),\" commands.\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"Using \",(0,n.jsx)(e.code,{children:\"onchange\"}),\", \",(0,n.jsx)(e.code,{children:\"npm-run-all\"}),\", \",(0,n.jsx)(e.code,{children:\"npx\"}),\", \",(0,n.jsx)(e.code,{children:\"cross-var\"}),\", \",(0,n.jsx)(e.code,{children:\"cross-env\"}),\" can help automate many typical project tasks.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"the keys can actually contain mostly whatever characters you want, below you see I use it to mark out groups of commands.\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example of what I've used in the past:\"}),`\n`,(0,n.jsx)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"json\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(e.code,{\"data-language\":\"json\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"dev\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:dev\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"build\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:build\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"start\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:start\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"generate\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:generate\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"yarn:rebuild\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- yarn\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"// [ci] commands\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"where docker volume mounting is not possible\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"ci:generate\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- build npm run container:nuxt:generate\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"// [test] commands\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"test:unit\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"echo 0\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"test:integration\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"echo 0\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"// [container] commands\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"container:nuxt:dev\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"nuxt --spa --config-file ./project/nuxt.config.js\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"container:nuxt:build\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"nuxt build --universal --config-file ./project/nuxt.config.js\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"container:nuxt:generate\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"nuxt generate --spa --config-file ./project/nuxt.config.js\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"container:nuxt:start\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"nuxt start --spa --config-file ./project/nuxt.config.js\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"// [workstation] Release Commands\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:checkoutStatic\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"git checkout ./docs\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:cleanStatic\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"git clean -f ./docs\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:pull\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"git pull\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:check\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"git diff --check && git diff --exit-code && git diff --cached --exit-code\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:publish\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npx npm-run-all --serial git:add git:commit-amend git:push-origin\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:add\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"git add .\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:commit-amend\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"git commit --amend --no-edit\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"git:push-origin\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"git push --follow-tags\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"prerelease\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npx npm-run-all --serial git:checkoutStatic git:cleanStatic git:pull\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"release\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npx standard-version\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"postrelease\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npx npm-run-all --serial generate git:publish\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"// [workstation] Docker Commands\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"docker:run\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"docker-compose run --service-ports --rm\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"docker:shell\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- build /bin/sh\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"docker:exec\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- build\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"docker:build\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- make docker-make --no-push\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"docker:push\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- make docker-make\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"predocker:release\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run git:pull\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"docker:release\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npx standard-version\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"postdocker:release\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run git:publish\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsx)(e.span,{\"data-line\":\"\",children:\" \"}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"// [container] Release Commands\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"container:release\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npx run-s release:build-frontend release:publish-styleguide\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"container:release:changelog\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"conventional-changelog --infile=./project/CHANGELOG.md\"'})]})]})})}),`\n`,(0,n.jsx)(e.p,{children:\"That's a lot there and it covers the majority of my work flow, so lets go over the groups of commands below.\"}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"general-entrypoint\",children:\"General Entrypoint\"}),(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`$ npm run dev\n$ npm run build\n$ npm run start\n$ npm run generate\n`})}),(0,n.jsx)(e.p,{children:\"Usually we're just compiling the source code in development mode or in production mode, so here these lines are relevant:\"}),(0,n.jsx)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:(0,n.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"json\",\"data-theme\":\"vesper\",children:(0,n.jsxs)(e.code,{\"data-language\":\"json\",\"data-theme\":\"vesper\",style:{display:\"grid\"},children:[(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"dev\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:dev\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"build\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:build\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"start\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:start\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]}),`\n`,(0,n.jsxs)(e.span,{\"data-line\":\"\",children:[(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:' \"generate\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\": \"}),(0,n.jsx)(e.span,{style:{color:\"#99FFE4\"},children:'\"npm run docker:run -- tool npm run container:nuxt:generate\"'}),(0,n.jsx)(e.span,{style:{color:\"#FFF\"},children:\",\"})]})]})})}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"dev\"}),\" will first call \",(0,n.jsx)(e.code,{children:\"docker:run\"}),\" supplying arguments \",(0,n.jsx)(e.code,{children:\"tool npm run container:nuxt:dev\"}),\".\"]}),(0,n.jsxs)(e.p,{children:[\"These are really just fed into \",(0,n.jsx)(e.code,{children:\"docker-compose\"}),\". So we're running the \",(0,n.jsx)(e.code,{children:\"tool\"}),\" service defined in \",(0,n.jsx)(e.code,{children:\"docker-compose.yml\"}),\" and then telling docker-compose to run \",(0,n.jsx)(e.code,{children:\"npm run container:nuxt:dev\"}),\" from within the container. Any commands meant to be run within a docker container are labeled as such.\"]}),(0,n.jsx)(e.p,{children:\"So the chain is :\"}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"npm run dev\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"npm run docker:run\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"docker-compose run ... tool npm run container:nuxt:dev\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"nuxt --spa --config-file ./project/nuxt-config.js\"})}),`\n`]}),(0,n.jsxs)(e.p,{children:[\"One thing you'll notice is that I point at the configuration file in the \",(0,n.jsx)(e.code,{children:\"project\"}),\" directory. This doesn't exist here, but the \",(0,n.jsx)(e.code,{children:\"docker-compose.yml\"}),\" describes volumes that mount the project directory to that path. I do this because of the nature of file vs directory docker volumes. File volumes don't reliably get updated back to the host, especially if it gets removed in the container and rebuilt. So mounting a folder at a place and operating on files within is more reliable and flexible.\"]})]}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"rebuild-yarn-offline-cache\",children:\"Rebuild Yarn Offline Cache\"}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\"$ npm run yarn:rebuild\"})}),(0,n.jsxs)(e.p,{children:[\"To reliably build the docker image with the right node modules, we need to maintain an offline cache of them. This command just launches the \",(0,n.jsx)(e.code,{children:\"yarn\"}),\" docker-compose service, which is hard coded to yarn install the modules in order to obtain an offline copy of the modules. This technique only retains the offline cache, everything else is thrown away, because creating the container later is what we keep.\"]})]}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"release-commands\",children:\"Release Commands\"}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\"$ npm run release\"})}),(0,n.jsxs)(e.p,{children:[\"This whole chain starts off with \",(0,n.jsx)(e.a,{href:\"https://www.npmjs.com/package/standard-version\",children:\"standard version\"}),\", a much better alternative to just \",(0,n.jsx)(e.code,{children:\"npm version patch|minor|major\"}),\".\"]}),(0,n.jsx)(e.p,{children:'The idea with this chain, is that you need to automate all the \"git paperwork\" when making a release.'}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"conflicts need to be checked for,\"}),`\n`,(0,n.jsx)(e.li,{children:\"dist output needs to be reset to remote state avoid conflicts before pulling.\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"version in \",(0,n.jsx)(e.code,{children:\"package.json\"}),\" needs to be made.\"]}),`\n`,(0,n.jsx)(e.li,{children:\"a git tag needs to be made.\"}),`\n`,(0,n.jsx)(e.li,{children:\"changelog needs to be generated.\"}),`\n`,(0,n.jsx)(e.li,{children:\"a build needs to be made.\"}),`\n`,(0,n.jsx)(e.li,{children:\"you might also want to run tests here.\"}),`\n`,(0,n.jsx)(e.li,{children:\"new files need to be commited.\"}),`\n`,(0,n.jsx)(e.li,{children:\"and finally new commits pushed.\"}),`\n`]}),(0,n.jsxs)(e.p,{children:[\"So running \",(0,n.jsx)(e.code,{children:\"$ npm run release\"}),\" triggers the following chain:\"]}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"prerelease\"}),\" is triggered first\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"git:check\"}),\" \\u{1F448} this one is a nice trick\"]}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"git:checkoutStatic\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"git:cleanStatic\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"git:pull\"})}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[\"then \",(0,n.jsx)(e.code,{children:\"release\"}),\" is run\"]}),`\n`,(0,n.jsxs)(e.li,{children:[\"then \",(0,n.jsx)(e.code,{children:\"postrelease\"}),\" is triggered.\",`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"generate\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"docker:run\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"container:nuxt:generate\"})}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"git:publish\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"git:add\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"git:commit-amend\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"git:push-origin\"})}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),`\n`]}),(0,n.jsx)(e.p,{children:\"Something I want to improve here is that very early on bail if we're running this on the incorrect git branch:\"}),(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`...\n\"git:only-master\": \"npx git-branch-require master\",\n...\n`})}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"git-require-branch\"}),\" doesn't exist (yet), so if you make it... it needs to take a branch name amd return an exit code of 0 or 1 to indicate success or failure. We wan't this because the npm run process will stop the whole chain when it receives an exit code of 1.\"]})]}),`\n`,(0,n.jsxs)(e.section,{children:[(0,n.jsx)(e.h2,{id:\"docker-commands\",children:\"Docker Commands\"}),(0,n.jsx)(e.p,{children:\"I've learn through much pain and anguish some key lessons:\"}),(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Focus on your strengths: don't run your own email server.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Backups: always make your dependencies available offline.\"}),`\n`,(0,n.jsx)(e.li,{children:\"Sandbox Environment: ensure it's the same every time it's used.\"}),`\n`]}),(0,n.jsx)(e.p,{children:\"I encountered that last point early back when I started python development, where Ubuntu utilised python libraries for it's operating system which also meant they were available when I ran my own python programs. This lead to unreliable code because I couldn't control the versions of those libraries, and when I tried installing the ones I needed it overwrote the system versions. Then some people came up with Virtualenv, which just like npm and node_modules made python packages installed and resolved locally.\"}),(0,n.jsx)(e.p,{children:\"But when I started nodejs development, my colleagues used a mixture of windows, macosx and me on linux. As you can imagine just getting nodejs installed was a error prone experience.\"}),(0,n.jsx)(e.p,{children:'After some time I explored using Docker to containerise our frontend development environment, so that now instead of worrying about what version of node or node_modules we needed (and all the other requirements that randomly pop up), we said \"just install docker and any version of node that has npx (8+)\".'}),(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsx)(e.p,{children:`[!NOTE]\nRetrospective 2024`}),`\n`,(0,n.jsxs)(e.p,{children:[\"I've moved on from using \",(0,n.jsx)(e.code,{children:\"package.json#scripts\"}),` . You should definitely do the same.\nSomething like a `,(0,n.jsx)(e.a,{href:\"https://github.com/casey/just\",children:\"Justfile\"}),\" is perfect.\"]}),`\n`]})]})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}return k(v);})();\n;return Component;",{"7":42,"27":28,"13":45,"30":46,"32":33,"34":47,"15":49},{"9":43,"11":44},"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","BEM and the case for simplicity","2018-10-03T00:00:00.000Z",[48,37],"css",{"17":50},"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":53,"13":56,"57":58,"15":59},{"9":54,"11":55},"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":60},"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"]