Sacha Greif se demandait ouvertement si CSS est devenu, vous savez, trop grand. Avec tous les goodies qui ont été livrés dans les navigateurs ces deux dernières années — requêtes de conteneur! syntaxe de couleur relative! couches en cascade! propriétés logiques! plages dans les requêtes multimédias! transformations individuelles! :has() sélecteur! - et tout ce qui se profile à l'horizon - Bascule CSS! nidification! mélange de couleurs! animations liées au défilement! styles délimités! - il y a certainement une courbe d'apprentissage différente pour CSS ces jours-ci pour les front-ends nouveaux et chevronnés.
Il fut peut-être un temps où il était possible de connaître la plupart des propriétés CSS et leur fonctionnement. Ces jours sont révolus depuis longtemps, du moins pour un ancien comme moi. Mais cela soulève la question: quel CSS faut-il absolument connaitre ?
Vincas Stonys récemment a essayé une liste. Chris en assembler un basé sur les fonctionnalités publiées depuis CSS3. Vous avez probablement une idée de ce que vous incluriez dans une liste. Si je devais constituer un Top 5 et me limiter uniquement aux propriétés et aux sélecteurs, cela pourrait ressembler à ceci…
writing-mode
Je ne peux pas en dire assez sur le writing-mode propriété. Ce qui le rend important, en particulier du point de vue de l'apprentissage, c'est qu'il vous met en place pour des principes inclusifs qui tiennent compte de l'élaboration de mises en page, quelle que soit la langue de l'utilisateur. Une bonne compréhension de writing-mode va conduire à une compréhension de propriétés et valeurs logiques, et ceux-ci, à leur tour, préparent le terrain pour comprendre le flux de documents et penser en termes de block, inline, start ainsi que end plutôt que des directions physiques.
display
J'ai du mal à croire que quelqu'un puisse écrire un bon CSS sans avoir une bonne maîtrise du display propriété. C'est à la fois une propriété et un cadre pour créer des mises en page. Il n'y a pas de Flexbox ou de grille CSS sans cela, ce qui en fait une sorte de gardien pour comprendre ces fonctionnalités importantes.
De plus, le display propriété complète parfaitement writing-mode. C'est exactement ce dont vous aurez besoin une fois writing-mode vous a exposé au flux de documents et aux directions logiques. Vous allez avoir besoin d'une propriété pour changer le flux normal d'un élément (comme changer un élément de bloc en un élément en ligne) ou commencer à disposer les choses (comme créer un contexte de mise en page flexible) et c'est là display entre en scène.
margin / padding / border
Ugh, je triche totalement ici mais pense à apprendre margin, padding ainsi que border ensemble est en quelque sorte inévitable. Ils font tous partie de Le modèle de boîte, tous aident à l'espacement et au style, et tous nécessitent de se familiariser avec Unités de longueur CSS. Savoir à quoi ces propriétés sont destinées et comment elles contribuent à la taille calculée d'un élément vous donne certainement beaucoup plus de contrôle sur le style et dissipe toute confusion sur la raison pour laquelle un élément a la taille qu'il a - un casse-tête CSS courant !
::before ainsi que le ::after
Un autre où je triche un peu. Oui, ::before ainsi que le ::after sont deux pseudo-éléments individuels, mais encore une fois, je ne peux pas imaginer apprendre l'un sans l'autre. C'est un deux-fer!
Je me souviens à quel point c'était époustouflant pour moi d'apprendre que ceux-ci existaient et pouvaient être utilisés pour tout créer à partir de effets d'interface utilisateur sympas à remplir illustrations à une seule division. Il ouvre de nouvelles possibilités et donne un premier aperçu de la puissance réelle du CSS.
@media
Oof, j'en suis déjà à mon cinquième et dernier élément de la liste et j'ai l'impression qu'il y a encore tellement de bonté CSS qui appartient ici. Mais si je dois choisir une dernière chose, ce serait questions des médias. Pourquoi? Parce que c'est un ingrédient essentiel pour créer des mises en page fluides et flexibles et différents contextes de visualisation. Requêtes de conteneur pourrait finir par le retirer de ma liste à mesure qu'il mûrit, mais pour l'instant, @media est une excellente introduction à la conception réactive.
Au-delà de ça, @media est une belle première étape dans les qualités conditionnelles de CSS. Que nous écrivions une requête basée sur le type d'appareil utilisé (par exemple, screen or print) ou a lorsque la fenêtre d'affichage du navigateur répond à certains critères (par exemple, width >= 768px) et de @media La syntaxe est incroyablement utile pour créer des mises en page optimisées pour différentes conditions.
Oh, et nous n'avons même pas abordé la façon dont @media concerne l'accessibilité, grâce à sa capacité à appliquer des styles en fonction des préférences d'un utilisateur (par exemple, prefers-reduced-motion). Ainsi, en plus de créer des mises en page conditionnelles, les requêtes multimédias sont une belle prochaine étape vers la compréhension de la conception inclusive.
Mentions honorables
Distiller CSS dans une liste de cinq propriétés et sélecteurs incontournables est difficile, surtout maintenant que CSS est plus puissant aujourd'hui qu'il ne l'était, disons, même il y a cinq ans. Il y a un certain nombre d'autres éléments que je voulais vraiment inclure, comme (sans ordre particulier):
calc()has()colorfontoverflowposition(surtout celui-ci)z-index
Mais je maintiens mes choix. Apprendre CSS est plus important que mémoriser une liste de propriétés. C'est un voyage et je pense que les cinq que j'ai choisis tracent un joli petit chemin d'apprentissage qui prépare le terrain pour écrire de bonnes règles de style et les prochaines étapes pour plonger plus profondément dans CSS.
D'accord, dis-moi le tien !
Vous n'êtes pas d'accord avec ma liste ? Tu devrais! Je parie que vous avez des opinions intelligentes et je veux voir comment vous auriez complété une liste des 5 meilleurs.
