CSS prête à confusion ? Tu n'es pas seul

Quand j'ai commencé mon parcours dans le développement web, comme tout le monde, j'ai commencé par les bases : apprendre le HTML puis le CSS puis le JavaScript. Je voulais juste construire des choses le plus tôt possible, donc j'en ai seulement appris assez pour me permettre de commencer à construire des projets, puis je cherchais de nouvelles choses au fur et à mesure que je tombais sur elles ou que j'en ressentais le besoin.
L’un des avantages de cette méthode était que j’étais capable de construire rapidement de petits projets, mais il y a aussi un défaut majeur dans cette méthode : elle laisse beaucoup de lacunes dans l’apprentissage.

Avance rapide pour présenter, je suis en train d'apprendre ReactJS et j'apprécie ça, mais chaque fois qu'il s'agissait de styliser les composants, c'était juste frustrant et contre-intuitif parce que CSS ne me semblait tout simplement pas très clair dans ma tête . J'ajouterais simplement des propriétés pour obtenir les résultats souhaités, mais quelque part en cours de route, j'avais l'impression de marcher sur un ancien pont attendant de s'effondrer suite à un mauvais mouvement.

Il s'avère que CSS n'est pas aussi déroutant ou difficile que je le pensais. En réalité, je n'avais tout simplement pas le bon modèle mental pour CSS.
En général, les gens considèrent CSS comme un ensemble de propriétés (paires clé : valeur) permettant d’obtenir l’apparence ou la disposition souhaitée. Mais cela a changé maintenant pour moi et, espérons-le, ce sera le cas pour vous d'ici la fin de cet article.

1. Ne considérez pas CSS comme un ensemble de propriétés. Pensez plutôt au CSS comme à un ensemble de modes de mise en page

CSS est composé de nombreux
• algorithmes de mise en pagedifférents, appelésmodes de mise en page.
Chaque mode de mise en page est comme son propre sous-langage au sein de CSS qui peut redéfinir et modifier la façon dont les propriétés CSS sont utilisées. En d’autres termes, les propriétés CSS sont entrées dans ces algorithmes. Alors,
• concentrez-vous sur la façon dont ces algorithmes utilisent ces propriétésplutôt que de mémoriser un tas de propriétés.

2.

Chaque mise en page est conçue pour résoudre un problème spécifique

• Le mode de mise en page par défaut : Flux Normal, est destiné à créer des documents numériques.
C'est similaire à l'algorithme de mise en page MS Word. c'est à dire. Les titres et les paragraphes s'empilent verticalement sous forme de blocs, tandis que des éléments tels que le texte, les liens et les images se trouvent dans ces blocs.
Outre le flux Normal, deux autres modes de mise en page que vous utiliserez le plus souvent sont les mises en page Flexbox et Grid.

3.

Modes de disposition Flexbox et Grille

Encore une fois, chaque mode de mise en page a été créé pour résoudre un problème spécifique. Pensez-y de cette façon :
• Quel problème Flexbox résout-il ?
• Flexbox consiste à organiser un groupe d'éléments dans une ligne ou une colonne avec une grande flexibilité et un contrôle sur la façon dont chaque élément est distribué et aligné au sein du groupe.

• Quel problème Grid résout-il ?CSS Grid facilite l'organisation et l'alignement d'un groupe d'éléments en 2 dimensions. Il vous offre flexibilité et contrôle sur chaque élément individuel, ou sur les lignes/colonnes d'éléments pour manipuler leur disposition.
  

Une fois que vous commencez à penser au CSS en termes de collection de modes de mise en page et à la manière dont ils affectent et modifient les propriétés CSS, vous obtenez un modèle mental plus clair de la façon dont les choses se produisent, même si le CSS s'étend sur de nombreuses lignes.

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!