Notes I took whilst going through https://github.com/csswizardry/csswizardry.net/blob/gh-pages/workshops/css-architecture-2016.pdf
we are mass-producing our UIs
web design is more akin to manufacturijng than graphic design
manufacturing has been around longer than web design
stops them from being reusable
use an abstracted meta-system to lay them out
skeleton is OOCSS
skin is the cosmetics we apply on top of it
skeleton can exist on its own
skin needs skeleton underneath it
<blockquote class="Testimonial media">
<img src alt class="Testimonial-image media-image" />
<p class="Testimonial-text media-body">
…
</p>
</blockquote>
there's a magic number for your css
TCP slow start (congestion management) limits first responsive size to 14KB
If you can get your critical CSS under 14KB, you can get it over the wire in just one packet transfer
link rel dns-prefetch/preconnect/prefetch/subresource/prerender
http/2 changes things
no need for concatenation
better caching strategies
per-page css gets easier
preemptively send assets
lots more connections per domain
no longer need to concatenate or domain shard
multiple files becomes advantageous
caching strategies:
- send low-rate-of-change files in one file - normalize.css, utlities etc
- send high-rate-of-change styles in another - components, themes
store theme data in a sass config file
reassign literal properties (#c00) to semantic ones (brand-colour)
can re-theme/rebrand the entire project from one place
perfect for white-label solutions
.c-message {
…
}
.c-message--error {
color: $color-error;
}
.u-color-user {}
.u-color-user-bg {}
.u-color-user-border {}
layout system not grid system
grids are page-level, layout systems are for anything
use proportions, not columns
keep layout away from components
construct layouts in the dom, extra markup but much faster to build
.col-6 is not nestable, based on absolutes, even if fluid
.u-1/2 is infinitely nestable. it always makes sense
delegate layout to a container
prefer classes in markup
helper classes to nudge things around
handle one-offs and edge-cases
.c-nav-primary nav's persistent styles
.c-page-head__nav nav's contextual styles
CMS parts called scopes they lead to bad css (the way I do it now!)