Have we moved beyond CSS?

 

Tim Hacker

How many people have used:

  • Sass/Less
  • PostCSS
  • CSS Modules
  • CSS-in-JS

 

These slides have lots of links!

CSS best practices

  • Avoid !important
  • Use classes where possible
  • Avoid deeply nested selectors
  • Split your CSS files out
  • Don't just add another rule at the bottom
  • Don't leave the mess you've made once you just about got it working! (Jenga!)
  • Maybe the biggest issue to solve: Global styles

But these are just down to discipline. We need help!

BEM

  • Block Element Modifier
  • Component-based thinking

HT: http://getbem.com/naming/

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

But this is fiddly to get right...

Sass

  • Variables

  • Nesting

  • &

  • Imports

  • Mixins

  • Extends

https://sass-lang.com/

CSS preprocessor that adds features to CSS

Sass example

@import "variables";

.selector {
  margin: $size;
  background-color: $brandColor;

  .nested {
    margin: $size / 2;
    
    &:hover {
        text-decoration: underline;
    }
  }
}
.selector {
  margin: 1em;
  background-color: #f60;
}

.selector .nested {
  margin: 0.5em;
}

.selector .nested:hover {
  text-decoration: underline;
}

HT: https://sass-lang.com/guide

$brandColor: #f60;
$size: 1em;
_variables.scss

Sass issues

  • Final Output Is On You
  • Matching nesting to HTML structure
  • Nesting that goes off the screen
  • extends can result in nasty generated CSS
  • Another syntax that you have to learn

What about Javascript frameworks?

Going quite a long way away from 'normal' CSS

PostCSS

A tool for transforming CSS with JavaScript

http://postcss.org/

  • Start thinking in a modular way - all the plugins - https://www.postcss.parts/
  • Increase code readability
  • Use tomorrow's CSS, today!
  • The end of global CSS
  • Avoid errors in your CSS
  • Actually used by Vue for scoped styles

Into JSON AST

(Abstract Syntax Tree)

Back to CSS the browser can read

HT: https://css-tricks.com/want-make-postcss-plugin/

Each plugin works its magic in JS

Autoprefixer

Magically add browser vendor prefixes without you having to remember all the syntax!

a {
  width: calc(50% - 2em);
  transition: transform 1s
}
a {
  width: -webkit-calc(1% + 1em);
  width: calc(1% + 1em);
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
 }

HT: https://css-tricks.com/autoprefixer/​

Linting

A mistake preventing machine for a language that is really easy to be sloppy with...

HT: https://css-tricks.com/stylelint/

cssnext

Use all the new features from CSS4 today!

Write future proof CSS without worrying about specific preprocessor syntax

http://cssnext.io/

  • Variables
  • Custom selectors
  • Custom media queries
  • Nesting (use with care!)

Initial: any

  • Reset all rules on an element back to defaults.
  • Particularly handy if you are using a framework and/or IE!

https://github.com/maximkoretskiy/postcss-initial

.link {
  all: initial;
}
.link {
  animation: none 0s ease 0s 1 normal none running;
  backface-visibility: visible;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  border: medium none currentColor;
  border-collapse: separate;
  border-image: none;
  border-radius: 0;

  ...
}

Accessibility

Full searchable catalog

https://www.postcss.parts

Need something else?

Write your own:

Demo

Why PostCSS?

  • Modular and composable
  • Keep it simple with only plugins you need
  • Can write custom plugin if needed
  • Fast!
  • When browser support catches up you can remove it

Back to CSS

Once we have full browser support we can just remove the redundant PostCSS plugins

Resources:

Questions?

tim.hacker@valtech.co.uk

@timhacker