Upload index.html with huggingface_hub
Browse files- index.html +5 -6
index.html
CHANGED
|
@@ -1,6 +1,5 @@
|
|
| 1 |
<!doctype html><html lang="en"><meta charset="utf-8">
|
| 2 |
<meta name="viewport" content="width=device-width,initial-scale=1">
|
| 3 |
-
<script defer data-auto-init src="https://cdn.jsdelivr.net/npm/@polar-sh/checkout@latest/dist/embed.global.js"></script>
|
| 4 |
<title>BEM Class Auditor and SCSS Skeleton Extractor for HTML</title>
|
| 5 |
<meta name="description" content="16 BEM naming rules read the HTML file you have open, and 22 markup and SCSS skeletons write the stylesheet shell — the class names get fixed before the pull request comes back for them.">
|
| 6 |
<style>
|
|
@@ -37,7 +36,7 @@ td.n{width:64px;font:13px ui-monospace,monospace;opacity:.7}
|
|
| 37 |
<textarea id="src" placeholder="Paste the file here"></textarea>
|
| 38 |
<button id="go">Check</button>
|
| 39 |
<div id="out"></div>
|
| 40 |
-
<div class="next"><h2>The same 16 rules, across the whole repository</h2><ul><li><b>Every HTML file in the repository</b>, not only the one on screen</li><li><b>A findings file you attach to the pull request</b> — CSV, JSON or HTML</li></ul><p class="buy"><a href="https://
|
| 41 |
</div>
|
| 42 |
<script>
|
| 43 |
var RULES=[{"pattern": "class=\"[^\"]*\\b[a-z][a-z0-9]*[A-Z]", "flags": "m", "message": "camelCase class name. BEM names are lower kebab-case: cardTitle becomes card-title."}, {"pattern": "class=\"[^\"]*\\b[a-z0-9-]+_(?!_)[a-z0-9-]+", "flags": "m", "message": "The element separator is exactly two underscores: card_title becomes card__title."}, {"pattern": "\\b[a-z0-9-]+__[a-z0-9-]+__[a-z0-9-]+", "flags": "m", "message": "BEM has no element of an element. card__body__title becomes card__body-title, or a block of its own."}, {"pattern": "\\b[a-z0-9-]+--[a-z0-9-]+__", "flags": "m", "message": "The modifier comes last. card--wide__title becomes card__title with card__title--wide."}, {"pattern": "class=\"\\s*[a-z0-9-]+--[a-z0-9-]+\\s*\"", "flags": "m", "message": "A modifier stands alone here. It must ride next to its base class: class=\"card card--wide\"."}, {"pattern": "CLASS=", "flags": "m", "message": "Attribute name in capitals. The extractor reads a lower-case class= attribute.", "fix": "class="}, {"pattern": "class=\"\\s+", "flags": "m", "message": "Space directly after the opening quote. It becomes an empty selector in the extracted stylesheet.", "fix": "class=\""}, {"pattern": "\\bjs_", "flags": "m", "message": "Scripting hook written with an underscore. Use a hyphen: js_toggle becomes js-toggle.", "fix": "js-"}, {"pattern": "class=\"[^\"]*\\b([a-z0-9_-]{3,})\\b[^\"]*\\b\\1\\b", "flags": "m", "message": "The same class appears twice in one attribute, so the extracted stylesheet would carry the rule twice."}, {"pattern": "class=\"[^\"]*\\b(?:red|blue|green|big|small|left|right|center|bold)\\b", "flags": "i", "message": "Presentational class name. Name the role, not the paint: card__title--red becomes card__title--alert."}, {"pattern": "class=\"[^\"]*\\b(?:test|tmp|temp|foo|bar|div1|box1|new|old|copy)\\b", "flags": "i", "message": "Placeholder class name still in the markup. It will land in the stylesheet as a real selector."}, {"pattern": "class=\"[^\"]*(?:\\{\\{|\\{%|<\\?|\\$\\{)", "flags": "m", "message": "Class name built by a template expression. The extractor cannot resolve it; write the static block part as a class of its own."}, {"pattern": "class=\"[^\"]*(?:\\s+[^\\s\"]+){7}\\s*\"", "flags": "m", "message": "Eight or more classes on one element. The block interface is being replaced by loose utilities."}, {"pattern": "\\b[a-z0-9]+(?:-[a-z0-9]+){4,}(?:__|--|\\s|\")", "flags": "m", "message": "Five or more words in one BEM name. Split the block; the name is carrying the whole page path."}, {"pattern": "<[a-z][a-z0-9-]*[^>]*\\sstyle=\"", "flags": "i", "message": "Inline style on this element. That declaration never reaches the extracted stylesheet, so the block ends up styled in two places."}, {"pattern": "class='[^']*'", "flags": "m", "message": "Class attribute in single quotes. The extractor reads double-quoted attributes."}];
|
|
@@ -59,12 +58,12 @@ document.getElementById('go').onclick=function(){
|
|
| 59 |
</html>
|
| 60 |
|
| 61 |
|
| 62 |
-
<section data-yj-install="free" style="margin:2rem auto 1rem;max-width:46rem;padding:1.25rem 1.25rem;border:1px solid #cfe3d6;border-radius:12px;background:#f6fbf8;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .4rem;font-size:1.2rem">Install free</h2><p style="margin:0 0 .8rem;color:#41505f">Free for the file open in your editor - no key, no limit. The workspace sweep and the report ask for a key.</p><a href="https://www.npmjs.com/package/@readystack/bem-class-extractor-html" rel="noopener" data-yj-install-door="npm" onclick="try{navigator.sendBeacon('/api/ev',new Blob([JSON.stringify({t:'install',slug:'bem-class-extractor-html',src:'npm',path:location.pathname})],{type:'application/json'}))}catch(e){}" style="display:inline-block;margin:0 .5rem .5rem 0;padding:.6rem 1rem;border-radius:8px;background:#0f7b3f;color:#fff;text-decoration:none;font-weight:600">npm</a><a href="https://www.npmjs.com/package/@readystack/bem-class-extractor-html" rel="noopener" data-yj-install-door="mcp" onclick="try{navigator.sendBeacon('/api/ev',new Blob([JSON.stringify({t:'install',slug:'bem-class-extractor-html',src:'mcp',path:location.pathname})],{type:'application/json'}))}catch(e){}" style="display:inline-block;margin:0 .5rem .5rem 0;padding:.6rem 1rem;border-radius:8px;background:#0f7b3f;color:#fff;text-decoration:none;font-weight:600">MCP server (npx)</a><a href="https://hub.docker.com/r/getreadystack/bem-class-extractor-html" rel="noopener" data-yj-install-door="docker" onclick="try{navigator.sendBeacon('/api/ev',new Blob([JSON.stringify({t:'install',slug:'bem-class-extractor-html',src:'docker',path:location.pathname})],{type:'application/json'}))}catch(e){}" style="display:inline-block;margin:0 .5rem .5rem 0;padding:.6rem 1rem;border-radius:8px;background:#0f7b3f;color:#fff;text-decoration:none;font-weight:600">Docker Hub</a><pre style="margin:.5rem 0 0;padding:.6rem .8rem;background:#f3f5f8;border-radius:8px;font-size:.9rem;overflow:auto">
|
| 63 |
-
npx @readystack/bem-class-extractor-html
|
| 64 |
-
|
| 65 |
<section data-yj-alert="rule" style="margin:1rem auto 1.5rem;max-width:46rem;padding:1.1rem 1.25rem;border:1px solid #d9dee6;border-radius:12px;background:#fbfcfd;font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif"><b style="font-size:1.05rem">Get the full rule table as a PDF</b><div style="opacity:.78;margin:.35rem 0 .8rem">All 16 rules BEM Class Auditor for HTML and SCSS checks, each with its source and date, on printable pages you can hand to your team or auditor. We email it now, and once more only if a rule changes. No newsletter.</div><div style="display:flex;gap:8px;flex-wrap:wrap"><input id="yjae" type="email" placeholder="you@example.com" style="flex:1;min-width:210px;padding:11px 13px;border:1px solid rgba(140,150,165,.34);border-radius:8px;background:#fff;color:inherit"><button id="yjab" style="padding:11px 18px;border-radius:8px;border:0;cursor:pointer;background:#0f7b3f;color:#fff;font:600 15px system-ui,sans-serif">Email me the PDF</button></div><div id="yjao" hidden style="margin-top:.6rem;color:#0f7b3f">Sent. It arrives within the hour - check spam too.</div><script>(function(){var b=document.getElementById("yjab"),e=document.getElementById("yjae");if(!b||!e)return;b.addEventListener("click",function(){var v=e.value.trim();if(!/.+@.+\..+/.test(v))return;try{localStorage.setItem("yj_em","1");}catch(_){}fetch(location.origin+"/api/subscribe",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:v,slug:"bem-class-extractor-html",lang:"en",source:"rule_table"+((b.closest&&b.closest("section")&&b.closest("section").getAttribute("data-yj-moved"))?"_at_result":"")})}).then(function(r){var o=document.getElementById("yjao");o.hidden=false;if(!r.ok){o.textContent="Could not save - please try again.";}}).catch(function(){var o=document.getElementById("yjao");o.hidden=false;o.textContent="Could not save - please try again.";});});})();</script><script>(function(){var e=document.getElementById("yjae"),s=e&&e.closest?e.closest("section"):null,o=document.getElementById("out");if(!s||!o)return;var d=false;function mv(ev){if(d)return;if(ev&&ev.target&&s.contains(ev.target))return;d=true;var b=o;while(b.parentNode&&b.parentNode!==document.body&&b.parentNode.tagName!=="MAIN"&&b.parentNode.tagName!=="ARTICLE")b=b.parentNode;if(!b.parentNode||b===s||b.contains(s))return;try{b.parentNode.insertBefore(s,b.nextSibling);s.setAttribute("data-yj-moved","1");}catch(_){}}document.addEventListener("input",mv,true);document.addEventListener("change",mv,true);})();</script></section>
|
| 66 |
|
| 67 |
-
<section data-yj-cta="paid" style="margin:3rem auto;max-width:46rem;padding:1.5rem 1.25rem;border:1px solid #d8dee9;border-radius:12px;background:#fbfcfe;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .5rem;font-size:1.25rem">Get the complete version <span class="yj-price">$39</span></h2><p style="margin:.25rem 0 1rem;color:#41505f">This page is the working piece. The full pack has everything below.</p><p style="margin:0 0 1rem;color:#41505f">16 BEM naming rules read the HTML file you have open and 22 markup and SCSS skeletons write the stylesheet shell, so the class names get fixed before the pull request comes back for them.</p><p style="margin:0 0 1rem;color:#5b6b7c;font-size:.94rem">$73 an hour, the 2026 average freelance front-end developer rate (arc.dev, contractrates.fyi); a naming pass over a themed repo is at least one of those hours, and US mid-level contract rates run $89-$140.</p><a href="https://
|
| 68 |
<!--yj-share-s101--><div style="margin:28px 0 8px;text-align:center"><button id="yjcp" type="button" style="font:inherit;padding:10px 18px;border:1px solid #8884;border-radius:10px;background:transparent;cursor:pointer">Copy link</button><button id="yjimg" type="button" style="font:inherit;padding:10px 18px;margin-left:8px;border:1px solid #8884;border-radius:10px;background:transparent;cursor:pointer">Save result as image</button></div><script>(function(){var b=document.getElementById("yjimg");if(!b)return;b.addEventListener("click",function(){var o=document.getElementById("out");var txt=(o&&(o.innerText||o.textContent)||"").trim();if(!txt){b.textContent="(no result yet)";setTimeout(function(){b.textContent="Save result as image";},1500);return;}var lines=txt.split(String.fromCharCode(10)).filter(function(x){return x.trim();}).slice(0,10);var W=1200,P=56,c=document.createElement("canvas");c.width=W;var lh=38,H=P*2+70+lines.length*lh+60;c.height=H;var x=c.getContext("2d");x.fillStyle="#1a1512";x.fillRect(0,0,W,H);x.fillStyle="#f3e9d2";x.font="600 34px system-ui,Segoe UI,Arial";var t=(document.title||"").split("|")[0].trim();x.fillText(t.slice(0,54),P,P+34);x.font="22px ui-monospace,Menlo,Consolas,monospace";x.fillStyle="#e8dcc4";for(var i=0;i<lines.length;i++){x.fillText(lines[i].slice(0,88),P,P+70+i*lh+22);}x.font="600 22px system-ui,Segoe UI,Arial";x.fillStyle="#c9a227";var d=location.hostname.replace("www.","");x.fillText(d,W-P-x.measureText(d).width,H-P+6);c.toBlob(function(bl){var u=URL.createObjectURL(bl),a=document.createElement("a");a.href=u;a.download=(t||"result").replace(/[^a-z0-9]+/gi,"-").toLowerCase()+"-"+d+".png";document.body.appendChild(a);a.click();setTimeout(function(){URL.revokeObjectURL(u);a.remove();},2000);},"image/png");});})();</script><script>(function(){var b=document.getElementById("yjcp");if(!b)return;var t=b.textContent;b.addEventListener("click",function(){var u=location.href.split("#")[0];function d(){b.textContent="Link copied";setTimeout(function(){b.textContent=t;},1800);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(u).then(d,function(){prompt("",u);});}else{prompt("",u);}});})();</script><div class="yj-home-find"><div class="yj-lgbar"><a href="/" class="yj-lg on">EN</a><a href="/de/" class="yj-lg">DE</a><a href="/ja/" class="yj-lg">JA</a><a href="/es/" class="yj-lg">ES</a><a href="/pt/" class="yj-lg">PT</a></div><section class="yj-find"><h2>Find a tool</h2><input id="yjq" type="search" autocomplete="off" placeholder="Type a product name, format or task"><div id="yjr"></div></section><style>.yj-lgbar{position:absolute;top:14px;right:18px;display:flex;gap:6px;z-index:60}.yj-lg{font:600 12px/1 system-ui,sans-serif;padding:6px 9px;border-radius:4px;text-decoration:none;color:#8b96a3;border:1px solid rgba(140,150,165,.28)}.yj-lg:hover{color:#e8eaed;border-color:rgba(160,175,195,.6)}.yj-lg.on{color:#0e1116;background:#cfd6de;border-color:#cfd6de}.yj-find{max-width:760px;margin:34px auto 8px;padding:0 20px}.yj-find h2{font:600 20px/1.3 system-ui,sans-serif;margin:0 0 10px}#yjq{width:100%;box-sizing:border-box;padding:13px 15px;font:400 15.5px system-ui,sans-serif;border:1px solid rgba(140,150,165,.34);border-radius:8px;background:rgba(255,255,255,.04);color:inherit}#yjq:focus{outline:none;border-color:#7FD1C4}#yjr{margin-top:10px;display:flex;flex-direction:column;gap:6px}#yjr a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid rgba(140,150,165,.22);border-radius:6px;text-decoration:none;font:400 14.5px/1.4 system-ui,sans-serif;color:inherit}#yjr a:hover{border-color:#7FD1C4}#yjr .pr{font:600 13px system-ui,sans-serif;color:#5fbf9a;white-space:nowrap}</style><script>(function(){var q=document.getElementById("yjq"),r=document.getElementById("yjr"),D=null;function load(){if(D)return Promise.resolve(D);return fetch("/search-index.json").then(function(x){return x.json();}).then(function(j){D=j;return j;}).catch(function(){D=[];return D;});}function esc(t){return String(t).replace(/[&<>"]/g,function(c){return {"&":"&","<":"<",">":">",'"':"""}[c];});}function run(){var v=q.value.trim().toLowerCase();if(v.length<2){r.innerHTML="";return;}load().then(function(j){var w=v.split(/\s+/),o=[];for(var i=0;i<j.length&&o.length<12;i++){var t=j[i].t.toLowerCase();var ok=true;for(var k=0;k<w.length;k++){if(t.indexOf(w[k])<0){ok=false;break;}}if(ok)o.push(j[i]);}r.innerHTML=o.length?o.map(function(x){return "<a href=\""+esc(x.u)+"\">"+"<span>"+esc(x.t)+"</span>"+(x.p?"<span class=\"pr\">$"+x.p+"</span>":"")+"</a>";}).join(""):"";});}q.addEventListener("input",run);q.addEventListener("focus",load);})();</script></div>
|
| 69 |
|
| 70 |
|
|
|
|
| 1 |
<!doctype html><html lang="en"><meta charset="utf-8">
|
| 2 |
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
| 3 |
<title>BEM Class Auditor and SCSS Skeleton Extractor for HTML</title>
|
| 4 |
<meta name="description" content="16 BEM naming rules read the HTML file you have open, and 22 markup and SCSS skeletons write the stylesheet shell — the class names get fixed before the pull request comes back for them.">
|
| 5 |
<style>
|
|
|
|
| 36 |
<textarea id="src" placeholder="Paste the file here"></textarea>
|
| 37 |
<button id="go">Check</button>
|
| 38 |
<div id="out"></div>
|
| 39 |
+
<div class="next"><h2>The same 16 rules, across the whole repository</h2><ul><li><b>Every HTML file in the repository</b>, not only the one on screen</li><li><b>A findings file you attach to the pull request</b> — CSV, JSON or HTML</li></ul><p class="buy"><a href="https://getreadystack.com/api/buy/cl/polar_cl_KpshZaXMI3nFFxkyC13chl0cdxza8558hpEYP2ERbwy">Unlock the repository-wide audit — $39 once</a></p><p class="fine">Checking the file you have open is free, against all 16 rules, and always will be. </p></div>
|
| 40 |
</div>
|
| 41 |
<script>
|
| 42 |
var RULES=[{"pattern": "class=\"[^\"]*\\b[a-z][a-z0-9]*[A-Z]", "flags": "m", "message": "camelCase class name. BEM names are lower kebab-case: cardTitle becomes card-title."}, {"pattern": "class=\"[^\"]*\\b[a-z0-9-]+_(?!_)[a-z0-9-]+", "flags": "m", "message": "The element separator is exactly two underscores: card_title becomes card__title."}, {"pattern": "\\b[a-z0-9-]+__[a-z0-9-]+__[a-z0-9-]+", "flags": "m", "message": "BEM has no element of an element. card__body__title becomes card__body-title, or a block of its own."}, {"pattern": "\\b[a-z0-9-]+--[a-z0-9-]+__", "flags": "m", "message": "The modifier comes last. card--wide__title becomes card__title with card__title--wide."}, {"pattern": "class=\"\\s*[a-z0-9-]+--[a-z0-9-]+\\s*\"", "flags": "m", "message": "A modifier stands alone here. It must ride next to its base class: class=\"card card--wide\"."}, {"pattern": "CLASS=", "flags": "m", "message": "Attribute name in capitals. The extractor reads a lower-case class= attribute.", "fix": "class="}, {"pattern": "class=\"\\s+", "flags": "m", "message": "Space directly after the opening quote. It becomes an empty selector in the extracted stylesheet.", "fix": "class=\""}, {"pattern": "\\bjs_", "flags": "m", "message": "Scripting hook written with an underscore. Use a hyphen: js_toggle becomes js-toggle.", "fix": "js-"}, {"pattern": "class=\"[^\"]*\\b([a-z0-9_-]{3,})\\b[^\"]*\\b\\1\\b", "flags": "m", "message": "The same class appears twice in one attribute, so the extracted stylesheet would carry the rule twice."}, {"pattern": "class=\"[^\"]*\\b(?:red|blue|green|big|small|left|right|center|bold)\\b", "flags": "i", "message": "Presentational class name. Name the role, not the paint: card__title--red becomes card__title--alert."}, {"pattern": "class=\"[^\"]*\\b(?:test|tmp|temp|foo|bar|div1|box1|new|old|copy)\\b", "flags": "i", "message": "Placeholder class name still in the markup. It will land in the stylesheet as a real selector."}, {"pattern": "class=\"[^\"]*(?:\\{\\{|\\{%|<\\?|\\$\\{)", "flags": "m", "message": "Class name built by a template expression. The extractor cannot resolve it; write the static block part as a class of its own."}, {"pattern": "class=\"[^\"]*(?:\\s+[^\\s\"]+){7}\\s*\"", "flags": "m", "message": "Eight or more classes on one element. The block interface is being replaced by loose utilities."}, {"pattern": "\\b[a-z0-9]+(?:-[a-z0-9]+){4,}(?:__|--|\\s|\")", "flags": "m", "message": "Five or more words in one BEM name. Split the block; the name is carrying the whole page path."}, {"pattern": "<[a-z][a-z0-9-]*[^>]*\\sstyle=\"", "flags": "i", "message": "Inline style on this element. That declaration never reaches the extracted stylesheet, so the block ends up styled in two places."}, {"pattern": "class='[^']*'", "flags": "m", "message": "Class attribute in single quotes. The extractor reads double-quoted attributes."}];
|
|
|
|
| 58 |
</html>
|
| 59 |
|
| 60 |
|
| 61 |
+
<section data-yj-install="free" style="margin:2rem auto 1rem;max-width:46rem;padding:1.25rem 1.25rem;border:1px solid #cfe3d6;border-radius:12px;background:#f6fbf8;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .4rem;font-size:1.2rem">Install free</h2><p style="margin:0 0 .8rem;color:#41505f">Free for the file open in your editor - no key, no limit. The workspace sweep and the report ask for a key.</p><a href="https://marketplace.visualstudio.com/items?itemName=ReadyStack.bem-class-extractor-html" rel="noopener" data-yj-install-door="mp" onclick="try{navigator.sendBeacon('/api/ev',new Blob([JSON.stringify({t:'install',slug:'bem-class-extractor-html',src:'mp',path:location.pathname})],{type:'application/json'}))}catch(e){}" style="display:inline-block;margin:0 .5rem .5rem 0;padding:.6rem 1rem;border-radius:8px;background:#0f7b3f;color:#fff;text-decoration:none;font-weight:600">VS Code Marketplace</a><a href="https://www.npmjs.com/package/@readystack/bem-class-extractor-html" rel="noopener" data-yj-install-door="npm" onclick="try{navigator.sendBeacon('/api/ev',new Blob([JSON.stringify({t:'install',slug:'bem-class-extractor-html',src:'npm',path:location.pathname})],{type:'application/json'}))}catch(e){}" style="display:inline-block;margin:0 .5rem .5rem 0;padding:.6rem 1rem;border-radius:8px;background:#0f7b3f;color:#fff;text-decoration:none;font-weight:600">npm</a><a href="https://www.npmjs.com/package/@readystack/bem-class-extractor-html" rel="noopener" data-yj-install-door="mcp" onclick="try{navigator.sendBeacon('/api/ev',new Blob([JSON.stringify({t:'install',slug:'bem-class-extractor-html',src:'mcp',path:location.pathname})],{type:'application/json'}))}catch(e){}" style="display:inline-block;margin:0 .5rem .5rem 0;padding:.6rem 1rem;border-radius:8px;background:#0f7b3f;color:#fff;text-decoration:none;font-weight:600">MCP server (npx)</a><a href="https://hub.docker.com/r/getreadystack/bem-class-extractor-html" rel="noopener" data-yj-install-door="docker" onclick="try{navigator.sendBeacon('/api/ev',new Blob([JSON.stringify({t:'install',slug:'bem-class-extractor-html',src:'docker',path:location.pathname})],{type:'application/json'}))}catch(e){}" style="display:inline-block;margin:0 .5rem .5rem 0;padding:.6rem 1rem;border-radius:8px;background:#0f7b3f;color:#fff;text-decoration:none;font-weight:600">Docker Hub</a><pre style="margin:.5rem 0 0;padding:.6rem .8rem;background:#f3f5f8;border-radius:8px;font-size:.9rem;overflow:auto">ext install ReadyStack.bem-class-extractor-html
|
| 62 |
+
npx @readystack/bem-class-extractor-html <file>
|
| 63 |
+
npx @readystack/bem-class-extractor-html --mcp</pre><p style="margin:.6rem 0 0;font-size:.92rem;color:#41505f"><a href="https://getreadystack.com/api/buy/team" rel="nofollow" style="color:#0f7b3f;text-decoration:underline">Team? One key for every ReadyStack linter, 5 seats, $149 once</a></p></section>
|
| 64 |
<section data-yj-alert="rule" style="margin:1rem auto 1.5rem;max-width:46rem;padding:1.1rem 1.25rem;border:1px solid #d9dee6;border-radius:12px;background:#fbfcfd;font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif"><b style="font-size:1.05rem">Get the full rule table as a PDF</b><div style="opacity:.78;margin:.35rem 0 .8rem">All 16 rules BEM Class Auditor for HTML and SCSS checks, each with its source and date, on printable pages you can hand to your team or auditor. We email it now, and once more only if a rule changes. No newsletter.</div><div style="display:flex;gap:8px;flex-wrap:wrap"><input id="yjae" type="email" placeholder="you@example.com" style="flex:1;min-width:210px;padding:11px 13px;border:1px solid rgba(140,150,165,.34);border-radius:8px;background:#fff;color:inherit"><button id="yjab" style="padding:11px 18px;border-radius:8px;border:0;cursor:pointer;background:#0f7b3f;color:#fff;font:600 15px system-ui,sans-serif">Email me the PDF</button></div><div id="yjao" hidden style="margin-top:.6rem;color:#0f7b3f">Sent. It arrives within the hour - check spam too.</div><script>(function(){var b=document.getElementById("yjab"),e=document.getElementById("yjae");if(!b||!e)return;b.addEventListener("click",function(){var v=e.value.trim();if(!/.+@.+\..+/.test(v))return;try{localStorage.setItem("yj_em","1");}catch(_){}fetch(location.origin+"/api/subscribe",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:v,slug:"bem-class-extractor-html",lang:"en",source:"rule_table"+((b.closest&&b.closest("section")&&b.closest("section").getAttribute("data-yj-moved"))?"_at_result":"")})}).then(function(r){var o=document.getElementById("yjao");o.hidden=false;if(!r.ok){o.textContent="Could not save - please try again.";}}).catch(function(){var o=document.getElementById("yjao");o.hidden=false;o.textContent="Could not save - please try again.";});});})();</script><script>(function(){var e=document.getElementById("yjae"),s=e&&e.closest?e.closest("section"):null,o=document.getElementById("out");if(!s||!o)return;var d=false;function mv(ev){if(d)return;if(ev&&ev.target&&s.contains(ev.target))return;d=true;var b=o;while(b.parentNode&&b.parentNode!==document.body&&b.parentNode.tagName!=="MAIN"&&b.parentNode.tagName!=="ARTICLE")b=b.parentNode;if(!b.parentNode||b===s||b.contains(s))return;try{b.parentNode.insertBefore(s,b.nextSibling);s.setAttribute("data-yj-moved","1");}catch(_){}}document.addEventListener("input",mv,true);document.addEventListener("change",mv,true);})();</script></section>
|
| 65 |
|
| 66 |
+
<section data-yj-cta="paid" style="margin:3rem auto;max-width:46rem;padding:1.5rem 1.25rem;border:1px solid #d8dee9;border-radius:12px;background:#fbfcfe;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .5rem;font-size:1.25rem">Get the complete version <span class="yj-price">$39</span></h2><p style="margin:.25rem 0 1rem;color:#41505f">This page is the working piece. The full pack has everything below.</p><p style="margin:0 0 1rem;color:#41505f">16 BEM naming rules read the HTML file you have open and 22 markup and SCSS skeletons write the stylesheet shell, so the class names get fixed before the pull request comes back for them.</p><p style="margin:0 0 1rem;color:#5b6b7c;font-size:.94rem">$73 an hour, the 2026 average freelance front-end developer rate (arc.dev, contractrates.fyi); a naming pass over a themed repo is at least one of those hours, and US mid-level contract rates run $89-$140.</p><a href="https://getreadystack.com/api/buy/cl/polar_cl_KpshZaXMI3nFFxkyC13chl0cdxza8558hpEYP2ERbwy" rel="nofollow" style="display:inline-block;padding:.7rem 1.3rem;border-radius:8px;background:#1b64f2;color:#fff;text-decoration:none;font-weight:600">Buy the full version — $39</a></section>
|
| 67 |
<!--yj-share-s101--><div style="margin:28px 0 8px;text-align:center"><button id="yjcp" type="button" style="font:inherit;padding:10px 18px;border:1px solid #8884;border-radius:10px;background:transparent;cursor:pointer">Copy link</button><button id="yjimg" type="button" style="font:inherit;padding:10px 18px;margin-left:8px;border:1px solid #8884;border-radius:10px;background:transparent;cursor:pointer">Save result as image</button></div><script>(function(){var b=document.getElementById("yjimg");if(!b)return;b.addEventListener("click",function(){var o=document.getElementById("out");var txt=(o&&(o.innerText||o.textContent)||"").trim();if(!txt){b.textContent="(no result yet)";setTimeout(function(){b.textContent="Save result as image";},1500);return;}var lines=txt.split(String.fromCharCode(10)).filter(function(x){return x.trim();}).slice(0,10);var W=1200,P=56,c=document.createElement("canvas");c.width=W;var lh=38,H=P*2+70+lines.length*lh+60;c.height=H;var x=c.getContext("2d");x.fillStyle="#1a1512";x.fillRect(0,0,W,H);x.fillStyle="#f3e9d2";x.font="600 34px system-ui,Segoe UI,Arial";var t=(document.title||"").split("|")[0].trim();x.fillText(t.slice(0,54),P,P+34);x.font="22px ui-monospace,Menlo,Consolas,monospace";x.fillStyle="#e8dcc4";for(var i=0;i<lines.length;i++){x.fillText(lines[i].slice(0,88),P,P+70+i*lh+22);}x.font="600 22px system-ui,Segoe UI,Arial";x.fillStyle="#c9a227";var d=location.hostname.replace("www.","");x.fillText(d,W-P-x.measureText(d).width,H-P+6);c.toBlob(function(bl){var u=URL.createObjectURL(bl),a=document.createElement("a");a.href=u;a.download=(t||"result").replace(/[^a-z0-9]+/gi,"-").toLowerCase()+"-"+d+".png";document.body.appendChild(a);a.click();setTimeout(function(){URL.revokeObjectURL(u);a.remove();},2000);},"image/png");});})();</script><script>(function(){var b=document.getElementById("yjcp");if(!b)return;var t=b.textContent;b.addEventListener("click",function(){var u=location.href.split("#")[0];function d(){b.textContent="Link copied";setTimeout(function(){b.textContent=t;},1800);}if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(u).then(d,function(){prompt("",u);});}else{prompt("",u);}});})();</script><div class="yj-home-find"><div class="yj-lgbar"><a href="/" class="yj-lg on">EN</a><a href="/de/" class="yj-lg">DE</a><a href="/ja/" class="yj-lg">JA</a><a href="/es/" class="yj-lg">ES</a><a href="/pt/" class="yj-lg">PT</a></div><section class="yj-find"><h2>Find a tool</h2><input id="yjq" type="search" autocomplete="off" placeholder="Type a product name, format or task"><div id="yjr"></div></section><style>.yj-lgbar{position:absolute;top:14px;right:18px;display:flex;gap:6px;z-index:60}.yj-lg{font:600 12px/1 system-ui,sans-serif;padding:6px 9px;border-radius:4px;text-decoration:none;color:#8b96a3;border:1px solid rgba(140,150,165,.28)}.yj-lg:hover{color:#e8eaed;border-color:rgba(160,175,195,.6)}.yj-lg.on{color:#0e1116;background:#cfd6de;border-color:#cfd6de}.yj-find{max-width:760px;margin:34px auto 8px;padding:0 20px}.yj-find h2{font:600 20px/1.3 system-ui,sans-serif;margin:0 0 10px}#yjq{width:100%;box-sizing:border-box;padding:13px 15px;font:400 15.5px system-ui,sans-serif;border:1px solid rgba(140,150,165,.34);border-radius:8px;background:rgba(255,255,255,.04);color:inherit}#yjq:focus{outline:none;border-color:#7FD1C4}#yjr{margin-top:10px;display:flex;flex-direction:column;gap:6px}#yjr a{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid rgba(140,150,165,.22);border-radius:6px;text-decoration:none;font:400 14.5px/1.4 system-ui,sans-serif;color:inherit}#yjr a:hover{border-color:#7FD1C4}#yjr .pr{font:600 13px system-ui,sans-serif;color:#5fbf9a;white-space:nowrap}</style><script>(function(){var q=document.getElementById("yjq"),r=document.getElementById("yjr"),D=null;function load(){if(D)return Promise.resolve(D);return fetch("/search-index.json").then(function(x){return x.json();}).then(function(j){D=j;return j;}).catch(function(){D=[];return D;});}function esc(t){return String(t).replace(/[&<>"]/g,function(c){return {"&":"&","<":"<",">":">",'"':"""}[c];});}function run(){var v=q.value.trim().toLowerCase();if(v.length<2){r.innerHTML="";return;}load().then(function(j){var w=v.split(/\s+/),o=[];for(var i=0;i<j.length&&o.length<12;i++){var t=j[i].t.toLowerCase();var ok=true;for(var k=0;k<w.length;k++){if(t.indexOf(w[k])<0){ok=false;break;}}if(ok)o.push(j[i]);}r.innerHTML=o.length?o.map(function(x){return "<a href=\""+esc(x.u)+"\">"+"<span>"+esc(x.t)+"</span>"+(x.p?"<span class=\"pr\">$"+x.p+"</span>":"")+"</a>";}).join(""):"";});}q.addEventListener("input",run);q.addEventListener("focus",load);})();</script></div>
|
| 68 |
|
| 69 |
|