5 étapes pour améliorer considérablement vos connaissances CSS en 24 heures
Vous codez depuis un certain temps maintenant et vous connaissez bien un fichier CSS. Vous n'êtes certainement pas un maître, mais avec suffisamment de violon, vous pouvez arriver là où vous voulez aller. Vous vous demandez cependant si vous réussirez à dépasser ce point où CSS est une telle lutte. Serez-vous un jour capable d'exploser une mise en page complexe sans finalement recourir à des essais et erreurs pour voir ce qui fonctionne et ce qui ne fonctionne pas?
La bonne nouvelle est que vous pouvez en effet dépasser ce point frustrant où vous connaissez suffisamment de CSS pour coder un site Web, mais vous n'avez pas les bases solides qui vous permettent de coder sans l'ennui de ne pas comprendre exactement comment vous allez arriver là où vous le souhaitez '' va, et ce point est beaucoup plus proche que vous ne le pensez. Je propose qu'il y ait cinq sujets qui amélioreront considérablement votre compréhension du CSS. Passez un peu de temps à lire sur chacun au cours des vingt-quatre prochaines heures et vous changerez à jamais la façon dont vous codez.
Explorez Envato Elements
1. Enveloppez votre esprit autour des contextes de positionnement
Si vous voulez vraiment bien comprendre comment utiliser CSS pour déplacer des éléments HTML là où vous voulez qu'ils aillent, vous devez absolument maîtriser les contextes de positionnement. Et je ne parle pas seulement d'une compréhension désinvolte, je veux dire une connaissance approfondie de leurs différences, comportements, bizarreries, etc.
Il y a en fait cinq valeurs de position que vous devez comprendre. Si vous ne pouvez pas nommer les cinq sans les chercher, alors vous êtes certainement un candidat de choix pour ce peu d'éducation. Les voici: statiques, fixes, relatifs, absolus et hérités.
Vous devez connaître et comprendre les cinq, mais les deux grands qui changeront vraiment la façon dont vous codez sont le positionnement absolu et relatif. Apprendre à utiliser ces deux contextes de positionnement séparément, puis à se plonger dans la façon dont ils fonctionnent ensemble, changera fondamentalement la façon dont vous voyez la disposition CSS, je vous le promets. C'est une révélation qui rendra votre travail infiniment plus facile.
Ressources pour vous y rendre
Le point bas sur le positionnement absolu par rapport au positionnement relatif
Ceci est ma plongée profonde dans le sujet du contexte de positionnement. Je mentionne et explique brièvement les cinq, mais je me concentre vraiment sur les deux grands: comment ils diffèrent, comment ils sont différents et comment ils fonctionnent ensemble. Lisez cette pièce et vous serez sur la bonne voie pour un positionnement CSS sans maux de tête.
Positionnement CSS 101
Cette pièce provient du vénérable blog A List Apart, donc vous savez tout de suite que cela va être à la fois approfondi et incroyablement éducatif. L'article a été publié en 2010 mais les informations sont toujours parfaitement pertinentes et constituent une excellente introduction aux cinq contextes de positionnement. Ce n'est pas un article très visuel, mais il contient de nombreux exemples de code simples pour vous aider dans chaque concept.
Apprenez le positionnement CSS en dix étapes
Il s'agit d'un aperçu incroyablement bref des différents contextes de positionnement. Au lieu d'un long article, cette page présente une petite boîte avec dix onglets. Chaque onglet a un petit extrait de code et une phrase ou deux expliquant le code. À droite se trouve un exemple de mise en page en direct qui se met à jour avec chaque onglet. Ce format est fantastique pour lier visuellement des extraits de code aux mises en page qu'ils produisent et je recommande fortement de lui donner un coup d'œil si vous avez du mal avec des explications principalement textuelles comme celle ci-dessus d'ALA.
2. Flotteurs principaux
Lorsque vous apprenez CSS pour la première fois, les flotteurs semblent être l'un des systèmes de mise en page les plus foirés imaginables. Une fois que vous avez appris à les utiliser au niveau de base, vous devez alors tout savoir sur la façon dont les parents ne contenant que des enfants flottants ont une hauteur effondrée, ce qui conduit à quarante-sept façons différentes de résoudre le problème grâce à des corrections claires et à des manipulations de débordement.
Heureusement, à long terme, vous vous habituez aux concepts derrière les flotteurs et ils peuvent même devenir si faciles à utiliser que vous n'y réfléchissez pas du tout. La seule chose qui se trouve entre vous et cet objectif est un ou deux articles solides qui creusent vraiment et expliquent en détail le comportement et les techniques du flotteur à partir de zéro.
Ressources pour vous y rendre
Tout ce que vous ne saviez jamais sur les flotteurs CSS
Dans cet article, je couvre presque toute la gamme des sujets concernant les flottants en CSS. Il commence par une discussion de base sur ce que sont les flotteurs et comment ils fonctionnent. Après cela, je parle de la façon dont les flotteurs affectent les boîtes des éléments impliqués, comment les flotteurs deviennent étranges avec des éléments de hauteurs variables, les neuf règles qui couvrent le comportement du flotteur et bien sûr la débâcle de la hauteur s'effondre et comment y remédier.
Tout sur les flotteurs
Chris Coyier a toujours été mon auteur préféré en ce qui concerne les sujets liés au CSS et son introduction aux flotteurs ne déçoit pas. Si vous cherchez une discussion brève mais directe sur la façon de travailler avec des flotteurs, cette pièce est faite pour vous. J'aime particulièrement les illustrations simples et attrayantes utilisées tout au long de l'article.
Le mystère de la propriété CSS Float
Bien que les articles de Chris Coyier soient généralement brefs et précis, le contenu de Smashing Magazine est généralement assez étendu avec des tonnes d'exemples et des discussions pertinentes. Cet article présente le concept de flotteurs, vous explique comment les utiliser et les effacer, puis se lance dans une discussion sur les endroits où vous voyez généralement les flotteurs utilisés dans des sites du monde réel. Si vous avez besoin de voir la théorie prendre vie, celle-ci est pour vous.
3. Connaissez vos sélecteurs
L'une des clés pour écrire un bon CSS propre est d'avoir une bonne compréhension des sélecteurs CSS disponibles, de leur fonctionnement et du degré de prise en charge sur différents navigateurs. Cela ressemble à un sujet assez simple, mais en réalité, le monde des sélecteurs CSS est assez complexe.
Il y a une tonne de choses intéressantes à découvrir ici, de l'utilisation des sélecteurs de valeur d'attribut et du ciblage des mots clés dans les noms de classe à la façon dont le sélecteur universel peut être utile pour déboguer votre code. Même si vous pensez que vous pouvez vous débrouiller sans comprendre un tas de sélecteurs fantaisistes, la vérité est que d'autres codeurs utilisent ce genre de choses tous les jours et vous devez être en mesure de comprendre ce que vous voyez lorsque vous appuyez sur View Source!
Ressources pour vous y rendre
Sélecteurs CSS: Just the Tricky Bits
Il s'agit d'un article amusant qui examine principalement les aspects les plus complexes des sélecteurs CSS. Je saute les choses au niveau du sol et saute directement dans la discussion sur la façon dont le concept du DOM se traduit par le ciblage de divers aspects de votre document avec CSS. Vous apprendrez tout sur la sélection des enfants et des frères et sœurs, comment enchaîner les sélecteurs et bien plus encore.
Les 30 sélecteurs CSS à mémoriser
Jeffrey Way est une rockstar de développement Web et des articles comme celui-ci prouvent pourquoi. Cet article Nettuts + couvre une vaste gamme de sélecteurs CSS dans un format simple et bref qui met beaucoup l'accent sur la prise en charge du navigateur. Étonnamment, Jeff a même codé des pages d'exemples en direct pour chacun des trente sélecteurs.
Sélecteurs d'attributs CSS: comment et pourquoi vous devez les utiliser
Les sélecteurs de valeur d'attribut sont l'un des sous-ensembles les plus puissants de sélecteurs CSS, et CSS3 augmente vraiment cette puissance. Vous ne croirez pas à quel point vos sélecteurs peuvent devenir polyvalents avec un peu de magie de valeur d'attribut. Après avoir lu cet article, vous passerez des phrases comme «sélecteur de valeur d'attribut de sous-chaîne arbitraire» comme un pro.
4. Apprenez les concepts de codage SEC
"Ne vous répétez pas." Cette simple phrase a des implications drastiques en ce qui concerne le codage. Lorsque vous plongez vraiment dans les pratiques de codage DRY, le résultat est un code plus propre, moins de travail et un nouveau flux de travail magnifique qui est aussi stimulant qu'impressionnant.
Contrairement aux autres sujets ci-dessus, qui sont assez étroits, celui-ci est un sujet assez vaste qui couvre toutes sortes de pratiques, techniques et idées différentes. Il est intéressant de noter que l'utilisation des préprocesseurs CSS est l'une des choses qui ont récemment attiré mon attention sur les pratiques de codage DRY.
Bien que beaucoup prétendent que les préprocesseurs conduisent à de mauvaises pratiques de codage, la réalité est le contraire. De toute évidence, les préprocesseurs eux-mêmes permettent d'éviter la répétition manuelle, mais cela va au-delà. L'examen de la sortie d'outils comme LESS et SASS et les objectifs pour les langues en général m'a conduit à écrire de meilleurs CSS purs! Une fois que vous maîtrisez des concepts comme @extend dans Sass, vous ne pouvez pas vous empêcher de penser aux implications lorsque vous codez avec seulement CSS.
Ressources pour vous y rendre
CSS SEC: Ne répétez pas votre CSS
Dans cet article, Steven Bradley vous présente le sujet du CSS SEC et couvre certains de ses principes et objectifs principaux. Il résume la pratique à trois idées simples et vous montre comment mettre en œuvre ces idées dans un véritable flux de travail. Les concepts sont largement empruntés à une présentation de Jeremy Clarke couvrant le même sujet.
Une introduction au CSS orienté objet (OOCSS)
Comme je l'ai mentionné précédemment, les idées inhérentes au mouvement CSS SEC sont assez étendues et directement liées aux concepts dans d'autres constructions. OOCS est une méthodologie de plus en plus populaire qui vise à vous aider à créer des feuilles de style plus rapides et plus efficaces avec une organisation supérieure et moins de répétitions. Il y a deux principes principaux à l'œuvre dans l'OOCS: la séparation de la structure de la peau et la séparation des conteneurs et du contenu. Cet article de Smashing Magazine vous guidera à travers les idées de base et vous aidera à les appliquer à votre propre travail.
Une introduction aux directives SMACSS pour l'écriture CSS
Vous vous souvenez de Steven Bradley du premier article sur CSS SEC? Il a également écrit cette pièce, qui explique un projet similaire mais distinct de OOCS: SMACSS (un projet de Jonathan Snook). Comme avec OOCSS, SMACSS a deux objectifs principaux. La première consiste à augmenter la valeur sémantique d'une section de HTML et de contenu, et la seconde à diminuer l'attente d'une structure HTML spécifique. Cet article explique les deux objectifs en détail et fournit des exemples de code utiles afin que vous puissiez voir SMACSS en action.
5. Connaissez le support de votre navigateur
La cinquième et dernière clé pour améliorer votre CSS est de savoir ce qui fonctionne où. CSS3 est beaucoup trop attrayant pour la plupart d'entre nous à ignorer, mais la dure vérité est que tout un tas de cela ne fonctionne pas dans certains navigateurs (par «certains navigateurs», je veux bien sûr dire IE).
Le grand secret dont les développeurs Web débutants ont besoin pour entrer dans leur tête n'est pas qu'ils doivent mémoriser chaque fonctionnalité CSS et la façon dont chaque navigateur connu de l'homme la gère, mais plutôt le fait qu'il existe des ressources absolument incroyables qui vous fournissent ces informations. librement, il suffit de savoir où chercher.
Ressources pour vous y rendre
Prise en charge du navigateur de clouage en CSS3 et HTML5: ressources inestimables à utiliser aujourd'hui
Dans cet article, je vous présente les quelques sites que j'ai mis en signet pour vérifier la prise en charge du navigateur. Ces ressources sont fantastiques, visuelles et vous donnent les informations dont vous avez besoin en un tournemain pour que vous puissiez revenir au codage. Jetez un oeil pour voir ce qu'ils sont!
Prise en charge du navigateur pour CSS3: quel est l'état actuel?
Cet article a été écrit il y a plus d'un an, donc la partie «état actuel» est discutable, mais pas assez a changé en ce moment pour rendre les informations de cet article obsolètes. Il sert de vue d'ensemble incroyablement utile de diverses propriétés CSS3, divisées en sections basées sur ce qui fonctionne partout et ce que vous devez surveiller. Cela ne vous prendra que quelques minutes et cela en vaut la peine.
L'importance de la compatibilité entre navigateurs: conseils et ressources
Si vous êtes vraiment nouveau dans CSS et avez besoin d'une introduction de base au sujet de la compatibilité des navigateurs et pourquoi c'est important, cet article Noupe vous a couvert. Plus que de simplement vous vendre sur l'idée de compatibilité, il répertorie un tas de bonnes ressources que vous pouvez utiliser pour assurer une compatibilité maximale. La liste des outils qui vous aideront à tester votre site dans différents navigateurs est particulièrement intéressante.
Je suis censé lire tout cela en 24 heures?
Je vous ai présenté cinq sujets absolument critiques à étudier et pas moins de quinze articles à partir desquels vous pouvez apprendre les principes que vous devez connaître. C'est bien beau, mais dans mon titre, j'ai promis que vous iriez mieux en une seule journée et que tout le monde n'a pas le temps de s'asseoir et de lire quinze longs articles!
La bonne nouvelle est que je vous ai donné trois articles sur chaque sujet afin que vous puissiez choisir. J'ai expliqué le contenu de chacun en détail afin que vous puissiez sélectionner celui qui correspond le mieux à vos besoins. N'oubliez pas de choisir les articles à lire non pas en fonction de ce que vous savez, mais de ce que vous ne savez pas. Faites-en un objectif pour combler les lacunes dans vos connaissances.
Ma suggestion est de parcourir le contenu ci-dessus et de choisir cinq articles à lire (un dans chaque section). Même c'est beaucoup à entreprendre en une journée, mais la plupart d'entre eux ne font pas plus de mille mots ou plus, beaucoup le sont moins. Je suis convaincu que vous pouvez le retirer. Si vous ne pouvez pas, pas de problème. Changez votre objectif d'améliorer vos compétences CSS en une semaine et lisez l'un de vos cinq articles choisis chaque jour pendant les cinq prochains jours. Je vous garantis que la semaine prochaine, vous serez bien meilleur pour écrire des CSS clairs, concis, compatibles et réutilisables.
Quels autres concepts recommandez-vous?
Maintenant que vous avez lu mes cinq principaux sujets que les gens devraient approfondir pour améliorer leurs compétences CSS, je veux avoir de vos nouvelles. Quels autres sujets pensez-vous que les codeurs CSS rencontrent généralement des difficultés et quelles ressources recommandez-vous à quiconque souhaite en savoir plus?
Photos stock gracieuseté de BigStock
