FESIG - You've been doing CSS Wrong

Transcript

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