CompleCSS

Iain van der Wiel
Senior front-end developer
Twitter @iain_vdw Github @iainvdw

E-sites

CSS schrijven
is simpel...

...maar
niet makkelijk

Complexiteit in CSS

  • Ins & outs van CSS
  • Structuur
  • Verantwoordelijkheid
  • Inconsistentie

Eigenaardigheden
van CSS

Specificity

  1. Elementen & pseudo-elementen 
                :before, :after
  2. Classes & pseudo-classes 
                :hover, :focus
  3. ID's
  4. Inline styles
  5. !important

Cascade

  1. User agent
  2. User
  3. Author
  4. CSS animations [1]
  5. Author !important
  6. User !important
  7. User agent !important
[1] Maken niet direct onderdeel uit van de cascade, pas wanneer animaties lopen.

Cascade

User-agent CSS:

li { 
  margin-left: 10px 
}

Author CSS:

/* Reset */
li { 
  margin-left: 0 
}

@media screen {
  li { 
    margin-left: 3px
  }
}

User CSS:

.specific { 
  margin-left: 1em 
}

Inheritance


  
Deze is rood.






  
Deze is blauw.

Source order

CSS: 
.c-red {
  color: red;
}

.c-blue {
  color: blue;
}
HTML: 

  Rood. Of toch niet?

* verplicht kattenplaatje

Waaraan herken
je complexiteit?

Qualified selectors

Meh...

div ul li a {
  font-weight: bold;
  text-decoration: underline;
  color: red;
}

Qualified selectors

Beter!

/* Sensible default */
a {
  text-decoration: underline;
}

/* Class voor specifieke styling */
.list-link {
  font-weight: bold;
  color: red;
}

Resetten van default properties

Meh...

/* Responsive table */
td { 
  display: block; 
}

@media screen and ( min-width: 640px ) {
  td { 
    display: table-cell; 
  }
}

Resetten van default properties

Beter!

@media screen and ( max-width: 640px ) {
  td { 
    display: block; 
  }
}

Te hoge specificity

Meh...

#product-list .product h3 a {
  font-weight: bold;
  color: red;
}

#sidebar .block h2 a {
  font-weight: bold;
  color: red;
}

Te hoge specificity

Beter!

.title-link {
  font-weight: bold;
  color: red;
}

Inconsistentie


Image credit: Smashing Magazine - Atomic Workflow

Inconsistentie

Veel onnodige variatie in o.a.:

  • Typografie
  • Kleurgebruik
  • Witruimte
  • Verwarrend!

Inconsistentie

  • Breng variaties en uitzonderingen terug

    “Is deze variant wel écht nodig?”

  • Zorg voor voorspelbaar gedrag en toepassing

    “Is dit component op alle plekken hetzelfde?”

  • Creëer een design systeem

    “Valt deze toepassing te herleiden uit een systeem?”

CSS Components

met behulp van:

  • ITCSS
  • BEM
  • OOCSS (+ mixins)
  • Atomic Design

ITCSS

Inverted Triangle CSS

ITCSS - structuur

┌── settings/
│   ├── colours.scss
│   └── grid.scss
├── tools/
│   ├── functions.scss
│   └── mixins.scss
├── generic/
│   └── normalize.scss
├── base/
│   ├── forms.scss
│   └── typography.scss
├── objects/
│   ├── media.scss
│   └── grid.scss
├── components/
│   ├── main-nav.scss
│   └── article-list.scss
└── trumps/
    └── helpers.scss

Zonder ITCSS

Met ITCSS

Waarom ITCSS?

  • Vermindert problemen met source order en specificity
  • Verbetert gemak onderhoud en doorontwikkeling
  • Moedigt aan tot nadenken scheiding objects en components

BEM - Block, Element, Modifier

/**
 * Product item component
 */
// Block
.product { [...] }

// Elements
.product__title { [...] }
.product__image { [...] }

// Modifiers
.product--highlighted { [...] }
.product__thumb--large { [...] }

Blocks, Elements, Modifiers


  

    Productnaam
  

  

    Beschrijving van product
  

  

    € 42,-

Voordelen van BEM

  • Verdeelt styling in componenten
  • Uniforme naamgeving over hele codebase
  • Relaties tussen elementen af te leiden uit HTML
  • Lage specificity

OOCSS

Object-oriented CSS

OOCSS — principes

  1. Separate containers from content
  2. Separate structure from skin

Separate containers from content

Meh...

#sidebar h3 {
  font-size: 2em;
  color: #f30;
}

#footer h3 {
  font-size: 2em;
  color: #f30;
}

Beter!

.sub-heading {
  font-size: 2em;
  color: #f30;
}

Separate structure from skin

.btn-primary {
  border: 2px solid orangered;
  border-radius: 3px;
  padding: .33em .66em;
  font-size: 1.2rem;
  font-weight: bold;
  background: orange;
}
 
.btn-default {
  border: 1px solid limegreen;
  border-radius: 3px;
  padding: .25em .5em;
  font-size: 1rem;
  font-weight: normal;
  background: lime;
}

Separate structure from skin

/* Structure */
.btn-medium {
  border: 1px solid;
  padding: .33em .66em;
}

.btn-large {
  border: 2px solid;
  padding: .25em .5em;
}


/* Skin */
.btn-primary {
  border-color: orangered;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: orange;
}

.btn-default {
  border-color: limegreen;
  font-size: 1rem;
  font-weight: normal;
  background-color: lime;
}

OOCSS Mixins

/* Structure */
@mixin btn-medium {
  border: 1px solid;
  padding: .33em .66em;
}

@mixin btn-large {
  border: 2px solid;
  padding: .25em .5em;
}


/* Skin */
@mixin btn-primary {
  border-color: orangered;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: orange;
}

@mixin btn-default {
  border-color: limegreen;
  font-size: 1rem;
  font-weight: normal;
  background-color: lime;
}

OOCSS Mixins

.btn-cta {
  @include btn-large;
  @include btn-primary;
}

OOCSS Mixins

Extra voordelen:

  • Styling zit volledig in CSS ipv verweven met HTML
  • Ongebruikte mixins genereren ook geen output meer
  • Gzip kan herhaalde CSS properties veel beter comprimeren dan herhaalde selectors [1]
  • Simpliciteit van CSS output is hoger [1]
    Meer rules, minder selectors

[1] Sass Mixins vs Extends: The Data

Atomic Design

We’re not designing pages,
we’re designing systems of components.

Stephen Hay – Responsive Design Workflow

Atomic Design

  • Ontleed pagina's in templates
  • Ontleed templates in componenten
  • Ontleed componenten in "legosteentjes"
Atomic Design

Atoms

  • Bouwstenen van het design systeem
  • Basis HTML-elementen
  • Componenten die niet kleiner kunnen worden gemaakt, zonder functionaliteit te verliezen
Losse formulier elementen

Molecules

  • Simpelere componenten
  • Bestaan uit meerdere atoms
  • Verantwoordelijk voor klein deel van een interface
Een simpel formulier bestaande uit een paar velden en een verzendknop

Organisms

  • Complexere componenten van een pagina
  • Groepen van molecules of atoms
  • Verantwoordelijk voor grotere delen van een interface
Een balk met filteropties voor producten

Templates

  • Samengesteld uit molecules en organisms
  • Definiëren van contentstructuur
  • Wat wordt de vorm van de content?
Een screenshot van een webpagina template

Pages

  • Invulling templates met "echte" content
  • Checken waar het design wringt
  • Wringt het? Terug naar de tekentafel!
  • Dit is wat de bezoeker te zien krijgt
  • Meest concreet van het design system
Een screenshot van een webpagina

Dit is Atomic Design

  • Atoms kleinste onderdelen van een pagina, kunnen niet kleiner gemaakt worden zonder functionaliteit te verliezen
  • Molecules eenvoudige componenten samengesteld uit atoms
  • Organisms complexere onderdelen of "lagen" van een interface
  • Templates blauwdruk van de contentstructuur van de componenten op een pagina
  • Pages templates testen met invullen en variaties in content

Voordelen Atomic Design

  • Bevordert consistentie
  • Aanmoedigen hergebruik
  • Elimineert uitzonderingen
  • Testen van afzonderlijke onderdelen
  • Helpt bij afbakenen van verantwoordelijkheden

Wanneer Atomic Design?

  • Groot team
  • Langdurend project
  • Veel doorontwikkeling / onderhoud
  • Veel verschillende componenten

Hoe pas ik het toe?

Verschillende tools. Onder andere:

Conclusie

  • Maak slim gebruik van de features van CSS
  • Structureer je stylesheet met ITCSS
  • Structureer je componenten met BEM
  • Ontleed gedeelde styles in mixins
  • Ontleed pagina's in herbruikbare componenten
  • Maak een design system van componenten

Resources

Vragen?