Tout projet a besoin d'une organisation. Insérer chaque nouveau style que vous créez dans un fi chier unique rendra la recherche d'éléments plus diffi cile et compliquera la tâche des autres personnes travaillant sur le projet. Il leur sera diffi cile de s'y retrouver. Bien entendu, vous avez probablement déjà une organisation en place. J'espère que ce que vous lirez dans ces pages vous permettra de trouver ce qui peut fonctionner avec votre procédé actuel, et si j'ai de la chance, vous pourrez même découvrir de meilleurs moyens pour améliorer votre manière de faire.
Comment choisir entre l'utilisation des sélecteurs ID ou celle des sélecteurs de classe, ou encore, comment choisir le nombre de sélecteurs que vous avez à disposition ? De quelle manière décidezvous à quels éléments appliquer les styles en question ? Comment faites-vous pour que l'organisation de votre site et de vos feuilles de style soit facilement compréhensible ?
Le classement par catégorie se trouve au cœur de SMACSS. En classant les règles CSS, nous à voir des modèles apparaître et pouvons ainsi défi nir de meilleurs procédés pour chacun de ces modèles.
Il existe cinq catégories de règles :
1. La base
2. L'agencement
3. Le module
4. L'état
5. Le thème
Nous nous retrouvons souvent à mélanger les styles de ces cinq catégories. Si nous devenons davantage conscients des éléments que nous voulons styler, nous pourrons alors éviter la complexité provoquée par l'entremêlement de ces règles.
À chaque catégorie s'appliquent certaines directives. Cette séparation succincte nous permet de nous poser les bonnes questions pendant le processus de développement. De quelle manière allonsnous coder les choses et surtout pourquoi allons-nous faire ainsi ?
L'objectif principal du classement par catégorie est de codifi er des modèles – les choses qui se répètent dans votre site web. Cela permet de diminuer la quantité de code, d'avoir une maintenance plus facile et d'atteindre une plus grande uniformité dans l'expérience de l'utilisateur. Il n'y a donc que des avantages ! Quelques exceptions à la règle peuvent être intéressantes dans certains cas mais doivent toujours être justifi ées.
Les règles de base sont les règles par défaut. Elles concernent presque exclusivement les sélecteurs d'éléments uniques mais peuvent également inclure des sélecteurs d'attributs, des sélecteurs de pseudo-classes, des sélecteurs d'enfant ou des sélecteurs adjacents. Un style de base dit essentiellement que, quel que soit l'endroit où se trouve l'élément sur la page, il doit porter tel style.
| Exemples de styles de base |
| html, body, form { margin: 0; padding:0; } input[type=text] { border: 1px solid;#999; } a { color: #039; } a:hover { color: #03C; } |
Les règles d'agencement divisent la page en diff érentes sections.
Les agencements maintiennent un ou plusieurs modules ensemble.
Les règles de modules sont réutilisables, ce sont les parties modulaires de votre design. Ce sont les zones de texte, les barres latérales, la liste de produits etc.
Les règles d'état sont un moyen de décrire à quoi doit ressembler tel module ou agencement dans un état particulier. Sera-t-il caché ou déroulé ? Actif ou inactif ? Elles décrivent également de quelle manière un module ou un agencement doit apparaître sur des écrans plus grands ou plus petits et à quoi ressemble un module dans un gabarit diff érent, comme la page d'accueil ou une des pages internes du site.
Pour fi nir, les règles de thème sont similaires aux règles d'état dans la mesure où elles décrivent à quoi doit ressembler un module ou un agencement. La plupart des sites n'ont pas besoin d'avoir différents thèmes mais il est bon de savoir que ces règles existent.
Lorsque l'on sépare les règles en cinq catégories, des conventions de nommages sont nécessaires pour comprendre immédiatement à quelle catégorie tel style spécifi que appartient et son rôle dans l'ensemble général de la page.
J'aime utiliser un préfi xe pour diff érencier les règles d'agencement, d'état et de module. Pour l'agencement, j'utilise l-. L'utilisation de préfi xes tels que grid- permet également de clarifi er la séparation entre diff érents styles d'agencement. Pour les règles d'état, j'aime bien utiliser is- comme dans is-hidden ou is-collapsed. Cela me permet de décrire les choses de manière très lisible.
Les modules représentent la majeure partie d'un projet. C'est la raison pour laquelle, le fait que chaque module commence par un préfi xe comme .module- serait trop long et inutile. Les modules utilisent simplement le nom du module lui-même.
| Exemples de classes |
| /* Exemple de Module */ .example { } /* Module de texte */ .callout { } /* Module de texte avec un état */ -collapsed { } /* Module de formulaire */ .field { } /* Agencement en ligne */ .l-inline { } |
Les éléments relatifs à un module ont pour préfi xe le nom de la base. Sur ce site, l'exemple de code utilise .exm et les sous-titres s'écrivent .exm-caption. Il me suffi t donc de voir la classe du sous-titre pour comprendre instantanément qu'il est relatif aux exemples de code et pour retrouver l'endroit où son style est décrit.
Les modules qui sont une variation d'un autre module devraient également avoir pour préfi xe le nom du module initial. Le thème du sous-classement est abordé plus en détail dans le chapitre Les Règles de Module.
Cette convention de nommage sera utilisée tout au long du livre. Comme la plupart des choses que je vais partager, vous n'avez pas à vous conformer à ces conseils de manière rigide. Ayez une convention, documentez-la et tenez-vous en à ce que vous avez décidé.
Une règle de base s'applique à un élément qui utilise un sélecteur d'élément, un sélecteur descendant, ou un sélecteur d'enfant, ainsi que toute pseudo-classe. Elle ne comporte aucune classe ou sélecteur ID. Elle défi nit le style par défaut d'un élément pour toutes ses apparitions sur la page.
| Exemples de styles de base |
| body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; } |
Les styles de base défi nissent la taille des titres, le style par défaut des liens, le style par défaut des typographies et les fonds du site. L'utilisation de !important ne devrait pas être nécessaire dans un style de base.
Je recommande fortement d'attribuer un fond au corps de page. Certains utilisateurs peuvent défi nir leur propre fond et choisir autre chose que du blanc. Si vous travaillez en vous attendant à ce que le fond par défaut soit blanc, vous risquez de vous retrouver avec un design qui ne ressemblera pas à ce que vous aviez en tête. Et pire, votre choix de couleur pourrait rentrer en confl it avec les paramètres utilisateurs et rendre votre site inutilisable.
Une réinitialisation CSS est un ensemble de styles de base prévus pour ôter – ou réinitialiser la marge externe, la marge interne et les autres propriétés par défaut. L'objectif est de bâtir un site sur des fondations solides, qui proposera un rendu harmonieux sur les différents navigateurs.
De nombreux modèles de réinitialisation sont trop radicaux et peuvent introduire plus de problèmes qu'ils n'en résolvent. Enlever la marge externe et la marge interne des éléments pour les réintroduire par la suite duplique les eff orts et augmente la quantité de code nécessaire à envoyer au client.
Beaucoup de gens trouvent la réinitialisation des styles utile dans le développement web. Assurez-vous tout de même de bien comprendre les enjeux et les inconvénients du modèle que vous souhaitez utiliser, et adaptez votre programmation en fonction.
Le fait de développer votre propre ensemble de styles par défaut, que vous réutiliserez de manière régulière d'un site à un autre, peut aussi être avantageux.
L'objectif du CSS, par nature, est de disposer les éléments sur une page. Cependant, il existe une diff érence entre les agencements qui défi nissent les composants principaux et ceux qui défi nissent les composants secondaires. Les composants mineurs – comme les zones de texte, le formulaire d'inscription, ou le menu de navigation – sont intégrés dans les composants principaux comme l'entête ou le pied de page. Je vais donc utiliser le terme « Module » pour qualifi er les composants secondaires, thème que j'aborderai dans le prochain chapitre. Pour parler des composants principaux, j’emploierai l'expression « Styles d'agencement ».
Les styles d'agencement peuvent eux-aussi être divisés en styles majeurs et styles mineurs, en fonction de votre fr équence de réutilisation de ces styles. Les styles majeurs d'agencement comme l'entête et le pied de page sont en général mis en page à l'aide des sélecteurs ID, mais prenez le temps de réfl échir aux éléments communs à tous les composants de la page et n'utilisez des sélecteurs de classe que lorsque cela est nécessaire.
| Défi nition d'un agencement |
| #header, #article, #footer { width: 960px; margin: auto; } #article { border: solid #CCC; border-width: 1px 0 0; } |
Certains sites ont besoin d'un modèle d'agencement plus général comme par exemple, le site . Ces styles d'agencement mineurs utilisent des noms de classe plutôt que des sélecteurs ID afi n de pouvoir être utilisés plusieurs fois sur la page.
En général, un style d'agencement n'a qu'un sélecteur : un seul ID ou un seul nom de classe. Dans certains cas cependant, un agencement peut avoir besoin de s'adapter à diff érents paramètres. Par exemple, vous pouvez établir des agencements diff érents en fonction de la préférence de l'utilisateur. Cette préférence sera toujours défi nie comme un style d'agencement et sera utilisée en combinaison avec les autres styles d'agencement.
| Utiliser un style d'agencement supérieur aff ectant les autres styles d'agencement |
| #article { float: left; } #sidebar { float: right; } .l-flipped #article { float: right; } .l-flipped #sidebar { float: left; } |
Dans cet exemple, la classe .l-flipped s'applique à un niveau d'élément supérieur comme l'élément body et permet d'inverser le contenu de l'article et de la barre latérale, déplaçant la barre latérale de la droite vers la gauche et vice-versa pour l'article.
| Deux styles d'agencement pour faire passer un élément de fl uide à fi xe |
| #article { width: 80%; float: left; } #sidebar { width: 20%; float: right; } .l-fixed #article { width: 600px; } .l-fixed #sidebar { width: 200px; } |
Dans ce dernier exemple, la classe .l-fixed modifi e le design en rendant l'agencement fi xe (largeur défi nie en pixels) alors qu'il était fl uide avant (largeur défi nie en pourcentage).
Une autre chose à remarquer dans cet exemple est la convsupport de formation approfondie ention de nommage que j'ai utilisée. Les déclarations qui utilisent des sélecteurs ID prennent le nom de l'élément et ne comportent pas d'espace de nommage particulier. Les sélecteurs découlant d'une classe, en revanche, comportent un préfi xe l- . Cela permet d'identifi er facilement la cible de ces styles et de les distinguer des modules ou des états. Les styles d'agencement sont la seule catégorie primaire à utiliser des sélecteurs ID. Si vous souhaitez faire un espace de nommage pour votre sélecteur ID, en utilisant un préfi xe, vous pouvez, mais il n'est pas forcément nécessaire de faire ainsi.
Tout projet a besoin d'une organisation. Insérer chaque nouveau style que vous créez dans un fi chier unique rendra la recherche d'éléments plus diffi cile et compliquera la tâche des autres personnes travaillant sur le projet. Il leur sera diffi cile de s'y retrouver. Bien entendu, vous avez probablement déjà une organisation en place. J'espère que ce que vous lirez dans ces pages vous permettra de trouver ce qui peut fonctionner avec votre procédé actuel, et si j'ai de la chance, vous pourrez même découvrir de meilleurs moyens pour améliorer votre manière de faire.
Comment choisir entre l'utilisation des sélecteurs ID ou celle des sélecteurs de classe, ou encore, comment choisir le nombre de sélecteurs que vous avez à disposition ? De quelle manière décidezvous à quels éléments appliquer les styles en question ? Comment faites-vous pour que l'organisation de votre site et de vos feuilles de style soit facilement compréhensible ?
Le classement par catégorie se trouve au cœur de SMACSS. En classant les règles CSS, nous à voir des modèles apparaître et pouvons ainsi défi nir de meilleurs procédés pour chacun de ces modèles.
Il existe cinq catégories de règles :
1. La base
2. L'agencement
3. Le module
4. L'état
5. Le thème
Nous nous retrouvons souvent à mélanger les styles de ces cinq catégories. Si nous devenons davantage conscients des éléments que nous voulons styler, nous pourrons alors éviter la complexité provoquée par l'entremêlement de ces règles.
À chaque catégorie s'appliquent certaines directives. Cette séparation succincte nous permet de nous poser les bonnes questions pendant le processus de développement. De quelle manière allonsnous coder les choses et surtout pourquoi allons-nous faire ainsi ?
L'objectif principal du classement par catégorie est de codifi er des modèles – les choses qui se répètent dans votre site web. Cela permet de diminuer la quantité de code, d'avoir une maintenance plus facile et d'atteindre une plus grande uniformité dans l'expérience de l'utilisateur. Il n'y a donc que des avantages ! Quelques exceptions à la règle peuvent être intéressantes dans certains cas mais doivent toujours être justifi ées.
Les règles de base sont les règles par défaut. Elles concernent presque exclusivement les sélecteurs d'éléments uniques mais peuvent également inclure des sélecteurs d'attributs, des sélecteurs de pseudo-classes, des sélecteurs d'enfant ou des sélecteurs adjacents. Un style de base dit essentiellement que, quel que soit l'endroit où se trouve l'élément sur la page, il doit porter tel style.
| Exemples de styles de base |
| html, body, form { margin: 0; padding:0; } input[type=text] { border: 1px solid;#999; } a { color: #039; } a:hover { color: #03C; } |
Les règles d'agencement divisent la page en diff érentes sections.
Les agencements maintiennent un ou plusieurs modules ensemble.
Les règles de modules sont réutilisables, ce sont les parties modulaires de votre design. Ce sont les zones de texte, les barres latérales, la liste de produits etc.
Les règles d'état sont un moyen de décrire à quoi doit ressembler tel module ou agencement dans un état particulier. Sera-t-il caché ou déroulé ? Actif ou inactif ? Elles décrivent également de quelle manière un module ou un agencement doit apparaître sur des écrans plus grands ou plus petits et à quoi ressemble un module dans un gabarit diff érent, comme la page d'accueil ou une des pages internes du site.
Pour fi nir, les règles de thème sont similaires aux règles d'état dans la mesure où elles décrivent à quoi doit ressembler un module ou un agencement. La plupart des sites n'ont pas besoin d'avoir différents thèmes mais il est bon de savoir que ces règles existent.
Lorsque l'on sépare les règles en cinq catégories, des conventions de nommages sont nécessaires pour comprendre immédiatement à quelle catégorie tel style spécifi que appartient et son rôle dans l'ensemble général de la page.
J'aime utiliser un préfi xe pour diff érencier les règles d'agencement, d'état et de module. Pour l'agencement, j'utilise l-. L'utilisation de préfi xes tels que grid- permet également de clarifi er la séparation entre diff érents styles d'agencement. Pour les règles d'état, j'aime bien utiliser is- comme dans is-hidden ou is-collapsed. Cela me permet de décrire les choses de manière très lisible.
Les modules représentent la majeure partie d'un projet. C'est la raison pour laquelle, le fait que chaque module commence par un préfi xe comme .module- serait trop long et inutile. Les modules utilisent simplement le nom du module lui-même.
| Exemples de classes |
| /* Exemple de Module */ .example { } /* Module de texte */ .callout { } /* Module de texte avec un état */ -collapsed { } /* Module de formulaire */ .field { } /* Agencement en ligne */ .l-inline { } |
Les éléments relatifs à un module ont pour préfi xe le nom de la base. Sur ce site, l'exemple de code utilise .exm et les sous-titres s'écrivent .exm-caption. Il me suffi t donc de voir la classe du sous-titre pour comprendre instantanément qu'il est relatif aux exemples de code et pour retrouver l'endroit où son style est décrit.
Les modules qui sont une variation d'un autre module devraient également avoir pour préfi xe le nom du module initial. Le thème du sous-classement est abordé plus en détail dans le chapitre Les Règles de Module.
Cette convention de nommage sera utilisée tout au long du livre. Comme la plupart des choses que je vais partager, vous n'avez pas à vous conformer à ces conseils de manière rigide. Ayez une convention, documentez-la et tenez-vous en à ce que vous avez décidé.
Une règle de base s'applique à un élément qui utilise un sélecteur d'élément, un sélecteur descendant, ou un sélecteur d'enfant, ainsi que toute pseudo-classe. Elle ne comporte aucune classe ou sélecteur ID. Elle défi nit le style par défaut d'un élément pour toutes ses apparitions sur la page.
| Exemples de styles de base | ||||||
| body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; } Je recommande fortement d'attribuer un fond au corps de page. Certains utilisateurs peuvent défi nir leur propre fond et choisir autre chose que du blanc. Si vous travaillez en vous attendant à ce que le fond par défaut soit blanc, vous risquez de vous retrouver avec un design qui ne ressemblera pas à ce que vous aviez en tête. Et pire, votre choix de couleur pourrait rentrer en confl it avec les paramètres utilisateurs et rendre votre site inutilisable. Réinitialisation CSSUne réinitialisation CSS est un ensemble de styles de base prévus pour ôter – ou réinitialiser la marge externe, la marge interne et les autres propriétés par défaut. L'objectif est de bâtir un site sur des fondations solides, qui proposera un rendu harmonieux sur les différents navigateurs. De nombreux modèles de réinitialisation sont trop radicaux et peuvent introduire plus de problèmes qu'ils n'en résolvent. Enlever la marge externe et la marge interne des éléments pour les réintroduire par la suite duplique les eff orts et augmente la quantité de code nécessaire à envoyer au client. Beaucoup de gens trouvent la réinitialisation des styles utile dans le développement web. Assurez-vous tout de même de bien comprendre les enjeux et les inconvénients du modèle que vous souhaitez utiliser, et adaptez votre programmation en fonction. Le fait de développer votre propre ensemble de styles par défaut, que vous réutiliserez de manière régulière d'un site à un autre, peut aussi être avantageux. Les styles d'agencement peuvent eux-aussi être divisés en styles majeurs et styles mineurs, en fonction de votre fr équence de réutilisation de ces styles. Les styles majeurs d'agencement comme l'entête et le pied de page sont en général mis en page à l'aide des sélecteurs ID, mais prenez le temps de réfl échir aux éléments communs à tous les composants de la page et n'utilisez des sélecteurs de classe que lorsque cela est nécessaire.
Certains sites ont besoin d'un modèle d'agencement plus général comme par exemple, le site . Ces styles d'agencement mineurs utilisent des noms de classe plutôt que des sélecteurs ID afi n de pouvoir être utilisés plusieurs fois sur la page. En général, un style d'agencement n'a qu'un sélecteur : un seul ID ou un seul nom de classe. Dans certains cas cependant, un agencement peut avoir besoin de s'adapter à diff érents paramètres. Par exemple, vous pouvez établir des agencements diff érents en fonction de la préférence de l'utilisateur. Cette préférence sera toujours défi nie comme un style d'agencement et sera utilisée en combinaison avec les autres styles d'agencement.
Dans cet exemple, la classe .l-flipped s'applique à un niveau d'élément supérieur comme l'élément body et permet d'inverser le contenu de l'article et de la barre latérale, déplaçant la barre latérale de la droite vers la gauche et vice-versa pour l'article.
Dans ce dernier exemple, la classe .l-fixed modifi e le design en rendant l'agencement fi xe (largeur défi nie en pixels) alors qu'il était fl uide avant (largeur défi nie en pourcentage). Une autre chose à remarquer dans cet exemple est la convsupport de formation approfondie ention de nommage que j'ai utilisée. Les déclarations qui utilisent des sélecteurs ID prennent le nom de l'élément et ne comportent pas d'espace de nommage particulier. Les sélecteurs découlant d'une classe, en revanche, comportent un préfi xe l- . Cela permet d'identifi er facilement la cible de ces styles et de les distinguer des modules ou des états. Les styles d'agencement sont la seule catégorie primaire à utiliser des sélecteurs ID. Si vous souhaitez faire un espace de nommage pour votre sélecteur ID, en utilisant un préfi xe, vous pouvez, mais il n'est pas forcément nécessaire de faire ainsi. |
