Le CSS : Cascading Stylesheet (les feuilles de styles en cascade en français) est, avec l’HTML, le langage du développement web. C’est le langage informatique permettant la mise en forme des pages web. Le CSS permet de modifier et de contrôler l’apparence des pages visibles sur les ordinateurs de bureau et les écrans mobiles. En même temps que l’évolution du web, les méthodologies de développement se sont modernisées pour apporter des solutions prêtes à l’emploi et des outils pour automatiser et normaliser le processus de développement. Des méthodologies comme SOOCS, SUITCS, BEM et SMACSS partagent les mêmes principes et objectifs de : - Créer une base de code solide et flexible - Créer des règles CSS avec une convention de nommage standardisée et une syntaxe stricte - Créer une architecture CSS structuré, ordonné et organisé Dans cette formation, on découvre : En premier, une méthodologie pour créer des composants réutilisables et flexibles, BEM, qui est : ● L’abréviation de Block Element Modifier regroupe trois composantes pour créer du CSS plus structurée avec une terminologie reconnaissable ● Une convention de dénomination, simple avec : ○ Une syntaxe stricte pour écrire du code plus lisible, explicite, scalable et robuste ○ Et, des appellations communes pour aider à modifier et maintenir le code front En deuxième, on découvre SMACSS, qui est l'abréviation de Scalable and Modular Architecture for CSS : une architecture évolutive et modulaire du CSS en français. SMACSS offre : ● Un guide de style pour écrire et diviser le CSS en cinq catégories ● Une terminologie standard et reconnaissable avec un ensemble de directives CSS pour : ○ Organiser les règles CSS en modules réutilisables ○ Créer du code plus propre avec une meilleure lisibilité et maintenabilité Enfin, on présente OOCSS, la méthodologie CSS pour créer des objets de style et des utilitaires CSS ● OOCSS (CSSOS), CSS orienté objet en français, inclut des composants CSS (à un niveau supérieur) et des objets de style décoratifs (utilitaires réutilisables)

1. Formation
Apprendre les bonnes pratiques
de CSS avec BEM, OOCSS & SMACSS
Une formation
Sandy LUDOSKY

2. Cursus CSS

3. Une formation
Plan de la formation
Introduction
1. Histoire du CSS : des origines au CSS moderne
2. La méthodologie BEM
3. Organiser le CSS avec BEM
4. L’approche architecturale avec SMACSS
5. Architecture CSS modulaire et scalable avec SMACSS
6. Créer des objets de style avec OOCSS
7. Utilitaires CSS avec OOCSS, Bootstrap 5 et Sass
Conclusion

4. Une formation
Niveau intermédiaire à avancé
Développeurs professionnels
Intégrateurs web
Public concerné

5. Connaissances requises

6. Une formation
Connaissances requises

8. Présentation des projets
de la formation
Une formation
Sandy LUDOSKY

9. Une formation
Projets
Démos, travaux pratiques & projets
1. Organiser le CSS avec BEM
2. Créer une architecture CSS avec SMACSS
3. Créer des utilitaires CSS avec OOCSS, Bootstrap
5 et Sass

10. Une formation
Présentation des outils
Visual Studio Code
Node / Npm /Git
Navigateur moderne

11. Ressources et outils
Une formation
Sandy LUDOSKY

12. Visual Studio Code

13. Node.js & npm

14. Git

15. Une formation
Les fichiers téléchargeables 📁
Version de démarrage
Version finale
Ressources

16. Découvrir l’anatomie
d’un projet web
Une formation
Sandy LUDOSKY

17. Anatomie d’un projet web
source : Open source vecteur créé par pch.vector - fr.freepik.com (tiny developpers)

18. source : Codeur vecteur créé par upklyak - fr.freepik.com
Anatomie d’un projet web

19. source : Agence photo créé par rawpixel.com - fr.freepik.com
Anatomie d’un projet web

20. Photo by Ярослав Алексеенко on Unsplash
Photo by Brett Jordan on Unsplash
Anatomie d’un projet web

21. Connaitre l’histoire du CSS
Une formation
Sandy LUDOSKY

22. Une formation
Histoire du CSS
CSS = Cascading Stylesheet
1994 : débuts CSS
1996 : premières spécifications CSS1

23. Une formation
CSS 1.0 => CSS 2.0 => CSS 2.1
CSS 3
Histoire du CSS

24. Mise en forme et habillage page web
Métiers du web et numérique
Photo by Campaign Creators on Unsplash
Histoire du CSS

25. Photo by UX Indonesia on Unsplash
Histoire du CSS

26. Photo by Alex Kotliarskyi on Unsplash
Histoire du CSS

27. Photo by Ярослав Алексеенко on Unsplash
Photo by Brett Jordan on Unsplash
Histoire du CSS

28. Librement inspiré par Jonathan Snoovvk =)
Histoire du CSS

29. Apercevoir les différents
styles de CSS
Une formation
Sandy LUDOSKY

30. Une formation
Les styles de CSS
CSS = Cascading Stylesheet
1994 : débuts CSS
1996 : premières spécifications CSS1

31. Une formation
Les langages préprocesseurs

32. Une formation
La grille CSS & Flexbox
Modèle de disposition en grille
Les styles de CSS

33. Une formation
Les solutions CSS moderne
Librairie HTML & CSS front open-source
Librairies : Bootstrap 5, Material UI …
Librairies : ReactJS, NextJS ⚛

34. Découvrir les méthodologies
CSS
Une formation
Sandy LUDOSKY

35. Une formation
SOOCS
SUITCSS
Atomique
SMACSS
BEM
OOCSS
Les standards et solutions

36. Découvrir la convention BEM
et ses composantes
Une formation
Sandy LUDOSKY

37. Une formation
Blocs
Eléments
Modifiers
La convention BEM

38. Une formation
Blocs
header.css
menu.css
footer.css
Blocs

39. Une formation
Eléments
.menu menu__item
Eléments

40. Une formation
Modifiers
.menu menu__item--is-active
Modifiers

41. Une formation
Blocs Eléments Modifiers
.menu menu__item--is-active
La convention BEM

42. Une formation
Blocs Eléments Modifiers
.menu menu__item--is-open
Décovrir la convention BEM
La convention BEM

43. Savoir l'utilité de BEM
Une formation
Sandy LUDOSKY

44. Une formation
CSS organisé et structuré
CSS modulaire => plus lisible
CSS réutilisable => scalable et maintenable
Pourquoi BEM ?

45. Maitriser la syntaxe
et les règles de nommages strictes
Une formation
Sandy LUDOSKY

46. Une formation
BEM
Bloc Element Modifier
Syntaxe et règles de nommage

47. Une formation
Bloc
.menu
Syntaxe et règles de nommage

48. Une formation
Bloc Element
.menu menu__item
Syntaxe et règles de nommage

49. Une formation
Bloc Element Modifier
.menu menu__item
.menu menu__item--is-active
Syntaxe et règles de nommage

50. Voir en image un exemple
BEM
Une formation
Sandy LUDOSKY

51. Une formation
Bloc Element Modifier
.menu menu__item
.menu menu__item--is-active
Exemple BEM en images

52. About Contact
.menu
Home

53. Home About Contact
.menu
.menu__item .menu__item .menu__item

54. Home About Contact
.menu
.menu__item–is-active .menu__item .menu__item

55. Télécharger et découvrir
le projet de démarrage
Une formation
Sandy LUDOSKY

56. Une formation
Télécharger projet démarrage
npm install
Créer une organisation CSS avec BEM

57. Créer une organisation CSS
avec BEM
Une formation
Sandy LUDOSKY

58. Une formation
Définir les blocs
Mettre en forme les éléments
Personnaliser les états des éléments
Créer une organisation CSS avec BEM

59. HEADER
NAVIGATION
MAIN SIDEBAR
FOOTER

60. Mettre en forme le menu
de navigation
Une formation
Sandy LUDOSKY

61. Mettre en forme le header
L'entête de page
Une formation
Sandy LUDOSKY

62. Mettre en forme la section
main
Une formation
Sandy LUDOSKY

63. Mettre en forme la sidebar
Une formation
Sandy LUDOSKY

64. Mettre en forme le footer
Le pied de page
Une formation
Sandy LUDOSKY

65. Introduction à SMACSS
Une formation
Sandy LUDOSKY

66. Scalable and Modular Architecture for CSS
guide : ensemble de règles
organisation : 5 catégories
ebook : 112 pages
auteur : Jonathan Snook

67. Une formation
Architecture CSS modulaire et scalable
Code plus propre et plus lisible
Meilleure maintenabilité
Principes et bénéfices

68. Structurer un projet en cinq
catégories avec SMACSS
Une formation
Sandy LUDOSKY

69. Une formation
Les 5 catégories d’un projet SMACSS
1. Base
2. Layout (mise en page)
3. Module
4. State
5. Theme

70. Suivre le guide
Ebook
Une formation
Sandy LUDOSKY

71. Les 5 catégories d’un projet SMACSS
http://smacss.com/book/
auteur : Jonathan Snook

72. Une formation
Les 5 catégories d’un projet SMACSS
Objectifs projet : organiser CSS
1. base
2. layout
3. module
4. state
5. theme

73. Télécharger le projet de démarrage
et découvrir les objectifs du projet
Une formation
Sandy LUDOSKY

74. Une formation
Télécharger projet démarrage
npm install
Télécharger le projet

75. Une formation
Objectifs : architecture CSS en 5 catégories
1. base
2. layout
3. module
4. state
5. theme
Les objectifs du projet

76. Définir un style de base
avec des valeurs par défaut
Une formation
Sandy LUDOSKY

77. Une formation
Télécharger projet démarrage
npm install
Le projet de démarrage

78. Une formation
Objectifs : architecture CSS en 5 catégories
1. base
2. layout
3. module
4. state
5. theme
Les objectifs du projet

79. Définir du style de base avec des valeurs par défaut
source : http://smacss.com/book/type-base

80. Diviser la mise en page en sections
Bloc nav
Une formation
Sandy LUDOSKY

81. Une formation
Télécharger projet démarrage
npm install
Le projet de démarrage

82. Une formation
Objectifs : architecture CSS en 5 catégories
1. base
2. layout
3. module
4. state
5. theme
Les objectifs du projet

83. Diviser la mise en page en sections
source : http://smacss.com/book/type-layout

84. Diviser la mise en page en sections
Bloc header
Une formation
Sandy LUDOSKY

85. Diviser la mise en page en sections
Bloc main et aside
Une formation
Sandy LUDOSKY

86. Diviser la mise en page en sections
Bloc footer
Une formation
Sandy LUDOSKY

87. Créer des modules
de styles réutilisables
Une formation
Sandy LUDOSKY

88. Une formation
Télécharger projet démarrage
npm install
Le projet de démarrage

89. Une formation
Objectifs : architecture CSS en 5 catégories
1. base
2. layout
3. module
4. state
5. theme
Les objectifs du projet

90. Créer des modules de styles réutilisables
source : http://smacss.com/book/type-module

91. Personnaliser et varier
les styles avec l'état
Une formation
Sandy LUDOSKY

92. Une formation
Télécharger projet démarrage
npm install
Le projet de démarrage

93. Une formation
Objectifs : architecture CSS en 5 catégories
1. base
2. layout
3. module
4. state
5. theme
Les objectifs du projet

94. Personnaliser et varier les styles avec l'état
source : http://smacss.com/book/type-state

95. Créer plusieurs options
d’affichage
Une formation
Sandy LUDOSKY

96. Une formation
Télécharger projet démarrage
npm install
Le projet de démarrage

97. Une formation
Objectifs : architecture CSS en 5 catégories
1. base
2. layout
3. module
4. state
5. theme
Les objectifs du projet

98. Créer plusieurs options d'affichage
source : http://smacss.com/book/type-theme

99. Créer des objets de style réutilisables
avec l'approche OOCSS
Une formation
Sandy LUDOSKY

100. Une formation
CSSOO = CSS orienté objet
auteur : Nicole Sullivan
Créer des objets de style réutilisables
avec l'approche OOCSS

101. Expliquer le concept
les caractéristiques et bénéfices
Une formation
Sandy LUDOSKY

102. Une formation
déstructuré
atomique
sémantique visuelle
Séparation CSS de HTML (DOM)

103. Une formation
réutilisables
modulaires
combinables
Créer des objets de styles

104. Une formation
scalable
maintenable
Créer une collection d’utilitaires

105. Une formation
Bootstrap 5 (utilitaires)
Material UI
Foundation 6
Exemples

106. Expliquer le concept
usage et exemple
Une formation
Sandy LUDOSKY

107. Une formation
.flex
.float-right
Utilitaires

108. Une formation
.text-primary
.text-pink
Déclinaisons graphiques

109. Une formation
.button-success
.button-primary
Déclinaisons graphiques

110. Une formation
Usage et exemple
<h2 class="bg-1 clr-3 mr-10">

111. Télécharger le projet de démarrage
et découvrir les objectifs du projet
Une formation
Sandy LUDOSKY

112. Une formation
Télécharger le projet de démarrage
npm install

113. Une formation
http://oocss.org/
1. mettre en page avec un template
2. définir un système de grille
3. créer des utilitaires (mise en forme, couleur ….)
Objectifs : créer des objets de styles

114. Utiliser un modèle
de mise en page
Une formation
Sandy LUDOSKY

115. Une formation
http://oocss.org/
1. mettre en page avec un template
2. définir un système de grille
3. créer des utilitaires (mise en forme, couleur ….)
Objectifs : créer des objets de styles

116. Créer un conteneur
Exercice
Une formation
Sandy LUDOSKY

117. Mettre en forme
avec un système de grille
Une formation
Sandy LUDOSKY

118. Une formation
http://oocss.org/
1. mettre en page avec un template
2. définir un système de grille
3. créer des utilitaires (mise en forme, couleur ….)
Objectifs : créer des objets de styles

119. Personnaliser avec des classes
utilitaires
Une formation
Sandy LUDOSKY

120. Une formation
http://oocss.org/
1. mettre en page avec un template
2. définir un système de grille
3. créer des utilitaires (mise en forme, couleur ….)
Objectifs : créer des objets de styles

121. Personnaliser avec des classes utilitaires
Bootstrap 5
Une formation
Sandy LUDOSKY

122. Conclusion
Une formation
Sandy LUDOSKY

123. Une formation
Bilan
Avantages des méthodologies CSS
architecture ordonnée
maintenable
scalable