diff options
Diffstat (limited to 'build/over-nesting/index.html')
| -rw-r--r-- | build/over-nesting/index.html | 63 |
1 files changed, 39 insertions, 24 deletions
diff --git a/build/over-nesting/index.html b/build/over-nesting/index.html index 01704e3..09d82fc 100644 --- a/build/over-nesting/index.html +++ b/build/over-nesting/index.html @@ -1,60 +1,75 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Over-Nesting</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Over-Nesting</h1> +<h1 id="over-nesting">Over-Nesting</h1> + <p>2019-01-06</p> -<p>I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I've recently worked on a few projects that show a slight disregard for proper class/selector nesting.</p> -<p>Now it's completely understandable why designers and teams alike shrug off the concept of "over-nesting":</p> + +<p>I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I’ve recently worked on a few projects that show a slight disregard for proper class/selector nesting.</p> + +<p>Now it’s completely understandable why designers and teams alike shrug off the concept of “over-nesting”:</p> + <ul> <li>As a team we know the structure of our code (no outside party needs to interact with it)</li> -<li>Everything is written in <code>insert pre-processor here</code> - so it's cleaner/compiled anyway</li> -<li>It's <em>technically</em> DRY</li> +<li>Everything is written in <code>insert pre-processor here</code> - so it’s cleaner/compiled anyway</li> +<li>It’s <em>technically</em> DRY</li> </ul> -<p>I personally believe these are all weak excuses that don't justify the poor experience future maintainers of your code will face. <em>You should always write your code with the idea someone completely new to the project will have to maintain it</em>.</p> -<p>Let's look at an average example of poor nesting that I've seen out in the wild:</p> -<pre><code>/* These children elements can't be used outside -of the parent - not very flexible */ + +<p>I personally believe these are all weak excuses that don’t justify the poor experience future maintainers of your code will face. <em>You should always write your code with the idea someone completely new to the project will have to maintain it</em>.</p> + +<p>Let’s look at an average example of poor nesting that I’ve seen out in the wild:</p> + +<pre><code>/* These children elements can't be used outside +of the parent - not very flexible */ .main-container { .child-container { - /* This class specificity is too deep */ + /* This class specificity is too deep */ .sub-child-container {} } } </code></pre> -<p>Even if you know a child element will never be structured outside of it's parent, what harm does it cause to still place it out of such deep specificity?</p> -<pre><code>/* This code is far more reusable */ + +<p>Even if you know a child element will never be structured outside of it’s parent, what harm does it cause to still place it out of such deep specificity?</p> + +<pre><code>/* This code is far more reusable */ .main-container {} .child-container {} .sub-child-container {} </code></pre> -<h3>Exceptions</h3> + +<h3 id="exceptions">Exceptions</h3> + <p>As with anything, there are exceptions to the <em>rule</em>. If the nested elements pertain to the parent itself, it makes complete sense to group these stylings together. A button or link item are excellent examples of this:</p> + <pre><code>.btn-lg { - &:hover {} - &:active {} - &:disabled{} + &:hover {} + &:active {} + &:disabled{} } .link-item { - &:hover{} - &:focus{} + &:hover{} + &:focus{} } </code></pre> -<p>Of course, this is all easier said than done. Limitations exist within teams or even on an individual level that might make this impossible to change. Maybe you don't have the authority to rework your current CSS or it would eat up too many cycles and time is valuable - especially in the world of startups. </p> -<p>I'm not saying this is <strong>the only way to structure CSS</strong> - I'm only trying to make the lives of future designers/developers easier moving forward. </p> + +<p>Of course, this is all easier said than done. Limitations exist within teams or even on an individual level that might make this impossible to change. Maybe you don’t have the authority to rework your current CSS or it would eat up too many cycles and time is valuable - especially in the world of startups. </p> + +<p>I’m not saying this is <strong>the only way to structure CSS</strong> - I’m only trying to make the lives of future designers/developers easier moving forward. </p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> |