Re-usable and Scalable CSS

A small talk I gave at a development clinic for my colleagues at Zicht Online.

It explains constructs that help with creating CSS that's re-usable, scalable, and a pleasure to work with.

And there's a bit about PostCSS at the end.

* The still image at the end is actually an animated GIF. No talk should go without animated GIFs.

Transcript

1. CSS* re-usable scalable * and a bit of PostCSS at the end
2. Re-usable Being able to apply styles across components and views without changing a single line of CSS.
3. Scalable Being able to make changes with confidence in what you’re actually changing.
4. CSS is Lego ▪ Classes are building blocks. ▪ Stack them together to build components. ▪ More classes, more fun. ▪ Seriously: there’s no harm in adding classes to an element.
5. Benefits ▪ Faster design. Just apply classes. ▪ File size. Prevents repetition of properties. ▪ Developer comprehension. Smaller classes are easier to understand. Not really a benefit, but still: ▪ You were doing it all along. Bootstrap.
6. Before <div class=”product”> … </div> .product { float: left; width: 33%; background-color: #000; } <div class=”news”> … </div> .news { float: left; width: 33%; background-color: #fff; }
8. After <div class=”product column--4”> … </div> .column--4 { float: left; width: 33%; } .product { background-color: #000; } <div class=”news column--4”> … </div> .news { background-color: #fff; }
10. Namespacing ▪ Indicates the scope of a class. Element, local, global? ▪ Helps bridge the gap between CSS source and where it’s used. ▪ Groups like-minded classes. ▪ Especially helpful when viewed in HTML. Source: http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
11. Suggestions Implementation via prefixes. Object -o High-level abstract classes. Very basic in implementation, but leads to DRY code. Example: .o-ui-list for resetting style of unordered lists. Component -c Implementation of a specific piece of UI. Changes to code have no side effects. Example: .c-button.
12. Suggestions, part 2 Utility -u Does one thing only and is not tied to a specific UI. Example: .u-absolute for applying position: absolute to an element. Scope -s Creates a new styling scope for styling elements inside it. Example: .s-cms-content for styling WYSIWYG content. JavaScript -js Indicates the element is bound by JavaScript and should be treated with caution. Example: .js-open-navigation.
13. Suggestions, part 3 State -is or -has Indicates the element has a temporary state. Example: .is-open. Theming -t Indicates the element looks a certain way because a theme is applied. Example: .t-corporate. Hack _ The style inside this class is a temporary hack that should ideally be refactored. Example: ._fix-chrome-bug-3431
14. Utility classes Example: .u-margin--b2 { margin-bottom: 2rem; } ▪ Use with moderation. ▪ Use when a component is overkill. E.g. applying a margin to some title on a page. ▪ Feels like inline styles Scary, but keeps control in CSS or SASS.
15. Prevent overriding styles Instinct tells you to provide a default. .c-button { padding: 1rem; background-color: blue; color: white; } .c-button--red { background-color: red; color: black; } Becomes a problem when you have to override multiple styles.
16. Separate style & structure .c-button { padding: 1rem; } .c-button--red { background-color: red; color: black; } .c-button--blue { background-color: blue; color: white; }
17. Usable typography Styling elements directly causes problems. h2 { color: red; } <div class=”c-news”> <h2 class=”c-news__title”>Hodor</h2> </div> Now c-news__title unwillingly inherits all styles from h2.
18. Usable typography Solution: create typographic classes you can use everywhere, and only use element selectors to reset. h2 { margin: 0; } .c-copy--h2 { color: red; } .c-news__title { // Styles specific to news }
19. Re-usable typography Share typography between components and WYSIWYG content. %title--h2 { color: red; } .c-copy--h2 { @extend %title--h2; } .s-cms-content { h2 { @extend %title--h2; } }
20. Semantic classes /giphy no!
21. Don’t use semantic classes ▪ Google doesn’t care. ▪ A browser doesn’t care. ▪ No-one cares.
22. Actually, ... Developers care. Name the thing after what it looks like. ▪ Easier mental model “Was the button for the call to action blue or red?” ▪ Easier to transfer A class .product might not make sense on a news component. ▪ Easier to talk about Design is visual. Let your class names reflect that.
23. Comments, please CSS is a language that doesn’t lend itself to write self-documenting code. ▪ Never enough comments. Add a comment for each class. ▪ Explain your thought process. ▪ Document anything weird. Browser bugs, classes made while drunk et cetera.
24. Zum beispiel /** * Introduction element. * * 1. The background image is a bit high, so make some room at the bottom in case the content is not high enough. */ .c-introduction { background-image: image: url('../images/stain--regular--white.png'); @media (min-width: $screen-md) { padding-bottom: 20px; /* [1] */ } }
25. PostCSS ▪ A CSS transformer built with JS. ▪ Post-processing. ▪ Pre-processing. ▪ Does “nothing”: all the work is done with plugins.
26. There’s a plugin for that ▪ autoprefixer Automatically adds vendor prefixes. ▪ rtlcss Generates a stylesheet for right-to-left locales. ▪ postcss-image-inliner Creates inline base64-encoded images to save requests. ▪ postcss-lolcat-stylesheets
27. ... .ohai { posishun: relativ; bakground-color: chawklit; bakground-image: none; font-pplz: Helvetica, Arial; color: silvr; lettr-spacin: 2px; paddin-rite: 30px; }
28. Sass replacement? No. ▪ No defined syntax means no editor support. ▪ Configuring plugins = a bitch. ▪ Anyone can make a plugin: lacking documentation and support. ▪ Plugin running order can break things.
29. Use it for what it’s good at Great at automating laborious tasks.
30. Done