Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A quick guide for writing MAINTAINABLE and SCAL...

A quick guide for writing MAINTAINABLE and SCALABLE CSS

Presented @ Codemotion Madrid 2016

Sergio Álvarez

November 19, 2016
Tweet

Other Decks in Programming

Transcript

  1. Any fool can write code that a computer can understand.

    Good programmers write code that humans can understand. — MARTIN FOWLER
  2. .nav { /* ... */ } .nav li { /*

    ... */ } .nav ul { /* ... */ } .nav li ul { /* ... */ } .nav > li { /* ... */ } .nav ul li { /* ... */ } Item 1 Item 2 Item 3 Sub Item 1.1 Sub Item 1.2 Sub Item 1.3
  3. .nav { /* ... */ } .nav-item { /* ...

    */ } .nav-submenu { /* ... */ } .nav-submenu-item { /* ... */ } Item 1 Item 2 Item 3 Sub Item 1.1 Sub Item 1.2 Sub Item 1.3
  4. Element .dropdown__item { /* ... */ } .dropdown__icon { /*

    ... */ } .dropdown__text { /* ... */ } Edit Remove Update
  5. Modifier .dropdown__item--is-selected { /* ... */ } .dropdown__item--is-disabled { /*

    ... */ } .dropdown__item--has-only-text { /* ... */ } Edit Remove Update
  6. Edit Remove Update .dropdown { /* ... */ } .dropdown__item

    { /* ... */ } .dropdown__item--is-selected { /* ... */ } .dropdown__item--has-only-text { /* ... */ } .dropdown__text { /* ... */ }
  7. Edit Remove Update <div class="dropdown"> <div> <div class="dropdown__item dropdown__item--has-only-text dropdown__item--is-selected">

    <span class="dropdown__text"> Update </span> </div> <div class="dropdown__item dropdown__item--has-only-text"> <span class="dropdown__text"> Edit </span> </div> <div class="dropdown__item dropdown__item--has-only-text"> <span class="dropdown__text"> Remove </span> </div> </div> </div>
  8. Edit Remove Update <ul class="dropdown"> <li class="dropdown__item dropdown__item--has-only-text dropdown__item--is-selected"> <p

    class="dropdown__text"> Update </p> </li> <li class="dropdown__item dropdown__item--has-only-text"> <p class="dropdown__text"> Edit </p> </li> <li class="dropdown__item dropdown__item--has-only-text"> <p class="dropdown__text"> Remove </p> </li> </ul>
  9. ├── base │ ├── font.css │ └── reset.css ├── components

    │ ├── avatar.css │ ├── button.css │ └── dropdown.css ├── modules │ ├── home.css │ └── sidebar.css ├── utilities │ ├── mixins │ └── variables.css ├── vendor │ ├── bootstrap.css │ └── datepicker.css └── main.css Best project organization
  10. :root { --base-font-size: 16px; } .button { font-size: var(--base-font-size); }

    .page__text { font-size: var(--base-font-size); } .dropdown__item { font-size: var(--base-font-size); }
  11. :root { --primary-color: #fc3952; } .button { background-color: var(--primary-color); }

    .dropdown__item--is-selected { background-color: var(--primary-color); } .link { color: var(--primary-color); }
  12. :root { --primary-color: #fc3952; } .button { background-color: var(--primary-color); }

    .dropdown__item--is-selected { background-color: var(--primary-color); } .link { color: var(--primary-color); } This can be dynamically updated!
  13. .page { display: flex; flex-direction: column; min-height: 100vh; } .header

    { height: 4vh; } .content { flex-grow: 1; } .footer { height: 10vh; } .page .header .content .footer
  14. CSS Specificity: Things you should know (Smashing Magazine) · http://bit.ly/2fQpC2R

    Hacks for dealing with specificity (Harry Roberts) · http:// bit.ly/2fqUOVy MindBEMding – getting your head ’round BEM syntax (Harry Roberts) · http://bit.ly/2foR5W4 Code smells in CSS (Harry Roberts) · http://bit.ly/2fQnc41
  15. Battling BEM (Extended Edition): 10 Common Problems And How To

    Avoid Them (Smashing Magazine) · http:// bit.ly/2fuvjPH CSS at BBC Sport (Part 1) · http://bit.ly/2eLDHuc CSS for Software Engineers for CSS Developers (Harry Roberts) · http://bit.ly/2fI4g8l MaintainableCSS (Adam Silver) · http://bit.ly/2fsrdcw
  16. CSS Flexbox Toolbox - Learning Guides, Tools & Frameworks (speckyboy)

    · http://bit.ly/2fr1Gm5 @LeaVerou · http://bit.ly/2ecWx0X @SaraSoueidan · http://bit.ly/2fqZIBT @csswizardry · http://bit.ly/2f6Mvxx