CSS Trickery at the BBC - 2016 - MMU

What are challenges of working with CSS at scale? How we implement CSS at the BBC Sport by combining several techniques and approaches including OOCSS, BEM and ITCSS.

Transcript

1. CSS Trickery
2. Shaun Bent Senior Front End Developer Specialising in CSS for large sites @shaunbent
3. SPORT
4. LIVE
8. CSS
9. Working with CSS
10. “It’s just CSS” Lots of developers
11. “Why is CSS not treated as a first class citizen?” Adam Bulmer - BBC
12. “Writing CSS is easy, architecting it isn’t” Chris Pearce - Campaign Monitor
13. “Javascript doesn’t suck, you’re just doing it wrong” CSS Douglas Crockford - JavaScript
14. CSS is... (I borrowed this bit from Harry Roberts)
15. Old Can’t be changed Global namespace Inheritance based Very, very loose Source order critical Cascade needs managing
16. “Specificity negates all of the above” Harry Roberts - csswizardy
17. It doesn’t matter how well-considered your source order is; how well you’re utilising the cascade; what naming conventions you use; specificity can undo everything.
19. “Not very suitable for building large front-ends with” Harry Roberts - csswizardy
20. Developers
22. Treat CSS like no other language Focus on the wrong things Lack of structure Adding new styles to the end of stylesheets Lack of knowledge
23. “CSSing it into submission” Me
24. “Smart people on great teams cede to the fact that they are afraid of their own CSS. You can't just delete things as it's so hard to know if it's absolutely safe to do that.” Chris Coyier
26. Deleting CSS
27. “Our best practices are killing us” Nicole Sullivan
28. Classits! Never add non-semantic elements Or non-semantic classes Use descendant selectors exclusively
29. (My girlfriend says Beyoncé is the queen of Sass)
30. CSS Preprocessor Put Sass in, get CSS out Variables, Functions, Mixins, Loops, Logic & Magic Massively helps with working at scale
31. “Causes developers to completely loose their f*cking minds” Me
32. OMG Sass!!
33. // Colour them $sport-yellow: #ffdf43; $news-red: #bb1919; $iplayer-pink: #f54997; $live-blue: #1169f6; $gel-orange: #e4712a; // Map them $products: ( 'sport': $sport-yellow, 'news': $news-red, 'iplayer': $iplayer-pink, 'live': $live-blue, 'gel': $gel-orange ); // Loop them @each $product-name, $product-colour in $products { .button--#{$product-name} { background-color: $product-colour; } } (22 lines)
34. // Colour them $sport-yellow: #ffdf43; $news-red: #bb1919; $iplayer-pink: #f54997; $live-blue: #1169f6; $gel-orange: #e4712a; // Output them .button--sport { background-color: $sport-yellow; } .button--news { background-color: $news-red; } .button--iplayer { background-color: $iplayer-pink; } .button--live { background-color: $live-blue; } .button--gel { background-color: $gel-orange; } (12 lines)
35. I love Sass but don’t over do it Less useful than a knowledge of architecture Makes nothing better, only faster to write Still only generating CSS
36. Working with CSS CSS isn’t perfect Developers, Developers, Developers Best practices Sass
37. Writing CSS
38. Avoid IDs in CSS
39. Magic Numbers
40. .some-class { position: absolute; top: 0; left: 84px; }
41. Over-qualifying selectors
42. ul.list { } a.button { } div.body { }
43. .list { } .button { } .body { }
44. Dangerous selectors
45. div { color: hotpink; padding-top: 16px; margin-bottom: 16px; }
46. Unnecessary nesting
47. .articles .article { }
48. .article { }
49. Comments
51. CSS Architecture
52. OOCSS OOCSS
53. Abstracted design patterns Separate structure and skin Very DRY Promotes consistency
57. <div class=“o-media"> <div class=“o-media__img”> … </div> <div class=“o-media__body"> … </div> </div>
58. <div class=“o-media"> <div class=“o-media__img”> … </div> <div class=“o-media__body"> … </div> </div> .o-media { @include clearfix; display: block; } .o-media__img { float: left; margin-right: 16px; } .o-media__body { display: block; overflow: hidden; }
59. “Balancing the books” Me
60. BEM
61. Block Element Modifier
62. More than just a naming convention …although thats probably the best part Transparent Readable More useful in HTML than it is in CSS
63. <div class="block block--modifier"> <div class="block__element"></div> </div>
64. <div class=“box profile pro-user"> <img class=“avatar image”/> <p class="bio"></p> </div>
65. <div class=“box profile profile--pro-user”> <img class=“avatar profile__image”/> <p class=“profile__bio”></p> </div>
68. Generic Explicit
69. Far 
 Reaching Localised
70. High 
 Specificity Low 
 Specificity
71. Settings Tools Generic Base Objects Components Utilities
72. Settings - global variables, colour swatches Tools - default mixins and functions Generic - ground zero styles (resets, normalise, etc) Base - unclassed HTML elements (type selectors) Objects - cosmetic free design abstractions Components - designed components, chucks of UI Utilities - helpers and overides
75. Everything has a place to live People know where to look to find things Sane source order Reduced waste/redundancy Increased scalability Tamed specificity
76. “Do you use OOCSS or BEM?” People of the web
77. CSS @ the BBC
79. HOMEPAGE SEARCH TV TRAVEL LIVE ACADEMY FOOD R&D
81. Typography Grid Iconography GEL Foundation }
83. .gel-canon .gel-trafalgar .gel-double-pica .gel-great-primer .gel-pica .gel-long-primer .gel-brevier .gel-minion
86. Settings Tools Generic Base GEL Objects Components Utilities
87. Objects (Generic Lego analogy)
88. “…objects are open to extension but closed to modification” Harry Roberts
89. “…state cannot be modified after [they have been] created” Wikipedia
90. Components
91. Criteria of a component ..is a discrete custom element of the UI? ..encloses specific semantics and styling? ..can exist completely stand-alone?
92. Utilities (Generic Lego analogy falls down a little here)
93. !important
94. “Utilities exist because every UI consists of really common styles” Chris Pearce
95. “…not everything can be a component or taken care of by objects” Chris Pearce
96. A scientific graph: Core Styles Component Styles 20% 80%
98. Code Reuse
101. Grandstand
102. Grandstand is a scalable front end architecture and a lightweight Sass framework.
103. Architecture & Code
104. Settings Tools GEL Objects Utilities
105. Open Source?
106. “The best CSS is no CSS” Me
107. Done!
108. Digital Media Graduate Scheme http://bbc.in/1oTchm0