BDX.IO - Maîtriser son style CSS

Transcript

1. MAÎTRISER SON STYLE CSS Pierre Renaudin @pierrerenaudin
3. POURQUOI S'OCCUPER DE SON CSS ? - conserver des feuilles de style maintenable - avoir un code transparent, propre et lisible - conserver des feuilles de style scalable
4. FAT Bootstrap Medium Twitter MDO Bootstrap Github HARRY ROBERTS CSS Guidelines Inuit.css
5. Pour suivre ou continuer http://bit.ly/manage-css-example
7. DU CSS VOUS DITES ? ça donne quoi après plusieurs itérations et plusieurs personnes ayant travaillé dessus ?
8. CSS // Pas bien .Timeline > .container > .header { background-color: rgb(240,240,240); margin: -15px -15px 15px -15px; padding: 15px; border-bottom: 1px solid #DDDDDD; } // Pas bien #Timeline .message .header .avatar img { width: 32px; height: 32px; border-radius: 3px; } Exemple de CSS après moults reprises
9. CSS Noms de classes en minuscules, séparés par des tirets Bannir les IDs et les !important // Pas bien .userProfile {} .postheader {} #top_navigation {} // Bien .user-profile {} .post-header {} .top-navigation {}
10. CSS Séparer chaque déclaration par un espace Séparer les sélecteurs // Pas bien .content, .content-edit { ... } .content-critical { ... } // Bien .content, .content-edit { ... } .content-critical { ... }
11. CSS Séparer les composants fonctionnels et ceux graphiques // Pas bien .button { margin-top: 40px; background-color: blue; padding: 6px 12px; } // Bien .button { background-color: blue; padding: 6px 12px; } .user-button { margin-top: 40px; }
12. HTML // Pas bien ul.user-list li span a:hover { color: red; } // Bien .user-list a:hover { color: red; } Sélecteurs plus direct
14. CSS ? ON VEUT MIEUX Oui, désolé CSS, mais on veut essayer quelque chose de différent. On t’oublie pas, t’inquiète pas.
15. SASS Votre meilleur ami au quotidien
16. SASS CSS $gray: #DDDDDD $padding-default: 15px $avatar-size: 90px $border-radius-base: 3px $font-size-small: 13px .user-container border: 1px solid $gray padding: $padding-default border-radius: $border-radius-base*2 .user-container { border: 1px solid #DDDDDD; padding: 15px; border-radius: 6px; } Définition de variables et opérations
17. SASS CSS .user .avatar margin-top: - ($avatar-size/2) img width: $avatar-size height: $avatar-size .user .avatar{ margin-top: -45px; } .user img { width: 90px; height: 90px; } Indentation significative ( fini {} et ; )
18. SASS $gray: #DDDDDD $padding-default: 15px $avatar-size: 90px $border-radius-base: 3px $font-size-small: 13px .user .container border: 1px solid $gray padding: $padding-default border-radius: $border-radius-base .avatar img width: $avatar-size height: $avatar-size margin-top: - ($avatar-size/2) border-radius: $border-radius-base +box-shadow(0, 1px, 1px, rgba(0,0,0,.2)) .informations font-size: $font-size-small Exemple complet
19. SASS sass ├── style.sass ├── _mixins.sass ├── _variables.sass ├── base │ ├── _colors.sass │ ├── _typo.sass │ └── _utilities.sass ├── components │ ├── _avatars.sass │ ├── _badges.sass │ └── _buttons.sass └── pages ├── _form.sass ├── _header.sass ├── _placeholder.sass └── _separator.sass Découpage en partials des ses feuilles de style
21. OK FRAMEWORK alors pour aller plus vite et éviter de partir à la hache, on choisit un framework.
22. Pourquoi un framework ? • Rapidité au démarrage • Respect des normes qu’il impose • Normalisation des propriétés de base • Nombreux utilitaires et composants inclus
23. Foundation Normalize Composants Utilitaires + Structure Bootstrap Normalize Composants Utilitaires + Styles Inuit.css Picnic.css Knacss …
25. HTML <div class="user-profile panel panel-default text-center”> <div class="user-avatar user-avatar-large"> <img src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2><b>MC Hammer</b></h2> <ul class="user-informations small text-left"> . . . </ul> </div> </div> HTML Utilisation des helpers et composants du framework
26. HTML <div class="user-profile panel panel-default text-center”> <div class="user-avatar user-avatar-large"> <img src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2><b>MC Hammer</b></h2> <ul class="user-informations small text-left"> . . . </ul> </div> </div> HTML Ajout des classes spécifiques aux composants fonctionnels
27. Ne pas faire une indigestion • Importer certaines portions du framework • Initialiser les variables du framework • Étendre le framework plutôt que le surcharger
28. HTML $brand-primary: $blue $font-family-sans-serif: 'Source Sans Pro' $special-headings-font-family: 'Raleway' $border-radius-base: 4px $border-radius-large: 6px $border-radius-small: 3px // Core CSS @import bootstrap/scaffolding @import bootstrap/type @import bootstrap/tables @import bootstrap/forms @import bootstrap/buttons Définition des variables de Bootstrap et import partiel
30. ORGANISONS NOUS Maintenant qu’on a pleins d’astuces, on fait des composants pour les réutiliser
31. Composants BEM • BEM pour BLOCK - ELEMENT - MODIFIER • Chaque classe CSS à une responsabilité unique • Exemple : .message-profile--small
33. HTML <article class="message"> <header class="message-header"> <img class="user-avatar user-avatar--small” src="{$src}" alt="{$alt}"> ... </header> <div class="message-body"> ... </div> </article> Chaque classe CSS à une responsabilité unique
34. Redondance dans le HTML Pas dans le CSS
35. Single responsibility principle • Une classe pour le style graphique • Une classe pour identifier un bloc fonctionnel • Une classe pour modifier ou nuancer une autre
36. Sélecteurs spécifiques • u-utilities : pour faire un utilitaire • is-modifier : pour modifier un block dans un certain état • .block-element--modifier : pour spécifier une variation • .js-property : pour une classe réservée au javascript
37. HTML .u-pull-left { float: left !important; } .u-text-left { text-align: left !important; } u-utilities : pour faire un utilitaire
38. HTML <div class="panel-body"> <h2 class="js-navigate">MC Hammer</h2> <ul class="user-informations u-small"> . . . </ul> </div> .js-property : pour une classe réservée au javascript
39. HTML <div class="user col-4"> <div class="user-profile panel is-open“> <div class="user-avatar user-avatar--large"> <img src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2 class="js-navigate">MC Hammer</h2> <ul class="user-informations u-small"> . . . </ul> </div> </div> </div> .block-element--modifier : pour spécifier une variation
40. HTML <div class="user col-4"> <div class="user-profile panel is-open“> <div class="user-avatar user-avatar--large"> <img src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2 class="js-navigate">MC Hammer</h2> <ul class="user-informations u-small"> . . . </ul> </div> </div> </div> is-modifier : pour modifier un block dans un certain état
41. SASS p margin: 0 0 $margin-treshold 0 .panel border: 1px solid rgba(0,0,0,.15) border-radius: $border-radius-base background-color: $color-white .u-small font-size: 85% .user-profile .user-avatar margin-top: -( $size-avatar-large / 2 ) .user-avatar--medium img +square($size-avatar-medium) border-radius: $border-radius-base .user-avatar--large img +square($size-avatar-large) border-radius: $border-radius-large Finally…
43. STYLEGUIDE Hologram pour générer ses guides de styles
44. Hologram + Cortana • Générer des guides de styles en déclarant les composants • Vérifier la mise en forme des modifications faites à un framework • Recherche et documentation disponible pour le CSS
46. HTML /*doc --- title: Active / Disabled name: c-active-disabled category: Layout - Buttons --- ```html_example <p> <button type="button" class="btn btn-primary btn-lg active”> Primary button </button> <button type="button" class="btn btn-default btn-lg active”> Button</button> </p> <p> <button type="button" class="btn btn-lg btn-primary" disabled=“disabled"> Primary button </button> <button type="button" class="btn btn-default btn-lg" disabled=“disabled"> Button </button> </p> ``` */
48. The End Twitter : @pierrerenaudin Support : http://bit.ly/manage-css-example https://prenaudin.github.io/styleguide_css/styleguide Pierre Renaudin BDX.IO - 17 octobre 2014