1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Real world nesting opportunities | Nesting | Building blocks | Modern CSS with Hidde de Vries</title> 6 <link href="/_assets/styles.css" rel="stylesheet" /> 7 <link 8 href="https://unpkg.com/[email protected]/themes/prism-okaidia.css" 9 rel="stylesheet" 10 /> 11 </head> 12 <body> 13 <a href="/" class="all-examples">All examples</a> 14 15 <h1> 16 <div class="pre-head"> 17 18 <a href="/#building-blocks"><small>Building blocks</small></a> 19 20 > 21 <small>Nesting</small> 22 23 </div> 24 Real world nesting opportunities 25 </h1> 26 27 <p>These are some ways where nesting could make your code more readable or understandable.</p> 28<h2>Keeping states together</h2> 29<p>If an element slightly varies on hover and focus (which it should in most cases), it could make sense to add those styles right with the element styles.</p> 30 31 <div class="example"> 32 <div class="code"> 33 <h2>Example code</h2> 34 <pre> 35 <code class="language-html" 36 contenteditable="plaintext-only"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Save<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> 37 38<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 39<span class="token selector">button</span> <span class="token punctuation">{</span> 40 <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> 41 <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> 42 <span class="token property">border</span><span class="token punctuation">:</span> 1px solid currentcolor<span class="token punctuation">;</span> 43 <span class="token property">padding</span><span class="token punctuation">:</span> 1em 2em<span class="token punctuation">;</span> 44 45 <span class="token selector">&:hover</span> <span class="token punctuation">{</span> 46 <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> 47 <span class="token punctuation">}</span> 48 49 <span class="token selector">&:focus</span> <span class="token punctuation">{</span> 50 <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 51 <span class="token punctuation">}</span> 52<span class="token punctuation">}</span> 53</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code> 54 </pre> 55 </div> 56 <div class="preview"> 57 <h2>Preview</h2> 58 <iframe scrolling="no" onloadeddata="this.style.height=1+this.contentDocument.documentElement.offsetHeight+'px';" srcdoc="<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Save<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> 59 60<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 61<span class="token selector">button</span> <span class="token punctuation">{</span> 62 <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> 63 <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> 64 <span class="token property">border</span><span class="token punctuation">:</span> 1px solid currentcolor<span class="token punctuation">;</span> 65 <span class="token property">padding</span><span class="token punctuation">:</span> 1em 2em<span class="token punctuation">;</span> 66 67 <span class="token selector">&:hover</span> <span class="token punctuation">{</span> 68 <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> 69 <span class="token punctuation">}</span> 70 71 <span class="token selector">&:focus</span> <span class="token punctuation">{</span> 72 <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 73 <span class="token punctuation">}</span> 74<span class="token punctuation">}</span> 75</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>" onresize="this.style.height=1+this.contentDocument.documentElement.offsetHeight+'px'"></iframe> 76 </div>
77 </div> 78<h2>Media queries</h2> 79<p>Maybe you want a card to look different based on media queries. The query could go right with the component.</p> 80 81 <div class="example"> 82 <div class="code"> 83 <h2>Example code</h2> 84 <pre> 85 <code class="language-html" 86 contenteditable="plaintext-only"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 87<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 88 89<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 90<span class="token selector">.card</span> <span class="token punctuation">{</span> 91 <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> 92 <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 1 / 1<span class="token punctuation">;</span> 93 <span class="token property">background-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> 94 95 <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> 96 <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 97 <span class="token punctuation">}</span> 98<span class="token punctuation">}</span> 99</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code> 100 </pre> 101 </div> 102 <div class="preview"> 103 <h2>Preview</h2> 104 <iframe scrolling="no" onloadeddata="this.style.height=1+this.contentDocument.documentElement.offsetHeight+'px';" srcdoc="<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 105<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 106 107<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> 108<span class="token selector">.card</span> <span class="token punctuation">{</span> 109 <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> 110 <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 1 / 1<span class="token punctuation">;</span> 111 <span class="token property">background-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span> 112 113 <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> 114 <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> 115 <span class="token punctuation">}</span> 116<span class="token punctuation">}</span> 117</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>" onresize="this.style.height=1+this.contentDocument.documentElement.offsetHeight+'px'"></iframe> 118 </div>
119 </div> 120 121 122 123 124
124<script> 125 let codeExamples = document.querySelectorAll('.example .code > pre > code'); 126 127 let setPreview = function(example) { 128 example.parentNode.parentNode.nextElementSibling.querySelector('iframe').setAttribute('srcdoc', '<meta name="color-scheme" content="dark light"><style>body{font-family:system-ui,sans-serif}</style>'+example.textContent); 129 }; 130 131 for (const example of codeExamples) { 132 example.addEventListener('input', function() { 133 setPreview(example); }); 134 135 setPreview(example); /* first run */ 136 } 137 </script>
137 138
138<script type="module" src="/_assets/scripts/baseline-status.min.js"></script>
138 139 </body> 140</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.