Catégories
Astuces et Design

Conseils CSS pour les nouveaux développeurs

Que le 4 soit avec vous!

Si vous avez apprécié cette salutation, vous adorerez les trucs ringards qui vont suivre. Au cours d'une soirée, j'ai noté certains des conseils CSS que j'ai appris au cours des dernières années en tant que développeur et les ai mis dans cet article 😃. J'ai gardé mon conseil le plus important pour la fin de la liste. Prendre plaisir!

  • CSS signifie feuilles de style en cascade. Cela signifie que ce sont des feuilles de style en cascade. Jetez un œil à ce site génial sur la cascade CSS (qui a des quiz!) Pour en savoir plus.
  • Divers jeux en ligne ont été créés pour aider les gens à apprendre le CSS et ils sont incroyables à ce jour! https://flexboxfroggy.com/ pour Flexbox, https://cssgridgarden.com/ pour Grid et https://flukeout.github.io/ pour les sélecteurs CSS.
  • Une spécificité de la cascade CSS est la spécificité. Les éléments HTML peuvent être stylisés de différentes manières. Certains de vos styles peuvent être remplacés selon la façon dont vous avez ciblé votre élément pour le style. L'écriture de styles en ligne remplacera tout style dans une feuille de style. Une id sur un élément remplacera un class, et un class remplacera directement le ciblage de l'élément. Dans l'esprit du jour où cet article de blog a été créé, consultez cet article sur le calcul de la spécificité CSS – édition Star Wars! Notez que de nombreuses bibliothèques CSS-in-JS sont conçues pour prendre en charge les problèmes de spécificité pour vous en étendant les styles à des fichiers uniques. Cependant, il est absolument payant d'en savoir plus!
  • Ce n'est pas une bonne idée de corriger les lacunes de votre HTML avec CSS. Corrigez d'abord votre code HTML!
  • Il existe des pseudo-éléments en HTML qui peuvent également être stylisés et fournir des hacks pratiques en ce qui concerne les éléments de style. Les plus connus sont ::before et ::after, mais il y a sept pseudo-éléments au total.
  • CSS permet l'organisation des éléments sur la page Web. Il existe même des systèmes de mise en page – les plus connus sont Grille, Flexbox, flotteurs et table (du plus récent au plus ancien).
  • Si la prise en charge du navigateur de votre projet le permet, essayez certainement certains des CSS les plus récents, par exemple La grille. Si les gens ont trop peur d'essayer un nouveau CSS, même s'il ne dispose pas encore d'une prise en charge complète du navigateur, personne ne l'essayera jamais! Vérifiez la prise en charge du navigateur avec https://caniuse.com.
  • Les éléments d'une page Web peuvent être dimensionnés et espacés en utilisant un certain nombre de valeurs différentes. Il y a px, ems, rems, ch, vw, vh, %, etc. Lors de la création de pages Web plus complexes, l'interaction des valeurs de dimensionnement ou d'espacement des éléments peut faire une grande différence dans la facilité et la maintenabilité des styles.
  • Pour chaque manière abrégée d'écrire du CSS, il est plus que probable qu'il existe un moyen long de l'écrire. Par exemple. margin: 20px 30px 10px 15px peut être margin-right: 30px, margin-left: 15px, margin-top: 20px, margin-bottom: 10px. Écrire la version longue peut parfois être plus clair pour les autres développeurs qui lisent votre CSS!
  • Vous pouvez changer le CSS directement dans les outils de développement de votre navigateur (pour les ouvrir, faites un clic droit sur la fenêtre du navigateur et choisissez "inspecter" ou "inspecter l'élément"). La grande chose est qu'aucun des styles ne sera enregistré, vous pouvez donc expérimenter ici! Une autre grande chose au sujet des outils de développement est l'onglet "styles calculés", car cela vous montre exactement quels styles sont actuellement appliqués à un élément. Cela peut être très utile pour déboguer votre CSS!
  • En plus des styles calculés, les outils de développement afficheront également les styles de disposition, vous donnant une indication claire de la marge, du remplissage et des bordures appliqués à un élément.
  • Stack Overflow et CSS Tricks sont deux de vos amis liés aux CSS (mais méfiez-vous des réponses obsolètes).
  • Consultez la documentation MDN pour une documentation CSS à jour. Ils ont même des aires de jeux en direct pour de nombreuses propriétés CSS – par exemple https://developer.mozilla.org/en-US/docs/Web/CSS/transform.
  • Il est utile de connaître la position relative et absolue. J'entends par là des éléments parents avec position: relative qui ont des éléments enfants (imbriqués) avec position: absolute.
  • Une page Web a tendance à être composée de nombreuses boîtes de différentes tailles. Chaque élément est en fait considéré comme une boîte par le navigateur – titres, paragraphes, étendues, tout. Chaque boîte se compose de 4 éléments – le contenu de l'élément, son remplissage, sa marge et sa bordure. Par défaut, le modèle de boîte indique que toute bordure ou rembourrage que vous ajoutez à un élément sera ajouté au-dessus de la largeur ou de la hauteur de l'élément. Cela peut être déroutant ou contre-intuitif. Réglage box-sizing: border-box indique aux éléments de ne pas augmenter en largeur ou en hauteur lors de l'ajout d'une bordure ou d'un rembourrage. Au lieu de cela, la taille du contenu est ajustée.
  • Ne supprimez pas les contours de focus du navigateur par défaut, sauf si vous êtes sûr vous gérez correctement votre propre état de focus. La suppression des contours peut empêcher un utilisateur de naviguer sur votre site à l'aide d'une technologie d'assistance ou du clavier.
  • Il existe de nombreux préprocesseurs CSS qui vous permettent de générer (compiler) du CSS en utilisant leur propre syntaxe unique, qui offre souvent un moyen d'écrire du CSS de manière plus organisée, plus courte ou plus fonctionnelle. Méfiez-vous des préprocesseurs, car ils peuvent être excessifs pour de nombreux projets, créer des CSS compilés surdimensionnés ou rendre les CSS difficiles à refactoriser à l'avenir. Les exemples de préprocesseurs incluent Sass, Less et Stylus.
  • Les propriétés personnalisées CSS (également appelées variables CSS) sont un moyen pour les développeurs de s'éloigner des préprocesseurs CSS et d'en profiter quand même. Ils vous permettent de définir des valeurs spécifiques sous un nom de variable. Ces variables peuvent être utilisées sur n'importe quel nombre d'éléments et si la valeur doit changer, elle ne doit être changée qu'à un seul endroit. Par exemple. une variable contenant une grande taille de police telle que --fontSizeL: 150% peut être utilisé sur de nombreux éléments différents comme celui-ci: font-size var(--fontSizeL). Si la valeur doit changer en 140%, il peut être fait une fois rapidement et facilement. Il n'y a pas de support pour Internet Explorer, mais des polyfills existent pour contourner ce problème!
  • CSS a beaucoup de bizarreries bizarres auxquelles vous ne pensez pas. Si vous ne savez pas pourquoi certains CSS ne font pas ce que vous voulez, n'hésitez pas à rechercher la raison. Quelques exemples incluent des images display: inline-block de sorte qu'ils aient un espacement implicite au fond, ou que vous devez définir min-width: 0 sur les articles flexibles pour empêcher les articles de croître à l'infini.
  • CSS ne doit pas être trop complexe. Il existe le plus souvent une solution simple à un problème de style. Je ne peux pas vous dire combien de fois j'ai sur-utilisé CSS et piraté une solution fragile ensemble. Si j'avais regardé le DOM (modèle d'objet de document – quelque chose que vous pouvez voir dans vos outils de développement) et pensé à ce qui se passait correctement, j'aurais pu gagner du temps et de nombreuses lignes de CSS incontrôlables.
  • Comme pour toute programmation (et pour les non-croyants, oui, CSS programme 😉), si votre tête est trop loin dans le CSS que vous avez fait, faites une pause et revenez-y plus tard. Cela peut faire des merveilles.
  • Découvrez quelques articles de blog sur l'histoire de CSS et qui y travaille aujourd'hui. Il y a toujours un groupe de travail CSS actif qui réfléchit à l'avenir du CSS!
  • Vous avez peut-être entendu parler de CSS3, mais ne retenez pas votre souffle pour CSS4. Le groupe de travail CSS travaille sur différents modules de fonctionnalités CSS, chacun ayant ses propres «  niveaux '' ou numéros de version, par ex. Flexbox version 1, ou sélecteurs niveau 4, etc.
  • L'expertise CSS vient avec le temps! Alors que CSS est facile à démarrer et vous donne des résultats visuels immédiats, la maîtrise prend du temps et c'est parfaitement correct 😃. C'est la même chose pour tout le monde.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *