Big CSS

Slides from Big CSS at Canvas Conf, Birmingham, 2012

Video: https://www.youtube.com/watch?v=R-BX4N8egEc&hd=1

Transcript

1. BIG CSS Canvas Conf, Birmingham 2012 BigCSS
2. HARRY ROBERTS csswizardry.com @csswizardry
3. bit.ly/NiOAOR
5. BSKYB Massive sites Loads of devs UI heavy Long running projects
6. faavorite.com
7. FAAVORITE Fairly small Two devs UI heavy Long running project
8. WRITING CSS IS EASY...
9. .foo{ color:red; /* Very easy... */ }
10. ARCHITECTING IT ISNT... ,
11. SKYBET.COM Biggest project I ever worked on... <10,000 lines of CSS 2 files
12. MO DEVS, MO PROBLEMS , ,
13. CSS DOESNT KILL PEOPLE... Other developers do ,
14. CSS = WTF
15. CSS = WTF HTML is viewed in situ... Has no interdependencies... Is, by nature, self-explanatory. CSS relies on inheritance... The cascade... Specificity.
16. DEFER MORE WORK TO THE HTML
17. CSS PREPROCESSORS Sass > LESS Excellent when used correctly Provide a disconnection Less useful than a knowledge of architecture Makes nothing better, only faster to write Still only generating CSS
18. OOCSS Promotes better understanding of everything Solves problems with/in vanilla CSS Can be combined with preprocessors
19. OBJECTS > COMPONENTS Components are still cumbersome so... Break components down further as... Objects and abstractions are more useful. Can reuse a nav abstraction way more than .main-nav
20. OBJECTS Design patterns, not components Very vaguely named Insemantic classes (e.g. .media) , ,
21. EXTENSIONS Much, much more specific Very explicitly named Much longer classes (e.g. .user-avatar-link)
22. GOOD CSS HAS A ONE-TO-MANY RELATIONSHIP WITH HTML
23. NAV ABSTRACTION .nav{ list-style:none; margin-left:0; } .nav > li, .nav > li > a{ display:inline-block; }
24. .nav{} class="nav user-links" class="nav site-nav" class="nav breadcrumb" class="nav sponsor-logos" class="nav footer-nav"
25. faavr.it/csswizardry 45 instances on one page 9 unique 8 lines of CSS
26. THE EASIEST WAY TO KEEP CSS MAINTAINABLE IS TO AVOID WRITING IT
27. CASE STUDY — BSKYB
28. USER-ACTIONS MENU Single component One ID on the <ul> Lots of descendants
29. OR...?
30. A BLOCKY LIST .ui-list{} Generic list Any type of content
31. ICONS <i class=s></i> As portable as <img> Spriteable
32. ICONS WITH TEXT .ico-text{} Sorts spacing/alignment Any icon, any text
33. SPLIT ITEMS .split{} Any type of content Restaurant menus etc
34. USER-ACTIONS MENU A UI-list filled with... Icon objects... Icon-text objects... Splitter components.
35. USER-ACTIONS MENU No IDs, lots more markup and classes, a LOT less CSS. Bespoke HTML and CSS (once compressed) weighed 147 bytes LESS than the Google favicon! Abstractions come free-of-charge, they are already there and free to use over and over and over and over and over...
36. TIPS AND TRICKS
37. KEEP SPECIFICITY LOW NO IDs IN CSS!!! Write rulesets in specificity order Avoid qualifying selectors Avoid unnecessary nesting Avoid chaining selectors
38. NO IDs IN CSS!!! Literally no point It takes 256 classes to override one ID Make several classes out of the reusable parts of the ID
39. WRITE RULESETS IN SPECIFICITY ORDER Reset, elements, objects, components, style trumps Not in occurrence order (e.g. header, page, footer) Subsequent rulesets should only inherit, never undo
40. AVOID QUALIFYING SELECTORS p.intro{} -> .intro{} Increases specificity — extra selectors Limits reusability — e.g. cannot be used on an <li> Less efficient — more work for the browser
41. AVOID UNNECESSARY NESTING .carousel .pane{} -> .pane{} Increases specificity Limits portability Less efficient
42. AVOID CHAINING SELECTORS .msg.error{} -> .error-msg{} Increases specificity Less efficient
43. INDENT RULESETS .carousel{} .panes{} .pane{} .pane-title{} .pane-img{}
44. INDENT RULESETS <div class=carousel> <ul class=panes> <li class=pane> <h3 class=pane-title> <img class=pane-img>
45. CONTENT IS KING
46. CONTENT IS KING /* comments */
47. QUASI-QUALIFIED SELECTORS /*html*/.product-page{} /*ol*/.breadcrumb{} /*table*/.winners{}
48. TABLE OF CONTENTS AND SECTION TITLES /* RESET.......Undo defaults MEDIA.......The media object MAIN........HTML/BODY, wrappers SITE-NAV....Page’s nav bar FOOTER......Disclaimer, links */
49. TABLE OF CONTENTS AND SECTION TITLES /* $MEDIA */ .media{} ... /* $MAIN */ html{} ... /* $SITE-NAV */ .site-nav{}
50. TAGS IN CSS /* ^navigation ^lists ^text */ .nav{} .nav > li, .nav > li > a{}
51. TAGS IN CSS /* ^layout ^lists ^tables */ .matrix{} .matrix > li{}
52. COMMENTED OUT HTML /* <ul class=nav> <li><a href=/>Home</a> </ul> */ .nav{} .nav > li, .nav > li > a{}
53. OBJECT/EXTENSION POINTERS /* Extend `.nav{}` in theme.css */ .nav{} .nav > li, .nav > li > a{}
54. OBJECT/EXTENSION POINTERS /* Extends `.nav{}` in base.css */ .breadcrumb{} .breadcrumb > li, .breadcrumb > li > a{}
55. SAY WHAT NOW?!
56. SAY WHAT NOW?! Write less CSS Reuse more CSS — design patterns! Let the HTML do some work for a change! Get some rules, stick to them Comments, comments, comments!!! People are human
57. CSS ISNT ALWAYS THE PROBLEM Other developers Lack/loss of knowledge Differing techniques Forgetfulness ,
58. OTHER DUDE(TTE)S Nicole Sullivan — @stubbornella Jonathan Snook — @snookca Nicolas Gallagher — @necolas
59. HARRY ROBERTS csswizardry.com @csswizardry