Why is CSS Frustrating? | CSS-Tricks

Putain oui :

CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you're never just setting that one thing. That one thing combines and bounces off of and contradicts with a dozen other things, including default things that you never actually set yourself.

One rule of thumb for mitigating this is, never be more explicit than you need to be. Web pages are responsive by default. Writing good CSS means leveraging that fact instead of overriding it. Use percentages or viewport units instead of a media query if possible. Use min-width instead of width where you can. Think in terms of rules, in terms of what you really mean to say, instead of just adding properties until things look right. Try to get a feel for how the browser resolves layout and sizing, and make your changes and additions on top of that judiciously. Work with CSS, instead of against it.

Le CSS a effectivement cette particularité où modifier un truc agit sur plusieurs autres trucs.
Par exemple, mettre un élement en « display: inline » annule toute déclaration de width et de height. Un « margin: auto » a des effets surprenants dans le cas des éléments flex/grid ou autre (en tout cas, c’est surprenant la première fois, mais au final c’est parfaitement logique !)

Ensuite, il dit que les pages web sont responsives et auto-zoomantes par défaut, et c’est vrai : une seule ligne <meta> suffit à rendre votre page lisible sur mobile.
Le problème c’est que généralement en CSS on commence par tout fixer en taille, puis, on rajoute encore plus de CSS pour tout détacher et rendre ça responsive. L’ensemble fonctionne, ça n’est pas le problème, mais on se retrouve avec 3 000 lignes de CSS impossible à maintenir correctement.

Si j’avais mon conseil à dire : acceptez le fait que certains éléments aient des styles propres à eux : que les titres aient des marges, que les tableaux aient des bordures, que les listes à puces soient indentés, que les paragraphes soient espacés.
Ne mettez pas des hauteurs fixes : préférez min-height et laissez le contenu dicter la hauteur des éléments. Laissez la taille de l’écran dicter la largeur de vos éléments.