CCSS, ou composant CSS, est une architecture qui simplifie l'expérience de création CSS pour les grandes applications Web.
Les grandes applications Web ont généralement beaucoup de fichiers CSS et ont souvent de nombreux développeurs travaillant sur ces fichiers simultanément. Avec l'avènement de tant de cadres, directives, outils et méthodologies (OOCSS, SMACSS, BEM, etc.), les développeurs ont besoin d'une architecture CSS qui est maintenable, gérable et évolutive.
En tant qu'ingénieur de frontend, je crois que le développement Web basé sur les composants est la voie à suivre. Les composants Web sont une collection de normes qui font leur chemin à travers le W3C. Ils nous permettent de regrouper le balisage et les styles en éléments HTML réutilisables qui sont vraiment encapsulés . Cela signifie que nous devons commencer à penser au développement CSS basé sur les composants. Alors que les fabricants de navigateurs mettent en œuvre ces normes, nous pouvons utiliser Soft-Encapsulation en attendant.
Voyons exactement ce qu'est CCSS et comment vous pouvez l'utiliser en vous configurez l'architecture CSS pour une application Web complexe.
Voici les principaux éléments utilisés entièrement ou de manière modifiée pour obtenir la meilleure configuration pour l'architecture CCSS.
SMACSS, créé par Jonathan Snook, signifie architecture évolutive et modulaire pour CSS. C'est plus un guide de style qu'un cadre rigide. Lisez sur SMACSS pour un arrière-plan sur la structure comme CCSS l'utilise.
BEM, créé par les développeurs de Yandex, signifie «Block», «Element», «Modifier». Il s'agit d'une méthodologie frontale qui est une nouvelle façon de penser lors du développement d'interfaces Web. Les gars de Yandex ont trouvé BEM et plus d'informations peuvent être trouvées dans l'excellent article de Harry Roberts.
Sass est CSS avec des superpuissances. Je le recommande vivement, mais vous pouvez également en utiliser moins si vous préférez. Veuillez vous référer à la documentation SASS pour plus d'informations.
Compass n'a pas de définitions de classe; Il s'agit d'une extension pour SASS qui fournit de nombreux services publics. Il est utilisé pour les mixins utiles généraux et la compilation SASS. Les mélanges de boussole doivent presque toujours être utilisés dans les cas où les préfixes des fournisseurs sont nécessaires. Ceci est encore une belle à have et en bourbon, sur le premier look est une excellente alternative.
Regardons maintenant les principaux principes de CCSS.
Écrivez des composants petits et indépendants qui sont réutilisables. Un composant CSS réutilisable est celui qui n'existe pas uniquement sur une partie spécifique de l'arborescence DOM ou nécessite l'utilisation de certains types d'éléments. Si nécessaire, des éléments HTML supplémentaires doivent être utilisés pour rendre un composant réutilisable.
devraient avoir tout ce qui est nécessaire pour une certaine partie de l'interface utilisateur et avoir un seul objectif. Chaque composant doit être isolé, ce qui signifie qu'il ne modifie pas ou ne dépend pas directement d'un autre composant.
L'isolement est plus important que la réutilisation du code entre les composants, car la réutilisation peut augmenter les dépendances et le couplage serré, ce qui rend finalement le CSS moins gérable.
Lors de la création de CSS d'une manière qui vise à réduire le temps passé à l'écrire, il faut y penser de manière à passer plus de temps à changer les classes HTML sur des éléments pour modifier ou ajouter des styles. Il est beaucoup plus facile pour tous les développeurs d'auteur CSS quand c'est comme assembler des blocs LEGO que de combattre la guerre du CSS. Les classes CSS sont les éléments constitutifs qui doivent être utilisés pour composer des styles.
La prévisibilité signifie que lorsque vous aurez un auteur CSS, vos règles se comportent comme vous vous y attendez. Ceci est important pour les grandes applications qui ont de nombreuses pages. Évitez d'utiliser des sélecteurs trop compliqués et des noms de classe génériques, car ceux-ci peuvent conduire à des CSS.
imprévisibles.La plupart des gens supposent que le CSS est explicite. En fait, ce n'est généralement pas le cas! Les composants CSS doivent avoir une documentation claire qui décrivent ce qu'elles font et comment elles doivent être utilisées.
Vous trouverez ci-dessous un exemple de structure de répertoire pour une visualisation plus facile. J'ai également inclus un exemple de configuration dans le repo CCSS GitHub.
styles
├── bootstrap.css
├── ext
│ ├── bootstrap
│ │ ├── _settings.scss
│ │ └── bootstrap.scss
│ └── font-awesome
│ └── font-awesome.scss
├── font-awesome.css
├── images.css
├── main.css
└── scss
├── _config.scss
├── base
│ ├── _animation-classes.scss
│ ├── _base-classes.scss
│ ├── _base.scss
│ └── images.scss
├── components
│ ├── directives
│ │ ├── _empty-state.scss
│ │ ├── _legend.scss
│ │ └── _status-message.scss
│ ├── pages
│ │ ├── _404.scss
│ │ └── _redirect.scss
│ └── standard
│ ├── _alarm-state.scss
│ ├── _graph-message.scss
│ └── _panel.scss
├── main.scss
├── mixins
│ ├── _animation.scss
│ ├── _bem.scss
│ └── _icon.scss
└── themes
└── _light.scssÉditer uniquement / n'autrez les fichiers du dossier SCSS / dans l'arborescence du dossier indiqué ci-dessus. Cela permet de mettre à jour facilement les bibliothèques externes, qui se trouvent dans le dossier EXT /. De nombreuses applications commencent par un cadre CSS externe comme Bootstrap ou Foundation, donc je les ai ajoutés dans l'exemple de configuration à l'intérieur d'EXT /. Mais c'est absolument bien d'avoir tout le CSS écrit à partir de zéro; Tout le reste mentionné ci-dessus s'applique toujours.
L'exemple de composants / répertoires est bien adapté pour une application AngularJS, mais peut être personnalisé pour d'autres cadres ou applications. Plus d'informations figurent dans la section «Architecture» ci-dessous.
Dans la page HTML, incluez tous les fichiers .css du style / dossier, qui contient tous les CSS compilés (à partir de grognement, de boussole, etc.). Ne les modifiez jamais.
Notez le style de nom du composant UpperCasecase pour indiquer qu'il s'agit de l'élément maître; Cela indique qu'il s'agit de la limite du composant . Les noms d'élément et de modificateur sont respectivement ElementName et ModifierName. N'utilisez pas de trait d'union (-) pour séparer les noms de composants, car ceux-ci signifient le début d'un nom d'élément / élément.
Considérons l'architecture encouragée par CCSS.
Grunt est un excellent coureur de tâche qui peut automatiser de nombreuses tâches courantes (comme la compilation de CSS ou la validation du HTML). Il y a aussi d'autres coureurs de tâches; Un flux de travail idéal consiste à en utiliser un pour regarder des fichiers en cours de développement et à recompiler le CSS lorsque des modifications sont apportées.
Regardez à nouveau la structure du répertoire, qui est dérivée de SMACSS. Remarquez le répertoire EXT /, qui contient tous les cadres externes (comme bootstrap). Pour continuer à mettre à niveau facilement, ceux-ci ne doivent pas être modifiés; Au lieu de cela, les remplacements et les extensions doivent être placés dans la base / répertoire.
base / est l'endroit où vous gardez les styles de base globaux qui sont utilisés à l'échelle de l'application.
_Base.SCSS sont des styles de base pour les sélecteurs d'éléments uniquement. Ce sont une sorte de «réinitialisation CSS».
_Base-Classes.SCSS sont toutes les classes d'utilité utilisées à l'échelle de l'application sur de nombreuses pages, vues et composants. Noms de classe de préfixe avec u-
images.scss est utilisé comme source de compilation SCSS. Il doit définir et alimenter toutes les images du site comme URI de données. /app/styles/images.css est généré à partir de ce fichier.
_animate.scss détient toutes les classes d'animation à l'échelle de l'application.
_bootstrap-overides.scss détient uniquement les remplacements du framework. Parfois, le niveau de spécificité des sélecteurs de framework est si élevé que les remplacer nécessitent des sélecteurs spécifiques longs. Le remplacement au niveau global ne doit pas être effectué dans le contexte d'un composant SCSS. Au lieu de cela, tous les remplacements globaux vont ici.
Toute unité de CSS réutilisable non mentionnée ci-dessus est considérée comme un «composant». Nous utilisons AngularJS, donc je les ai classés en 3 types de composants CSS: Affichage / page, directive et standard; D'où la structure du répertoire dérivé de SMACSS.
Dans l'exemple de configuration dans le référentiel GitHub, j'ai créé des dossiers explicites pour être clair. Si votre demande est petite, vous pouvez les mettre dans un seul dossier. Tous les composants suivent la convention de dénomination BEM modifiée en combinaison avec le Camelcase. Cela m'a fait de grandes victoires en encourageant les autres membres de l'équipe à suivre la syntaxe de style BEM. Il a également évité beaucoup de confusion lorsqu'il s'éloignait de l'utilisation du style BEM typique avec les caractères -, - et __, qui génèrent des noms de classe comme le nom de module-child-name - nom-modificateur!
Il est également important que l'ordre de définition de classe CSS dans un composant reflète la vue HTML. Cela facilite la numérisation, le style, la modification et l'application de classes. Enfin, c'est une bonne idée d'avoir un guide de style étendu pour l'application Web et de suivre les directives pour CSS et SASS (par exemple, éviter @Extend).
Reportez-vous au code pour un exemple de configuration du CSS.
Voici un exemple de composant de Sass:
styles
├── bootstrap.css
├── ext
│ ├── bootstrap
│ │ ├── _settings.scss
│ │ └── bootstrap.scss
│ └── font-awesome
│ └── font-awesome.scss
├── font-awesome.css
├── images.css
├── main.css
└── scss
├── _config.scss
├── base
│ ├── _animation-classes.scss
│ ├── _base-classes.scss
│ ├── _base.scss
│ └── images.scss
├── components
│ ├── directives
│ │ ├── _empty-state.scss
│ │ ├── _legend.scss
│ │ └── _status-message.scss
│ ├── pages
│ │ ├── _404.scss
│ │ └── _redirect.scss
│ └── standard
│ ├── _alarm-state.scss
│ ├── _graph-message.scss
│ └── _panel.scss
├── main.scss
├── mixins
│ ├── _animation.scss
│ ├── _bem.scss
│ └── _icon.scss
└── themes
└── _light.scssCela se compile au CSS suivant:
<span>.ProductRating {
</span> <span>// nested element
</span><span> <span>@include e(title) {</span>
</span> <span>...
</span> <span>}
</span> <span>// nested element
</span><span> <span>@include e(star) {</span>
</span> <span>...
</span> <span>// nested element's modifier
</span><span> <span>@include m(active) {</span>
</span> <span>...
</span> <span>}
</span> <span>}
</span><span>}</span>Et votre HTML pourrait ressembler à ceci:
<span><span>.ProductRating</span> {
</span> ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-title</span> {
</span> ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-star</span> {
</span> ...
<span>}
</span>// nested element's <span>modifier
</span><span><span>.ProductRating-star--active</span> {
</span> ...
<span>}</span>Vous pouvez vous référer au mélange BEM simplifié, qui utilise le sélecteur de référence pour y parvenir et est plus simple que @ AT-ROOT. Travailler avec BEM est devenu beaucoup plus facile dans SASS 3.3, ce qui nous donne la possibilité d'écrire du code maintenable facile à comprendre.
Les contributions du repo GitHub sous forme de problèmes / PRS pour ajouter plus d'exemples, des améliorations avec le post-traitement, des clarifications, etc. sont les plus utiles.
et assurez-vous de consulter le dépôt pour les crédits et les ressources utiles liées au CCSS. Si vous avez des questions ou des commentaires, postez-les dans les commentaires ci-dessous ou sur le GitHub Repo.
CSS traditionnel est une langue de feuille de style utilisée pour décrire l'apparence et la mise en forme d'un document écrit en HTML. Il est conçu pour permettre la séparation du contenu de la présentation, y compris la disposition, les couleurs et les polices. D'un autre côté, CCSS (composant CSS) est une approche moderne du style où les styles sont directement liés à leurs composants spécifiques. Cela signifie que les styles sont portée localement vers le composant, réduisant le risque de s'affronter des styles sur votre application. Cette approche rend vos styles plus maintenables, modulaires et plus faciles à évoluer.
CCSS améliore l'évolutivité d'un projet en rendant les styles modulaires. Dans le CSS traditionnel, à mesure que le projet se développe, le fichier CSS se développe également, ce qui rend difficile la gestion. Cependant, dans CCSS, chaque composant a son propre style, ce qui facilite la gestion et l'échelle. Vous pouvez facilement mettre à jour ou modifier un composant sans affecter le reste de l'application.
Oui, CCSS est compatible avec n'importe quel framework JavaScript. Que vous utilisiez React, Angular, Vue ou tout autre cadre, vous pouvez utiliser CCSS pour styliser vos composants. Cela fait de CCSS un outil polyvalent pour tout développeur frontal.
Bien que le CCSS soit principalement utilisé pour le style des composants individuels, il peut également gérer les styles globaux. Vous pouvez définir les styles globaux dans un fichier séparé et les importer dans vos composants selon les besoins. Cela vous permet de maintenir un aspect et une sensation cohérents à travers votre application tout en bénéficiant de la modularité des CCS.
Comment CCSS améliore-t-il les performances d'une application Web?
Oui, vous pouvez utiliser des pré-processeurs CSS comme SASS, moins ou stylet avec CCSS. Cela vous permet de tirer parti de la puissance de ces pré-processeurs, tels que des variables, des mixins et des règles imbriquées, tout en bénéficiant de la modularité et de l'évolutivité des CCS.
L'un des principaux avantages du CCSS est qu'il élimine les problèmes associés à la spécificité CSS. Étant donné que chaque composant a ses propres styles, il n'est pas nécessaire de s'inquiéter des styles s'affronter ou se remplacer mutuellement. Cela facilite la gestion de vos styles et réduit le risque de bogues liés à la spécificité CSS.
Oui, vous pouvez utiliser CCSS pour une conception réactive. Tout comme le CSS traditionnel, CCSS prend en charge les requêtes multimédias, qui vous permettent d'appliquer différents styles en fonction de la taille de l'écran de l'appareil. Cela facilite la création d'un design réactif qui a fière allure sur tous les appareils.
CCSS améliore la maintenabilité d'un projet en rendant les styles modulaires et plus facile à gérer. Chaque composant a ses propres styles, donc si vous devez mettre à jour ou modifier un composant, vous n'avez qu'à modifier les styles pour ce composant spécifique. Cela réduit le risque d'introduction de bogues et facilite la mise à jour ou le refacteur de votre code.
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!
La différence entre nohup et &
Méthodes de codage courantes
Explication détaillée de la fonction fork Linux
Quel est l'impact de la fermeture du port 445 ?
Quelle est la différence entre les espaces pleine largeur et les espaces demi-largeur ?
ps supprimer la zone sélectionnée
Comment connecter PHP à la base de données mssql
Sinon, utilisation dans la structure de boucle Python
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
