Jump Start Sass: Architecture en SASS

Architecture SASS: une plongée profonde dans le développement modulaire CSS

Cet extrait de JUMP START SASS explore les complexités de l'architecture CSS et comment SASS améliore le processus. Nous examinerons diverses approches architecturales et meilleures pratiques pour construire des feuilles de style évolutives et maintenables.

L'architecture CSS a historiquement été un défi. SASS aborde cela avec des variables, des mixins et d'autres caractéristiques, mais l'approche optimale reste un point de discussion. Les méthodes populaires comprennent les OOCSS, les SMACS, la conception atomique, les ITCS et le BEM, chacun avec des forces et des faiblesses. La meilleure stratégie est souvent un hybride, combinant des éléments de plusieurs systèmes.

Concepts clés:

• SASS AMHANDAND @import: Contrairement à CSS @import, la version de Sass combine plusieurs fichiers pendant la compilation, réduisant les demandes HTTP.
• Architecture modulaire avec partiels: décomposer les CSS en unités logiques (partiels, indiqués par un préfixe de soulignement, comme _buttons.scss) organisé dans les dossiers. Ceux-ci sont ensuite importés dans un fichier principal de compilation.
• CSS Méthodologies architecturales: Explorez les OOCSS, les SMACS, la conception atomique, les ITCS et BEM pour comprendre leurs principes et les adapter à votre projet.
• Caractéristiques SASS: Variables, mixins et fonctions pour la cohérence, la lisibilité et la maintenabilité.
• Considérations futures: Les importations modulaires de Sass 4 offrent un contrôle amélioré et une gestion des espaces de noms.
• Structure de fichiers organisée: Catégrer les styles en dossiers comme base, components et utilities.

plusieurs fichiers et dossiers:

La division de votre code en plusieurs fichiers est un avantage essentiel des préprocesseurs. SASS permet une organisation granulaire. La règle @import consolide ces fichiers pendant la compilation dans un seul fichier CSS pour le navigateur.

CSS par rapport aux importations SASS:

CSS @import utilise la manipulation côté navigateur, encourant des demandes HTTP supplémentaires. SASS @import gère la compilation, résultant en un seul fichier de sortie. SASS retombe aux importations CSS standard pour les fichiers .css, http:// ou https:// URL, et url() fonctions.

Imports et partiels SASS:

Les importations SASS (.sass ou .scss) sont compilées dans le fichier principal. Les partiels (noms de fichiers commençant par _) ne sont pas compilés indépendamment mais sont importés dans d'autres fichiers. Les extensions peuvent être omises dans les importations pour la simplicité.

Exemple de structure de répertoire SASS:

<code>sass/
├── config/
│   ├── _colors.scss
│   └── _webfonts.scss
├── layout/
│   ├── _navigation.scss
│   └── _banner.scss
├── modules/
│   ├── _calendar.scss
│   └── _contact.scss
└── main.scss</code>

Composants et organisation:

Organisez des partiels dans des dossiers en fonction de la spécificité (par défaut globaux d'abord, puis des modèles, des composants et des remplacements à l'échelle du site). Importez-les dans un fichier maître (main.scss) dans le même ordre.

OOCSS (CSS orienté objet):

met l'accent sur les modèles de conception granulaires réutilisables dans divers contextes. Principes clés: structure et peau séparées, et conteneur et contenu séparés.

Conception atomique:

organise le CSS en atomes, molécules, organismes, modèles et pages. Fournit une approche structurée de la construction des composants.

bem (bloc, élément, modificateur):

utilise une convention de dénomination (block__element--modifier) pour créer des blocs réutilisables et indépendants. Fournit un système complet englobant CSS, HTML et JavaScript.

SMACSS (architecture évolutive et modulaire pour CSS):

catégorise CSS en base, mise en page, module, état et thème. Se concentre sur la profondeur de l'applicabilité et le maintien des composants petits et indépendants.

ITCSS (triangle inversé CSS):

organise CSS en fonction de la portée, de la spécificité et de l'explicitation, visualisée comme un triangle inversé. Les couches incluent les paramètres, les outils, les génériques, les éléments, les objets, les composants et les atouts.

MIRIAM'S MIX-N-MATCH:

Une approche flexible combinant des éléments de divers systèmes, priorisant la cascade CSS et utilisant un "système nerveux central SASS" pour la configuration et les outils réutilisables.

importations modulaires dans Sass 4:

Cette fonctionnalité à venir améliore le contrôle et la gestion des espaces de noms, en abordant les conflits mondiaux d'espace de noms. @use permet d'importer des parties spécifiques de modules et de les faire passer. @forward facilite le passage des API entre les modules.

Conclusion:

Choisir la bonne architecture SASS dépend des besoins du projet et des préférences d'équipe. Une approche hybride, incorporant les meilleures pratiques de divers systèmes, est souvent la solution la plus efficace. Les importations modulaires de SASS 4 promettent de nouvelles améliorations de la modularité et de la maintenabilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!