SMACSS
Published: 2020-06-03 18:32:44

<a href='https://smacss.com/'>SMACSS</a>: Scalable and Modular Architecture for CSS

We pronounce as Smacks.

SMACSS is more style guide than rigid framework.

I have read SMACSS book, and found some points which we use day to day life.

1. I highly recommended that you specify a body background. So, it should override default browser background color.
2. Base styles include setting heading sizes, default link styles, default font styles, and body backgrounds. There should be no need to use !important in a Base style.
3. CSS Reset is a set of Base styles designed to strip out or reset the default margin, padding, and other properties
4. Module is a more discrete component of the page. It is your navigation bars and your carousels and your dialogs and your widgets and so on.
5. In Module rule, avoid ID’s and all. Use:
   Ex: model > a {color: red}
6. For state rules, Clicking on a tab will activate that tab. Therefore, an is-active or is-tab-active class is appropriate.
7. Remember, the use of !important should be avoided for all other rule types. Only states should have it
8. Sub module naming convention: .btn, .btn-pressed, .btn-disabled
9. State naming convention: .btn, .is-pressed, .is-disabled
10. Attribute selector Convention: .btn[data-state=default], .btn[data-state=disabled]
11. From CSS2.1, the three most useful pseudo-classes are the “dynamic” ones that react to user interaction: :hover, :focus, and :active. CSS3 adds a number of new pseudo-classes, most of which style based on HTML structure (such as :nth-child or :last-child).
12. How CSS gets evaluated?
Below I have shared an example which explain how CSS actually gets evaluated in browser:

Example:
```html
<body>
  <div id=“content" >

<div class="module intro">
        <p>Lorem Ipsum</p>
    </div>
     <div class="module">
       <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum <span>Test</span></p>
    </div>
  </div>
</body>
```

<ul>
<li>The browser starts at the top and sees a body element. At this 
    point, it thinks it is empty. It hasn’t evaluated anything else. 
    The browser will determine what the computed styles are and apply 
    them to the element. What is the font, the color, the line height? 
    After it gets this out, it paints it to the screen.</li>

<li>Next, it sees a div element with an ID of content. Again, at this 
    point, it thinks it is empty. It hasn’t evaluated anything else. 
    The browser gures out the styles and then the div gets painted. 
    The browser will determine if it needs to repaint the body—did the 
    element get wider or taller? (I suspect there are other 
    considerations but width and height changes are the most common 
    aspects child elements have on their parents.)</li>

<li>This process continues on until it reaches the end of the 
    document.</li>

<li>For a visualization of the re ow/repaint process in Firefox, 
    visit <a href='http://youtu.be/ZTnIxIA5KGw'>http://youtu.be/ZTnIxIA5KGw</a></li>

</ul>

13. CSS gets evaluated on right to left
  1. To determine whether a CSS rule applies to a particular element, 
     it starts on the right of the rule and works its way left.
  2. If you have a rule like body div#content p { color: #003366; } 
     then for every element—as it gets rendered to the page—it will 
     ask if it is a paragraph element. If it is then it will work its 
     way up the DOM and ask if it is a div with an ID of content. If 
     it finds what it is looking for, it will continue its way up the 
     DOM until it reaches the body
  3. By working right to left, the browser can determine whether a 
     rule applies to this particular element that it is trying to 
     paint to the viewport much faster
  4. .l-inline > *
  <ul>
    <li> The downfall to this approach is that the rules will have to 
         be evaluated for every single element on the page and not 
         just the list items
    </li>
   </ul>

 14. A CSS preprocessor allows you to use a special syntax in your CSS 
     that is then compiled within your project. Some preprocessors try 
     and stick as closely as possible to actual CSS syntax, whereas 
     others try to simplify things as much as possible.
 15. Preprocessor has plenty of interesting features that can help 
     make authoring CSS easier. A few of them are:
     <ul>
       <li>Variables</li>
       <li>Operations</li>
       <li>Mixins</li>
       <li>Nesting</li>
       <li>Functions</li>
       <li>Interpolation</li>
       <li>File importing</li>
       <li>Extending</li>
     </ul>

16.  Using Variable: Anybody who has worked with CSS for more than an hour has likely wished for the ability to set a colour value once in a CSS le and then to reuse that colour anywhere else in the CSS.
Example:
```css
$color: #369;

body {
   color: $color;
}

.callout {
   border-color: $color; 
}
```

17. **Mixins**: A mixin is a group of styles that can be reused throughout your CSS.

Example:

Generated CSS for the border-radius mixins

```css
.callout {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;

 border-radius: 5px;

}
```

18. Extensions are the ability to extend one module with the properties of another. In Sass, this is done with the extend directive.

Example:
```css
.btn {
  display: block;
  padding: 5px 10px;
  background-color: #003366;
}

.btn-default {
  @extend .btn;
  background-color: #0066cc;
}
```

19. Nesting css:

Example:
```css
// Nested Media Queries in Sass

.nav > li {
 width: 100%;

@media screen and (min-width: 320px) {
     width: 100px;
    float: left;
 }

@media screen and (min-width: 1200px) {
         width: 250px;
} }
```

Thanks for reading this article ♥️

I hope you would find these article useful. Feel free to ping me in comment section or <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>