Philosophie CSS

Bonjour à tous! Il est temps d'annoncer que nous prévoyons de publier un nouveau livre CSS avant la fin de février, qui est recommandé à tous ceux qui maîtrisent déjà MacFarland (bien qu'il soit toujours disponible, nous prévoyons de faire la prochaine surpression en janvier).

Aujourd'hui, vous êtes invité à traduire un article de Keith Grant (publié en juin), dans lequel l'auteur expose son point de vue sur le CSS et explique en fait de quoi il voulait parler dans son livre. Nous lisons et commentons!



J'ai passé beaucoup de temps à réfléchir à ce qu'est la pensée orientée CSS. Il semble que certains parviennent à «l'apprendre», d'autres non. Je pense que si je pouvais expliquer clairement ce qu'est cette vision du monde, peut-être que le CSS lui-même deviendrait plus compréhensible pour ceux qui travaillent avec eux. C'est en partie pourquoi je me suis assis et j'ai écrit le livre CSS pour les professionnels.

Aujourd'hui, je veux aborder à nouveau ce problème. Considérez trois fonctionnalités CSS clés qui distinguent ce langage des langages de programmation traditionnels. CSS est persistant, déclaratif et contextuel. Je pense que la compréhension de ces aspects du langage est une condition préalable clé pour devenir un maître CSS.

Résistant CSS

Si vous supprimez accidentellement un morceau de code dans un fichier JavaScript, l'application ou la page Web où il est utilisé se bloquera ou se bloquera presque certainement, et le script (ou même la page entière) échouera. Si vous faites de même en CSS, vous ne remarquerez peut-être rien. Presque tous les autres codes, à l'exception du fragment supprimé, continueront de fonctionner comme il se doit.

Cette propriété est appelée résilience. HTML et CSS sont spécialement conçus dans l'attente d'une tolérance aux pannes. En cas de problème, le navigateur lance une erreur; sinon, il ignore simplement cette partie du code et va plus loin.

D'un point de vue de débogage, cela peut sembler absurde: si un programme ne génère pas d'erreurs, comment savoir que quelque chose s'est mal passé? Mais c'est l'aspect le plus important du périphérique CSS. Il est tissé dans le tissu de la langue elle-même. J'avoue, il faut du temps pour s'y habituer. Cependant, dès que vous comprenez cela, vous pouvez utiliser en toute sécurité les fonctionnalités qui ne sont pas prises en charge dans tous les navigateurs. C'est ainsi que le développement progressif d'un site ou d'une application est assuré.

Considérez cet exemple avec une disposition de maillage. Il fonctionne à la fois dans les navigateurs qui prennent en charge la grille et dans les navigateurs qui ne prennent pas en charge la grille. Dans les navigateurs où la grille n'est pas prise en charge, la mise en page s'avérera légèrement inégale (les tailles exactes des éléments peuvent varier), mais la page sera toujours disposée approximativement comme il se doit:

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .portfolio__item { display: inline-block; max-width: 600px; } 

Un navigateur qui ne comprend pas les deux déclarations de la grille les ignorera et il sera possible de terminer le travail grâce à d'autres règles. À son tour, le navigateur qui comprend la grille utilise la disposition de la grille et ignore la déclaration de bloc en ligne (car c'est ainsi que la grille fonctionne de cette manière). Jen Simmons appelle en plaisantant ce phénomène « CSS quantique ». Vous prenez une certaine capacité CSS et «utilisez et n'utilisez pas en même temps. Mais cela fonctionne et ne fonctionne pas simultanément. »

Ce phénomène de comportement de «sécurité» fait partie intégrante du travail avec CSS, mais il est étranger à la plupart des langages de programmation traditionnels.

Déclaration CSS

En JavaScript, nous écrivons des instructions spécifiques étape par étape décrivant comment le programme doit aboutir à un résultat. En CSS, vous dites au navigateur exactement ce que vous voulez voir à l'écran, et le navigateur trouve un moyen de le faire. Comprendre cela est très important. Si vous apprenez cela, alors CSS fera tout le travail pour vous , et si vous ne le faites pas, alors vous saisirez l'essence même de CSS et vous serez déçu encore et encore.

Lorsque vous écrivez CSS, vous configurez en fait un système de contraintes. Nous n'indiquons pas au navigateur où chaque élément particulier doit être situé sur la page, mais nous informons quels retraits entre eux doivent être, après quoi le navigateur lui-même met tout à sa place. Vous ne dites pas au navigateur (du moins, vous ne devez pas indiquer) quelle hauteur le conteneur doit être. Vous autorisez le navigateur à déterminer cela pendant l'affichage lui-même, lorsqu'il connaît le contenu du conteneur, sait quels autres styles sont utilisés dans ce contexte et quelle est la largeur disponible de la fenêtre.

Vous devez considérer trop de variables. L'essence du CSS est d'organiser le processus de sorte que vous n'ayez pas à vous soucier de toutes ces variables. Définissez un système de restrictions. La langue elle-même s'occupe des détails.

Exemple simple

Regardons un tel exemple CSS: font-size: 2em . Que fait ce code? "Augmente la taille de la police", dites-vous. Mais ce n'est pas tout. Il corrige également la césure des lignes de texte à l'intérieur du conteneur, car moins de mots tiennent désormais dans chaque ligne. Par conséquent, cela augmente souvent le nombre de lignes de texte et augmente également la hauteur du conteneur de sorte que ces nouvelles lignes y tiennent. Lorsque vous modifiez la hauteur du conteneur, tout le texte situé sur la page sous ce conteneur se décale en conséquence. Enfin, le code ci-dessus définit également la valeur em locale. Les valeurs de toutes les autres propriétés utilisées pour déterminer em unités em devront être recalculées.

Cette annonce à elle seule génère tout un train de changements sur la page. Et tous sont conçus pour atteindre exactement ce que vous devez rechercher: le contenu tient toujours sur la page, les éléments ne se chevauchent pas et toutes les propriétés qui dépendent de la taille de la police sont corrigées (par exemple, l'indentation). Vous n'avez pas à penser à tous ces détails. Le navigateur lui-même effectue tous les calculs ci-dessus, et le fait par défaut.

Si vous ne voulez rien de tout cela, vous pouvez le faire aussi. Vous pouvez limiter considérablement la hauteur d'un conteneur avec les propriétés max-height et overflow: auto . Vous pouvez redéfinir les marges intérieures afin qu'elles soient mesurées en unités de rem ou px , c'est-à-dire qu'elles ne sont pas recomptées après la taille de la police. Cela révèle un aspect intéressant du travail avec CSS: parfois, vous ne dites pas au navigateur ce qu'il doit faire, mais, en fait, vous lui interdisez de faire quoi que ce soit.

Avantages de la grille

Cependant, il existe de nouvelles fonctionnalités dans CSS qui sont encore plus cool. Les exemples les plus courants sont Flexbox et Grid. Juste quelques annonces - et vous avez une disposition de maillage exceptionnellement flexible qui fonctionne. Pas besoin de s'inquiéter de nombreux cas particuliers. En fait, vous dites au navigateur: «empilez ces blocs en colonnes de 400 pixels de large chacun», et le navigateur le fait pour vous. Tout sur tout nécessite environ trois lignes de code.

Si vous essayez de le faire impérativement, vous devrez faire face à de nombreux scénarios étranges. Et si l'un des blocs devient trop long? Que faire si la fenêtre est trop étroite? Et si elle est très large? Et s'il y a toute une feuille de contenu dans un élément et seulement quelques mots dans un autre? Certes, il est probable qu'en CSS, vous n'aurez à penser à rien de tout cela. Tout est déjà pensé pour vous et défini dans le cahier des charges, et le navigateur suit les règles pour vous. C'est le pouvoir du langage déclaratif.

Bien sûr, cela n'est pas sans compromis. Si le langage déclaratif ne prend en charge aucune des fonctionnalités dont vous avez besoin (par exemple, "pont"), il reste à s'appuyer sur des astuces de grand-père ou sur JavaScript. De plus, le développement du CSS est largement consacré à la lutte contre de telles choses depuis de nombreuses années. Heureusement, avec le développement de Flexbox et Grid, nous pouvons faire beaucoup plus, et sans aucun piratage (oui, les éléments lâches sont un hack). Si vous manquez encore quelque chose dans cette situation, je vous recommande de lire sur CSS Houdini , qui commencent tout juste à prendre racine dans les navigateurs.

CSS est contextuel

À l'ère React, nous avons adopté une approche extrêmement pratique: le développement modulaire à base de composants. Il est conforme aux meilleures pratiques CSS, ainsi que BEM, SMACSS et CSS-in-JS. Je ne veux pas minimiser l'importance de toutes ces fonctionnalités, car elles jouent un rôle clé dans la création d'applications à grande échelle. Mais, je pense qu'il est tout aussi important de reconnaître que CSS n'est pas 100% modulaire, et ne devrait pas l'être.
Il y a deux raisons à cela. Le premier et le plus évident - l'application doit être conçue dans des styles globaux. Presque toujours, vous devez définir le casque et la taille de police au niveau de la page, qui sera utilisé par défaut. Après cela, ces valeurs seront héritées par tous les éléments descendants qui ne les remplaceront pas explicitement. Vous avez également besoin que certains aspects de votre conception soient systématiquement appliqués tout au long de la page: thème de couleur, rayons de congé pour les blocs, ombrage des blocs et tailles de marge globales. Plus de styles locaux qui agissent dans certaines parties de la page sont appliqués dans le contexte de ces styles globaux.

La deuxième raison, plus subtile, est que CSS et vos décisions de conception dépendent du contexte de la page. Supposons que nous appliquions les styles CSS suivants à un élément d'une page:

 .the-thing { position: absolute; top: 10px; left: 10px; } 

Que fera ce code? Ne sachant pas exactement où se trouve cet élément dans le DOM et quels styles sont appliqués sur le reste de la page, nous ne pouvons pas répondre à cette question. Le placement absolu est effectué par rapport à l'élément ancêtre le plus proche, et ce positionnement se révélera différent selon le type d'ancêtre en question et le type de placement qui lui a été appliqué.

De plus, votre capacité (ou impossibilité) de superposer des éléments les uns aux autres dépendra largement de l'emplacement de ces deux éléments dans le DOM. Le brassage des éléments dans le DOM peut considérablement affecter la disposition des éléments et leur chevauchement. C'est pourquoi les contextes de flux de documents et de superposition sont des sujets fondamentaux (bien que parfois complexes).

La nature contextuelle du CSS est en partie due au fait que c'est ainsi que fonctionne la conception. Si un ingénieur conçoit un pont, vous ne pouvez pas simplement regarder le dessin et dire: "tout va bien, mais je n'aime pas ce faisceau; l'emmener. " Si vous supprimez une poutre, cela affectera l'unité structurelle de l'ensemble du pont. De même, modifiez simplement n'importe quel élément de conception - et tous les autres éléments sur l'écran seront perçus différemment. Souvent, il est nécessaire d'élaborer plusieurs éléments à la fois en étroite unité les uns avec les autres.

Par exemple, si vous augmentez le titre sur l'une des tuiles, cela deviendra plus frappant pour l'utilisateur, et pour cette raison, d'autres éléments à l'écran sembleront moins importants. Ici, les limites ne résident pas dans le plan de la physique, comme dans la construction du pont; nous parlons de lois plus "humanitaires" qui affectent la perception humaine. Des éléments de la page se reflètent sur l'écran, qui a ses propres caractéristiques physiques, et lors du travail, il est nécessaire de prendre en compte les réalités du monde physique et la façon dont nous le percevons.

Comme vous le savez, l'architecture logicielle est soumise aux principes de modularité et d'encapsulation . Cette approche est justifiée au niveau du code, car le code est complexe et la méthode décrite vous permet de diviser le problème en fragments digestibles. Cependant, il ne faut pas oublier que cette approche est imparfaite. En CSS, vous ne pouvez jamais ignorer complètement ce qui se passe dans un module particulier.

Résumé

Les trois aspects décrits distinguent le CSS des langages de programmation traditionnels. Ces différences peuvent ne pas vous convenir immédiatement, mais ce sont les aspects les plus puissants du CSS. Je vais oser suggérer que les développeurs qui parviennent à comprendre et à bien comprendre ces principes atteindront de véritables sommets en CSS.