hr-2016-workshop-notes.md

Notes I took whilst going through https://github.com/csswizardry/csswizardry.net/blob/gh-pages/workshops/css-architecture-2016.pdf

physical product design

we are mass-producing our UIs

web design is more akin to manufacturijng than graphic design

manufacturing has been around longer than web design

components should never carry layout rules

stops them from being reusable

use an abstracted meta-system to lay them out

skeleton analogy

skeleton is OOCSS

skin is the cosmetics we apply on top of it

skeleton can exist on its own

skin needs skeleton underneath it

media object

<blockquote class="Testimonial media">
  <img src alt class="Testimonial-image media-image" />
  <p class="Testimonial-text media-body">
   …
  </p>
</blockquote>

optimisation

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

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

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

theme palettes

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;
}

user customisation

.u-color-user {}
.u-color-user-bg {}
.u-color-user-border {}

layout

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

scopes

CMS parts called scopes they lead to bad css (the way I do it now!)