CSS, préprocesseurs, BEM, CSS Modules, Styled Components...

COMMENT CHOISIR ?

Albéric Trancart

@alberictrancart

Développeur @Theodo

JS et css

Emotion

Styled components

CSS Modules

Styled JSX

JSS

Bootstrap

Material UI

Semantic UI

Materialize

Bulma

Tachyons

Tailwind

Foundation

Glamor

ITCSS

SMACSS

OOCSS

BEM

Atomic CSS

PostCSS

Sass

Less

Stylus

A BATTLE OF CSS AND JS

JS-in-css ?

???

Les PROBLÈmes avec le css

lISTE DES DOULEURS LES PLUS COURANTES

diffÉrences entre navigateurs

CSS Variables

Du code global

a {
    text-decoration: underline;
}

.button {
    text-decoration: none;
}
<a class="button" href="..." title="...">
    Lien en forme de bouton
</a>
let index = 0;

const articles = [];

Factorisation & overrides

.input, .select, .textarea, .checkbox {
    background-color: white;
    border: solid 1px grey;
    border-radius: 3px;
}
.input:disabled, .select:disabled, .textarea:disabled, .checkbox:disabled {
    border-color: grey;
}

.input.error, .select.error, .textarea.error, .checkbox.error {
    border-color: red;
}

COMPORTEMENT DIFFICILE À APPRÉhender

.dt-left + a {
    height: 328px;
    width: 93%;
    z-index: 1501;
    font-size: 0.785895rem;
}

COMPORTEMENT DIFFICILE À APPRÉhender

vertical-align: middle; margin: 0 auto; all the things!

Étape 1 : une ui adaptée

from scratch vs design library

Les choix faciles

Pas de designer ?

Design library

UI pas importante ?

Design library

Identité visuelle forte ?

From scratch

Les choix moins faciles

Lister les candidats, puis pour chaque library :

1. La library est-elle dispo pour ma techno front ?

2. La library repond-t-elle aux attentes UX/UI ?

(regarder les composants de demo, le look & feel...)

3. Puis-je obtenir le résultat voulu en 2h en ne modifiant que les variables du thème ?

(se mettre d'accord avec le/la designer sur un styleguide)

KO

Non

Oui

KO

Non

OK

Oui, exactement

"Presque"

KO

Non

Oui

OK

Si au moins une OK

Design library

Si aucune OK

From scratch

Quelques exemples

Quelques exemples

Quelques exemples

Quelques exemples

Étape 2 : choix de l'outillage

SASS, CSS Modules, BEM, Styled-components... ?

CHOIX de la techno

From scratch

Techno qui force à raisonner en composants

Design library ?

Celle de la library

Material UI : jss

Bootstrap : Sass

Semantic UI : Less

React : Styled-components

VueJS, AngularJS : Sass

Template : Sass + BEM

Prendre des raccourcis pour les composants complexes (tooltips, datepicker...)

Étape 3 : diffÉrences entre NAVIGATEURS

to reset or not to reset ?

RESET ou NON ?

From scratch

Design library ?

Non ! La lib est censée remplir ce rôle

* {
  box-sizing: border-box;
}

Étape 4 : mesures anti-magie

Mise en place de la stylesheet

la stylesheet

From scratch

Créer un fichier stylesheet (à partager avec les designers !)

Design library ?

Celle de la library

la stylesheet

const colorPalette = {
  background: '#eeeeee',
  text: '#3a3a3a',
  primary: '#3569a4',
  primaryText: '#ffffff',
  secondary: '#21272b',
  secondaryText: '#ffffff',
};

export const typography = {
  h1: css`
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    font-family: 'Barlow, sans-serif';
  `,
  main: css`
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Lato, sans-serif';
  `,
};
export const breakpoints = {
  sm: '768px',
  md: '992px',
  lg: '1200px',
};

export const borderRadius = '4px';

export const shadows = '0 3px 12px 0 black';

export const zIndex = {
  topbarLayer: 1,
  modalLayer: 2,
};

export const Grid = size => `${size * 8}px`;

// Other app-wide style constants
export const sidebarWidth = Grid(20);

Étape 5 : le linter

imposer le respect des bonnes pratiques

La police du style

module.exports = {
  processors: ['stylelint-processor-styled-components'],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-prettier',
    'stylelint-config-styled-components',
  ],
  plugins: ['stylelint-declaration-strict-value'],
  rules: {
    'declaration-no-important': true,
    'selector-max-id': 0,
    'selector-max-class': 2,
    'selector-max-type': 0,
    'scale-unlimited/declaration-strict-value': [
      [
        'color', 
        'background-color',
        'border-color', 
        'font-size',
        'line-height',
        'z-index',
        'box-shadow'
      ],
    ],
  },
};

Stylelint

Factorisation

Architecture à composants

Différences entre navigateurs

Éventuel Reset

Overrides

Design library vs from scratch

Stylesheet

Stylelint

Code global

Architecture à composants

Stylelint

Lisibilité du code

Stylesheet + Stylelint

Merci !

CSS, préprocesseurs, BEM, CSS Modules, CSS-in-JS... comment choisir ?

By Albéric Trancart

CSS, préprocesseurs, BEM, CSS Modules, CSS-in-JS... comment choisir ?

  • 1,125