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 system complet : Reset
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