Vous codez depuis un moment et vous connaissez un fichier CSS. Vous n'êtes certainement pas un maître, mais avec suffisamment de violon, vous pouvez aller où vous voulez. Vous vous demandez cependant si vous réussirez jamais à dépasser le stade où CSS est un tel combat. Arriverez-vous un jour à décomposer une mise en page complexe sans recourir à des essais et des erreurs pour voir ce qui fonctionne et ce qui ne fonctionne pas?
La bonne nouvelle est que vous pouvez effectivement surmonter ce point frustrant où vous connaissez suffisamment de CSS pour coder un site Web, mais sans la base solide qui vous permet de coder sans la gêne de ne pas comprendre exactement comment vous allez atteindre votre objectif. re va, et ce point est beaucoup plus proche que vous le pensez. Je propose que cinq sujets vont considérablement améliorer votre compréhension de CSS. Prenez le temps de lire chacune d’elles au cours des vingt-quatre heures à venir et vous modifierez à jamais votre façon de coder.
1. Enveloppez votre esprit autour des contextes de positionnement
Si vous voulez vraiment comprendre comment utiliser CSS pour déplacer les éléments HTML là où vous le souhaitez, vous devez absolument maîtriser le positionnement des contextes. Et je ne parle pas seulement d'une compréhension occasionnelle, je parle d'une connaissance profonde de leurs différences, comportements, bizarreries, etc.
En fait, vous devez comprendre cinq valeurs de position. Si vous ne pouvez pas nommer les cinq personnes sans les consulter, vous êtes certainement le candidat idéal pour cette éducation. Les voici: statique, fixe, relative, absolue et hériter.
Vous devez connaître et comprendre les cinq facteurs, mais les deux grands facteurs qui modifieront réellement votre façon de coder sont le positionnement absolu et relatif. Apprendre à manier ces deux contextes de positionnement séparément, puis à sauter à la façon dont ils fonctionnent ensemble, va fondamentalement changer la façon dont vous affichez la mise en page CSS, je vous le promets. C'est une révélation qui facilitera votre travail à l'infini.
Ressources pour vous y rendre
Le lowdown entre positionnement absolu et relatif
Ceci est ma plongée profonde dans le sujet du contexte de positionnement. Je mentionne brièvement et explique les cinq, mais je me concentre vraiment sur les deux grands: en quoi ils diffèrent, en quoi et comment ils fonctionnent ensemble. Lisez cette pièce et vous serez sur la bonne voie pour le positionnement CSS gratuit.
Positionnement CSS 101
Cette pièce vient du vénérable Une liste à part Alors, tout de suite, vous savez que votre blog sera à la fois complet 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 familiariser avec chaque concept.
Apprendre le positionnement CSS en dix étapes
Ceci est un aperçu fantastiquement bref des différents contextes de positionnement. Au lieu d'un article long, cette page présente une petite boîte avec dix onglets. Chaque onglet contient un petit extrait de code et une phrase ou deux expliquant le code. À droite, vous trouverez un exemple de mise en page dynamique mis à jour avec chaque onglet. Ce format est fantastique pour lier visuellement des extraits de code aux mises en page qu'ils produisent. Je vous recommande vivement de le regarder si vous avez des difficultés avec des explications textuelles comme celle ci-dessus de ALA.
2. Maître Flotteurs
Lorsque vous commencez à apprendre le CSS, les flottants semblent être l’un des systèmes de mise en page les plus vicieux du monde. Une fois que vous avez appris à les utiliser à un niveau élémentaire, vous devez apprendre à comprendre comment les parents ne contenant que des enfants flottants ont une hauteur réduite, ce qui conduit ensuite à quarante-sept façons différentes de résoudre le problème par des corrections claires et des manipulations de débordement.
Heureusement, à long terme, vous vous habituez aux concepts sous-jacents et ils peuvent même devenir si faciles à utiliser que vous n'y réfléchissez pas du tout. La seule chose qui vous sépare de cet objectif est un article solide, ou deux, qui détaille réellement et explique en détail le comportement et les techniques du flottement à partir de la base.
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 relatifs aux flottants en CSS. Cela commence par une discussion de base sur ce que sont les flotteurs et leur fonctionnement. Après cela, je parle de la manière dont les flotteurs affectent les boîtes des éléments impliqués, comment les flotteurs deviennent étranges avec des éléments de hauteurs différentes, des neuf règles qui couvrent le comportement des flotteurs et bien sûr de la débâcle de la hauteur qui s’effondre et de la façon de le réparer.
Tout sur les flotteurs
Chris Coyier a toujours été mon auteur préféré en matière de CSS et son introduction aux floats ne déçoit pas. Si vous recherchez une discussion brève mais directe sur la façon de travailler avec des flotteurs, cette partie vous a couvert. 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 pertinents, le contenu de Smashing Magazine est généralement assez complet, avec des tonnes d'exemples et de discussions pertinentes. Cet article présente le concept de flotteurs, vous explique comment les utiliser et les effacer, puis vous lance dans une discussion sur les cas où les flottants sont généralement 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 de la bonne écriture de CSS sains consiste à bien comprendre les sélecteurs CSS disponibles, leur fonctionnement et leur degré de prise en charge sur différents navigateurs. Cela semble être un sujet assez simple, mais en réalité, le monde des sélecteurs CSS est assez complexe.
Il existe une foule de choses intéressantes à apprendre ici, allant de l'utilisation de sélecteurs de valeur d'attribut aux mots-clés de ciblage dans les noms de classes, en passant par l'utilisation du sélecteur universel pour le débogage de votre code. Même si vous pensez que vous pouvez vous débrouiller personnellement sans comprendre un groupe de sélecteurs sophistiqués, la vérité est que les autres codeurs l'utilisent 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: juste les trucs délicats
Cet article amusant examine principalement les aspects plus complexes des sélecteurs CSS. Je passe les commandes au niveau du sol et je discute directement de la façon dont le concept de DOM correspond au ciblage de divers aspects de votre document avec CSS. Vous apprendrez tout sur la sélection des enfants et des frères et soeurs, comment enchaîner les sélecteurs et bien plus encore.
Les 30 sélecteurs CSS que vous devez mémoriser
Jeffrey Way est une star du développement web et des articles comme celui-ci prouvent pourquoi. Cet article de Nettuts + couvre une vaste gamme de sélecteurs CSS dans un format simple et succinct mettant l’accent sur la prise en charge des navigateurs. Étonnamment, Jeff a même codé des exemples de pages pour chacun des trente sélecteurs.
Sélecteurs d'attributs CSS: comment et pourquoi les utiliser
Les sélecteurs de valeur d'attribut sont l'un des sous-ensembles les plus puissants de sélecteurs CSS, et CSS3 renforce réellement ce pouvoir. Vous ne croirez pas à quel point vos sélecteurs peuvent devenir polyvalents avec une petite magie de valeur d'attribut. Après avoir lu cet article, vous vous retrouverez avec des phrases telles que "sélecteur de valeur d'attribut de sous-chaîne arbitraire". comme un pro.
4. Apprendre les concepts de codage à sec
Ne te répète pas. Cette phrase simple a des implications drastiques en matière de 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 donne autant de pouvoir qu’il est génial.
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 une des choses qui m’a récemment focalisé 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 inversée. Évidemment, les pré-processeurs eux-mêmes aident à éviter la répétition manuelle, mais cela va au-delà. L’examen des résultats d’outils comme LESS et SASS et des objectifs pour les langues en général m’a amené à écrire de meilleurs CSS purs! Une fois que vous maîtrisez des concepts tels que @extend dans Sass, vous ne pouvez pas vous empêcher de penser aux implications lorsque vous codez avec du CSS uniquement.
Ressources pour vous y rendre
DRY CSS: ne répétez pas votre CSS
Dans cet article, Steven Bradley vous présente le sujet de DRY CSS et couvre certains de ses principes et objectifs principaux. Il résume la pratique à trois idées simples et vous montre comment implémenter ces idées dans un flux de travail réel. Les concepts sont largement empruntés à une présentation de Jeremy Clarke couvrant le même sujet.
Une introduction à CSS orienté objet (OOCSS)
Comme je l'ai déjà mentionné, les idées inhérentes au mouvement DRY CSS sont assez vastes et directement liées aux concepts d'autres concepts. OOCS est une méthodologie de plus en plus populaire qui vise à vous aider à créer des feuilles de style plus rapides, plus efficaces, avec une organisation supérieure et moins de répétition. OOCS repose sur deux principes principaux: la séparation de la structure de la peau et la séparation des contenants et du contenu. Cet article de Smashing Magazine vous expliquera les idées de base et vous aidera à les appliquer à votre propre travail.
Introduction aux directives de SMACSS pour la rédaction de CSS
Vous vous souvenez de Steven Bradley du premier article sur DRY CSS? 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 consiste à 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 vous permettant de voir SMACSS en action.
5. Connaître 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 attirant pour la plupart d’entre nous, mais la dure vérité est qu’il 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 se mettre en tête n’est pas qu’ils doivent mémoriser chaque fonctionnalité CSS et la façon dont chaque navigateur connu l’utilise, mais bien qu’il existe des ressources absolument incroyables qui vous fournissent ces informations. librement, il vous suffit de savoir où regarder.
Ressources pour vous y rendre
Prise en charge des navigateurs dans CSS3 et HTML5: des ressources inestimables à utiliser aujourd'hui
Dans cet article, je vous présente les sites relativement peu nombreux que j'ai marqués pour vérifier la prise en charge du navigateur. Ces ressources sont fantastiques, visuelles et vous fournissent les informations dont vous avez besoin en un tournemain afin que vous puissiez revenir au codage. Jetez un coup d'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 l'état? Actuel? pièce est discutable, mais pas assez a changé dans ce temps pour rendre les informations contenues dans cet article obsolète. Il constitue un aperçu extrêmement utile de diverses propriétés CSS3, divisé en sections en fonction de ce qui fonctionne partout et de ce que vous devez surveiller. Cela ne vous prendra que quelques minutes et la lecture en vaut vraiment la peine.
L'importance de la compatibilité entre les navigateurs: conseils et ressources
Si vous êtes vraiment novice en CSS et que vous avez besoin d’une introduction de base au sujet de la compatibilité du navigateur et de son importance, cet article de la Noupe vous explique tout. Plus que de simplement vous vendre sur l’idée de compatibilité, il répertorie un ensemble d’excellentes 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 très bien, mais dans mon titre, je vous avais promis que vous iriez mieux en un jour 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 parmi une variété. J'ai expliqué le contenu de chacun en détail afin que vous puissiez choisir celui qui correspond le mieux à vos besoins. N'oubliez pas de choisir les articles à lire non pas sur ce que vous savez, mais sur ce que vous ne savez pas. Faites-en un objectif pour combler les lacunes de vos connaissances.
Ma suggestion est de parcourir le contenu ci-dessus et de choisir cinq articles à lire (un de chaque section). Même si c'est beaucoup à faire en une journée, mais la plupart ne dépassent pas un millier de mots, beaucoup moins. Je suis convaincu que vous pouvez y arriver. 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 des cinq articles que vous avez choisis chaque jour pendant les cinq prochains jours. Je vous garantis que dès la semaine prochaine, vous serez beaucoup mieux à l’écriture de 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 en CSS, je souhaite vous entendre. Selon vous, quels sont les autres problèmes auxquels les codeurs CSS sont généralement confrontés et quelles ressources recommandez-vous à ceux qui souhaitent en savoir plus?
Photos fournies avec l'aimable autorisation de BigStock