I am

Naiara Abaroa


Naiara Abaroa

UI designer/developer at WiMi5

@nabaroa naknak.me

5 gold nuggets

25 minutes

Are you a pioneer?

You'll enjoy ;)

1 Bye bye -prefixes-

The problem


background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */


The solution

CSS snapshot 2015

Responsible Implementation of CSS

Experimentation and Unstable Features

Implementations of unstable features that are described in W3C specifications but are not interoperable should not be released broadly for general use; but may be released for limited, experimental use in controlled environments.


We want to allow both authors and implementors to experiment with the feature and give feedback, but prevent authors from relying on them in production websites and thereby accidentally "locking in" (through content dependence) certain syntax or behavior that might change later.

How can we use unstable features?

about:config /*Firefox*/

chrome://flags/ /*Chrome*/

Vendor-prefixes for closed enviroments

Proprietary & Non-standardized

... A CSS feature is a proprietary extension if it is meant for use in a closed environment accessible only to a single vendor’s user agent(s). A UA should support such proprietary extensions only through a vendor-prefixed syntax and not expose them to open (multi-UA) environments such as the World Wide Web.

For example, Firefox’s XUL-based UI, Apple’s iTunes UI, and Microsoft’s Universal Windows Platform app use extensions to CSS implemented by their respective UAs.

Still we have to deal with the -prefix

Use autoprefixer


2 Grid layout

Grid Terminology

Grid Lines
Grid Track
Grid Cell
Grid Area

Grid lines

The grid lines are the ones dividing horizontally and vertically a grid. And they’re actually numbered, starting at 1.

Numbered grid lines example

    display: grid; 
    grid-template-columns: 300px 200px 100px; 
    grid-template-rows: 100px 50px;

Grid placement properties

Shorthand for grid-column-start and grid-column-end properties.
Shorthand for grid-row-start and grid-row-end properties.
Shorthand to set the 4 placement properties in just one declaration.
Place item using line numbers example

The long way:

    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end 2;

Easier with shorthands:

    grid-column: 2 / 4; 
    grid-row: 1 / 2; 

Cell spanning

The same position using span.

Place item using span example

    grid-column: 2 / span 2; 
    grid-row: 1;

Negative line numbers

Negative numbers allow you to reference the lines starting from the end of the grid. It's like a reverse.

Place item using negative line numbers example

Useful if you want to be sure that the item is in the last column, independently of the number of tracks, you’ll just need to set: grid-column-end: -1;

Named grid lines

You can name the grid lines, so you don’t need to remember the specific number to reference to them.

Place item using line names example

    display: grid;
    grid-template-columns: [start] 300px [main] 200px [aside] 100px [end];
    grid-template-rows: [top] 100px [middle] 50px [bottom];

One line can have several names, you just need to set them in the definition:

    grid-template-rows: [top start] 100px [middle center] 50px [bottom end];

The names of the lines can be repeated. To reference them you’ve to use a number that can be again positive or negative.

Place items with repeated named grid lines example

  display: grid;
  grid-template-columns: [col] 200px [gap] 50px 
  [col] 200px [gap] 50px [col] 200px [gap];
.item1{ grid-column: col 2;}
.item2{ grid-column: col 1 / gap 2;}
.item3{ grid-column: col -1;}

And of course, you can span to a named grid line.

Place item spanning to named grid line example

    grid-column: col 2 / span 2 gap;

Grid areas

You can define grid areas and place items directly on them. You have to use the grid-template-areas property to put names to the different areas in your grid. And you could use the grid-area shorthand directly to place the items.

Place items inside grid areas example

    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    'title title title title aside'
    'nav main main main aside'
    'nav main main main aside'
    'footer footer footer footer footer';

.item1{grid-area: title;}
.item2{grid-area: nav;}
.item3{grid-area: main;}
.item4{grid-area: aside;}
.item5{grid-area: footer;}

Implicit names

Grid areas create implicit names for the grid lines surrounding them. These implicit names use the “-start” and “-end” suffixes.

E.g. the “title” area creates 4 implicit names for the lines (2 in each axis):

  • Left line: “title-start”
  • Right line: “title-end”
  • Top line: “title-start”
  • Bottom line: “title-end”

And you can reference those lines when placing an item, instead of using the whole area.

Place items inside grid areas example Place item using implicit names from grid areas example

Implicit grid

It's possible to place items outside of the explicit grid, creating implicit tracks automatically. The size of these tracks is controlled by grid-auto-columns and grid-auto-rows properties.

Implicit grid example

    display: grid;
    grid-template-columns: 200px 200px;
    grid-auto-columns: 100px;

A coupe of examples:

    display: grid;
    grid-template-columns: 200px 200px;
    grid-auto-columns: 100px;

    grid-column:2 / span 3;
Implicit grid with span example

Implicit grid before explicit example

There's more about Implicit grid & Named grid lines, and special cases...

But for 5 min is enough!

the fr Unit

The new kid on the block

The fr unit can be used for grid-rows and grid-columns values. It stands for "fraction of available space". Think of it as percentages for available space when you've taken off fixed-sized and content-based columns/rows. As the spec says:

The distribution of fractional space occurs after all 'length' or content-based row and column sizes have reached their maximum.

The repeat() function

It allows you to define a pattern repeated X times.

Let's say you want to do 12 equal-width columns spaced from each other by a 1% margin:

grid-template-column:1fr repeat(11, 1% 1fr);

It is the same as:

grid-template-column:1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr;

The specification is really flexible regarding how to place items on the grid.

Choose your favourite way

Can Iuse?

Enable CSS Grid Layout

Chrome logo


Enable the flag called Enable experimental Web Platform features going to:

Firefox logo


Enable the flag called layout.css.grid.enabled going to:

Internet Explorer logo


Enabled by default since IE10 (old syntax).

Prefixed -ms

Opera logo


Enable the flag called Enable experimental Web Platform features going to:

WebKit logo


Enabled by default in WebKit Nightly Builds.

Prefixed -webkit

Check the CSS Grid Layout polyfill by François Remy.

Example in use


3 Custom properties




Resolving dependency Cycles

This example shows a custom property safely using a variable:

:root {
   --main-color: #c06;
   --accent-background: linear-gradient(to top, var(--main-color), white);

The --accent-background property will automatically update when the --main-color property is changed.

:root {
--one: calc(var(--two) + 20px);
--two: calc(var(--one) - 20px);

 one   { --foo: 10px; }
 two   { --bar: calc(var(--foo) + 10px); }
 three { --foo: calc(var(--bar) + 10px); }

Cascade on custom properties

If a custom property is declared multiple times, the standard cascade rules help resolve it

    :root { --color: yellow; }
    div { --color: pink; }
    #alert { --color: blue; }
    * { color: var(--color); }


I inherited blue from the root element!

I got green set directly on me!
While I got red set directly on me!

I’m red too, because of inheritance!

Can I use?

Enable custom properties

Chrome logo


Enable the flag called Enable experimental Web Platform features going to:

Supported in next release 49

Firefox logo



Internet Explorer logo


Not supported

Roadmap Priority: Low
Opera logo


Not supported

WebKit logo


Supporten in next release 9.3

But we can use the sintaxis today



CSS extensions

W3C Editor's Draft

Custom selectors

W3C Editor's Draft


@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading { /* styles for all headings */ }
:--heading + p { /* more styles */ }
/* etc */

But this is the future



4CSS modules

The problem

The global scope


We’ve worked around the issues of global scope with a series of naming conventions like OOCSS, SMACSS, BEM and SUIT, each providing a way for us to avoid naming collisions and emulate sane scoping rules.

The solution

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.


Modular and reusable CSS!

  • No more conflicts.
  • Explicit dependencies.
  • No global scope.

It fits perfectly with React & Angular

The .foo class does not have to be unique on the project as it is not the actual class name that will be rendered.

/* style.css */

.foo {
  color: gold;
  width: 40em;
  margin: 0 auto;
import styles from './styles.css';

element.innerHTML = `
CSS Modules are fun.


This will generate something like this:

CSS Modules are fun.

._20WEds96_Ee1ra54-24ePy {
  color: gold;
  width: 40em;
  margin: 0 auto;


When using it through webpack with the default setup

Make it more readable

We can configure the class format in our Webpack config as a parameter to css-loader:

loaders: [
    test: /\.css$/,
    loader: 'css?localIdentName=[name]__[local]___[hash:base64:5]'

.foo class identifier from earlier would compile into this:

.MyComponent__foo___1rJwx { … }


composes: ;

It's possible to compose selectors.

/** theme.css **/

.background {
    background: rgba(0,0,0,.5);

/** MyComponent.css **/

.root {
  composes: background from "./theme.css"; /*or composes: background;*/
  margin: 10px;

div class="MyComponent__root _theme__background">

Setting up


The css-loader has CSS Modules built-in. Simply activate it by using the ?modules flag.



The plugin css-modulesify gives your Browserify build the ability to require a CSS file and compile it as a CSS Module.



The experimental JSPM loader jspm-loader-css-modules adds CSS Modules support to SystemJS & JSPM



The css-modules-require-hook works similarly to the Browserify plugin, but patches NodeJS's require to interpret CSS files as CSS Modules. This gives complete flexibility in how the output is handled, ideal for server-side rendering.

or postCSS...


5 PostCSS

Is Sass dead?

A tool for transforming CSS with JavaScript

Based on plugins

Build you own environment

Currently, PostCSS has more than 200 plugins

Great Plugins


Add vendor prefixes to CSS rules using values from Can I Use.

:fullscreen {

:-webkit-:full-screen {
:-moz-:full-screen {
:full-screen {


Use the latest CSS syntax today with cssnext

:root { 
    --red: #d33;
a { 
    &:hover {
        color: color(var(--red) a(54%));

a:hover { 
    color: #dd3333;
    color: rgba(221, 51, 51, 0.54);

CSS Modules

Work CSS like independent components

.name {
    color: gray;

.Logo__name__SVK0g {
    color: gray;

From Sass to PostCSS

Try it

It's possible

Sass postCSS

They can live together

What did I use?


Eskerrik asko!