Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Never mind the blocks


Published on


Published in: Internet
  • Be the first to comment

Never mind the blocks

  1. 1. CSS @pistolsofficial
  2. 2. An irreverent way of writing CSS Ale Benson | Auckland CSS Meetup
  3. 3.
  4. 4. Challenging CSS Best Practices By Thierry Koblentz <div class="Bfc M-10"> <div class="Fl-start Mend-10 W-25"> content </div> <div class="Bfc"> content </div> </div>
  5. 5. Worst web dev idea of all time, or just a really bad one? ~ @mezzoblue Read a post on CSS & threw up in my throat a little. ~ @AaronGustafson I really don’t understand why anyone would ever want to write CSS through/like this. ~ @SaraSoueidan Just saw @AtomicCSS. Wow. Syntax so bad I looked for "Is this a joke?" in the FAQ. ~ @LeaVerou
  6. 6. <div class="Bfc M-10"> <div class="Fl-start Mend-10 W-25"> ... </div> <div class="Bfc"> ... </div> </div>
  7. 7. <div class="overflow-hidden margin"> <div class="float-left margin-right width-1col"> ... </div> <div class="overflow-hidden"> ... </div> </div>
  8. 8. .overflow-hidden { overflow:hidden; } .margin { margin:20px } .float-left { float:left; } .margin-right { margin-right:20px; } .width-1col { width:60px; }
  9. 9. Why irreverent? Shows a lack of respect an alternative for things that are generally taken seriously.
  10. 10. .property-value { property: value; } Break down styles into irreducible units, we can map classes to a single style, rather than many.
  11. 11. .Bfc { overflow: hidden; } .overflow-hidden { overflow: hidden; }
  12. 12. Context Small agency with many clients, projects and a stickler designer. Several freelance projects. Workflow Final mockups signed. Following an Atomic Design methodology. Styling components in the markup, not the stylesheet. Results Using this way of writing stylesheets led to quick fixes and quick changes asked by clients, designers, leaders and bosses.
  13. 13. Choosing a naming convention Discuss with the team which naming convention suit best. Analog .display-block{} Value .block{} Shorthand .d-b{} // .Db{} // .db{} Mixed .d-block{}
  14. 14. Is predictable Know which property and value are inside the rule just looking at the classname. Don’t spend time thinking a name writing a new class. <div class="bds-dashed"></div>
  15. 15. Improves reusability This will result in a more granular palette of rules. <p class="m-bottom fw-bold"></p> <div class="m-bottom fw-bold fs-italic"></div> <article class="m-bottom fs-italic td-underline"></article>
  16. 16. No dead weight. No obsolete rules We are not styling based in our context, content or object. Also abandoning a style for a component does not make any of our rules obsolete. E.g. In bootstrap, styling for and abandoning .nav--inverse{} include leaving several properties and descendants. .navbar-inverse {} .navbar-inverse .navbar-brand {} .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {} .navbar-inverse .navbar-text {} .navbar-inverse .navbar-nav > li > a {} .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {} .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover,
  17. 17. Flatten the specificity Every class have the same weight. .m-left { margin-left: 2%; } .m-right { margin-right: 2%; } .m-top { margin-top: 24px; } .m-left { margin-left: 2%; } .mt-s { margin-top: 12px; } .mb-s { margin-bottom: 12px; } .ml-s { margin-left: 1%; } .mr-s { margin-right: 1%; } .mt-x { margin-top: 48px; } .mb-x { margin-bottom: 48px; } .ml-x { margin-left: 4%; } .mr-x { margin-right: 4%; } .mt-xx { margin-top: 72px; } .bd-top { border-width: 1px 0 0 0; } .bd-bottom { border-width: 0 0 1px 0; }
  18. 18. No redundancy Classes are not duplicated, and properties belong to a single rule instead of being part of many. .media { float:left; } .col1 { float:left; } .fl-left { float:left; }
  19. 19. Component variability We can change the style of a module without worrying about breaking something else on the page. And we can probably do this without adding any rule to the style sheet. <div class="of-hidden m-1gut"> <div class="fl-left m-right w-1col"></div> <div class="of-hidden"></div> </div> <div class="of-hidden m-1gut"> <div class="fl-right m-left w-1col"></div> <div class="of-hidden"></div> </div>
  20. 20. No undoing declaration You are always choosing the class you want to use. No room for undoing styles. .margin-reset { margin:0; }
  21. 21. Smaller files For the developer Less time writing stylesheets. Less time compiling. For the user Less load time. Less time in the block chain.
  22. 22. Outcomes For the developer Generated a base to start every project. Less bugs and faster fixes. For the designer Custom elements designs. Out of the pattern designs. For the agency Increased the delivery for every project. For the user Increased speed.
  23. 23. Remember; this is CSS. Choose where to be irreverent.
  24. 24. Thanks Ale Benson @alebenson