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

FESIG - You've been doing CSS Wrong

FESIG - You've been doing CSS Wrong


Siddharth Kshetrapal

December 05, 2014


  1. You’ve been doing CSS wrong @siddharthkp

  2. You’ve been doing CSS wrong We’ve

  3. Difficult to maintain. CSS is simple. Simple to understand. Simple

    to use.
  4. How we do CSS > common common.css style.css > pages

    calendar.css reports.css profile.css records.css > records prescriptions.css treatments.css
  5. Repetition Loads of floats, font sizes, widths, etc. Non generic

    Styles are extremely specific to a certain page/element. Bloat File sizes get bigger and bigger as more features are added.
  6. Reusability is almost non-existent Developers don’t trust other’s code. Fragile

    A single change can screw up the layout. Overwriting, specificity war. (I’m looking at you, bootstrap) Further reading: http://blog.trifork.com/2013/06/04/twitter-bootstrap-why-you- should-not-use-it/
  7. Debugging

  8. 2009 Nicole Sullivan @stubbornella

  9. Abstraction Modularity Inheritance

  10. Instead of > common common.css style.css > pages calendar.css reports.css

    profile.css records.css > records prescriptions.css treatments.css
  11. Components

  12. Mix and match components to make diverse pages.

  13. > global-legos reset.css grid.css menu.css buttons.css colors.css Application wide components/legos

  14. > modular-legos lists.css tables.css cards.css sidebar.css Specific components/legos > global-legos

    reset.css grid.css menu.css buttons.css colors.css
  15. Lego driven development Start designing individual pages only after all

    the legos have been defined. > pages calendar.css records.css profile.css
  16. Caveats Consistency A Heading should not become a Heading in

    another part of page. Write generic components /* Bad typography.scss */ .font12 { font-size: 12px; } .font16 { font-size: 16px; } /* Good typography.scss */ .smalltext { font-size: 10px; } .bigtext { font-size: 16px; }
  17. DRY /* color.scss */ $practoblue: #08b; /* typography.scss */ .link

    { cursor: pointer; } /* buttons.scss */ .button { @extend .link; background: $practoblue; &:hover { background: lighten($practoblue, 10%); } }
  18. We have to do it. All of us have done

    it at some point of time. .perfectly-positioned-div { margin-top: -2px; } a { color: #BADA55 !important; } Life is hard... shame.css The code you have to write to get the release out on time/ fix a bug quickly but the code that makes you ashamed.
  19. /** * Nav specificity fix. * * Someone used an

    ID in the header code (`#header a {}`) * which trumps the nav selectors (`.site-nav a {}`). * Use!important to override it until I get the chance to * refactor the header. */ .site-nav a { color: #BADA55 !important; } 1. If it’s a hack, it goes in shame.css. 2. Document all hacks fully. 3. Do not blame the developer; if they explained why they had to do it then their reasons are (hopefully) valid. 4. Try and clean shame.css up as soon as you get time (preferably in the very next sprint). Further reading: http://csswizardry.com/2013/04/shame-css/
  20. https://github.com/causes/scss-lint#linters https://github.com/CSSLint/csslint Basic syntax checking as well as applying a

    set of rules to the code that look for problematic patterns or signs of inefficiency. Linting .selector { property: value; } div { width: 100px; padding:0 10px; } 1: warning at line 3, col 2 Using width with padding can sometimes make elements larger than you expect.
  21. CSS Testing

  22. Asserts: Cactus .sidebar { margin-left: 10px; color: #333; } Cactus.expect(".header").toHaveMargin("10px");

    Cactus.expect(".header", "color").toEqual("#333"); Link: https://github.com/winston/cactus
  23. Imagediff: CSS critic (phantomjs) Link: https://cburgmer.github.io/csscritic/

  24. siddharthkp@practo.com Thanks