Share
CSS est un langage utilisé par près de chaque développeur à un moment donné. Bien que ce soit un langage que nous prenons parfois pour acquis, il est puissant et comporte de nombreuses nuances qui peuvent aider (ou nuire) à nos conceptions. Voici trente des meilleures pratiques CSS qui vous aideront à écrire des CSS solides et à éviter des erreurs coûteuses..
Si vous n’êtes pas sûr d’implémenter vous-même certaines de ces tâches, vous pouvez trouver des experts en CSS sur Envato Studio. pour vous aider. Ils peuvent corriger les erreurs ou personnaliser votre site pour vous. Ce sont des développeurs expérimentés qui suivent les meilleures pratiques lors de l'exécution du travail..
Experts CSS sur Envato Studio La lisibilité de vos CSS est extrêmement importante, même si la plupart des gens oublient Pourquoi c'est important. La grande lisibilité de votre CSS facilite grandement la maintenance dans le futur, car vous pourrez trouver des éléments plus rapidement. En outre, vous ne saurez jamais qui pourrait avoir besoin de regarder votre code plus tard.
.someDiv background: red; rembourrage: 2em; bordure: 1px noir uni;
.someDiv background: red; rembourrage: 2em; bordure: 1px noir uni;
Les deux pratiques sont parfaitement acceptables, bien que vous constatiez généralement que le groupe 2 méprise le groupe 1! Rappelez-vous simplement - choisissez la méthode qui vous convient le mieux. C'est tout ce qui compte.
Garder votre code lisible signifie également que le code CSS est cohérent. Vous devriez commencer à développer votre propre "sous-langage" de CSS qui vous permet de nommer rapidement des éléments. Il existe certaines classes que je crée dans presque tous les thèmes et j'utilise le même nom à chaque fois. Par exemple, j'utilise ".caption-right" pour faire flotter des images contenant une légende à droite.
Pensez à des choses telles que l'utilisation ou non de traits de soulignement ou de tirets dans vos noms d'identifiant et de classe, et dans quels cas vous les utiliserez. Lorsque vous commencez à créer vos propres normes pour CSS, vous devenez beaucoup plus compétent.
Certains puristes du design se moquent de l'idée d'utiliser un framework CSS avec chaque design, mais je pense que si quelqu'un a pris le temps de maintenir un outil qui accélère la production, pourquoi réinventer la roue? Je sais que les frameworks ne devraient pas être utilisés dans tous les cas, mais la plupart du temps, ils peuvent aider.
De nombreux concepteurs ont leur propre cadre qu'ils ont créé au fil du temps, et c'est une excellente idée aussi. Cela aide à maintenir la cohérence dans les projets.
Il s'agit moins de réinventer la roue que de comprendre son fonctionnement..
Si vous commencez tout juste à utiliser CSS, je vous conseillerais personnellement de ne pas utiliser ces frameworks pendant au moins un an. Sinon, vous ne vous tromperez plus. Apprendre le CSS… puis prendre des raccourcis!
La plupart des frameworks CSS ont une réinitialisation intégrée, mais si vous n'allez pas en utiliser une, alors au moins Pensez à utiliser une réinitialisation. Les réinitialisations éliminent essentiellement les incohérences du navigateur telles que les hauteurs, les tailles de police, les marges, les en-têtes, etc. La réinitialisation permet à votre mise en page de paraître cohérente dans tous les navigateurs..
MeyerWeb est une réinitialisation populaire associée à la réinitialisation des développeurs de Yahoo. Ou vous pouvez toujours lancer votre propre réinitialisation, si cela chatouille votre fantaisie.
Il est toujours judicieux de disposer votre feuille de style de manière à pouvoir trouver rapidement des parties de votre code. Je recommande un format descendant qui aborde les styles tels qu'ils apparaissent dans le code source. Ainsi, un exemple de feuille de style peut être commandé comme ceci:
/ ****** contenu principal ********* / styles va ici… / ****** footer ********* / styles va ici…
Les éléments d'une feuille de style partagent parfois des propriétés. Au lieu de ré-écrire le code précédent, pourquoi ne pas simplement les combiner? Par exemple, vos éléments h1, h2 et h3 peuvent tous partager la même police et la même couleur:
h1, h2, h3 font-family: tahoma, color: 333
Nous pourrions ajouter des caractéristiques uniques à chacun de ces styles d'en-tête si nous le voulions (c'est-à-dire h1 taille: 2.1em) plus tard dans la feuille de style..
De nombreux concepteurs créent leur CSS en même temps que le HTML. Il semble logique de créer les deux en même temps, mais en réalité, vous gagnerez encore plus de temps si vous créez le tout Maquette HTML en premier. Le raisonnement derrière cette méthode est que vous connaissez tous les éléments de la mise en page de votre site, mais vous ne savez pas de quel type de CSS vous aurez besoin avec votre conception. La création de la mise en page HTML vous permet d’abord de visualiser la page entière dans son ensemble et vous permet de penser à votre CSS de manière plus globale et descendante..
Il est parfois avantageux d’ajouter plusieurs classes à un élément. Disons que vous avez un
Vous pouvez ajouter autant de cours que vous le souhaitez (espace séparé) à une déclaration.
Si vous devez revenir à votre code HTML pour changer la présentation (ou le style) de la page, vous le faites mal!
La déclaration de doctype est très importante pour la validation de votre balisage et de votre CSS. En fait, l'apparence de votre site peut changer considérablement en fonction du DOCTYPE que vous déclarez..
En savoir plus sur le DOCTYPE à utiliser sur A List Apart.
J'utilise le type de document HTML5 pour tous mes projets.
"Ce qui est bien avec ce nouveau DOCTYPE, en particulier, c'est que tous les navigateurs actuels (IE, FF, Opera, Safari) l'examineront et basculeront le contenu en mode standard, même s'ils n'implémentent pas le HTML5. Cela signifie que vous pouvez commencez à écrire vos pages Web à l’aide de HTML5 aujourd’hui et laissez-les durer très longtemps. "
- John Resig
Vous pouvez réduire considérablement votre code en utilisant un raccourci lors de la création de votre CSS. Pour des éléments tels que le rembourrage, la marge, la police et certains autres, vous pouvez combiner les styles sur une seule ligne. Par exemple, une div peut avoir ces styles:
#crayon margin-left: 5px; marge droite: 7px; marge supérieure: 8px;
Vous pouvez combiner ces styles sur une seule ligne, comme suit:
#crayon margin: 8px 7px 0px 5px; // valeurs supérieure, droite, inférieure et gauche, respectivement.
Si vous avez besoin d’aide supplémentaire, voici un guide complet sur les propriétés abrégées CSS..
Comme dans n'importe quelle autre langue, c'est une excellente idée de commenter votre code par sections. Pour ajouter un commentaire, ajoutez simplement / * derrière le commentaire et * / pour le fermer, comme suit:
/ * Voici comment vous commentez CSS * /
Les éléments de bloc sont des éléments qui effacent naturellement chaque ligne après leur déclaration, couvrant toute la largeur de l'espace disponible. Les éléments en ligne ne prennent que l'espace nécessaire et ne forcent pas une nouvelle ligne après utilisation.
Voici la liste des éléments en ligne ou en bloc:
span, a, fort, em, img, br, entrée, abbr, acronyme
Et les éléments de bloc:
div, h1… h6, p, ul, li, table, blocquote, pre, formulaire
Bien que ce soit plus une astuce frivole, elle peut être utile pour une numérisation rapide.
# barbe à papa color: #fff; float: gauche; poids de la police: hauteur: 200px; marge: 0; rembourrage: 0; largeur: 150px;
Les compresseurs CSS permettent de réduire la taille des fichiers CSS en supprimant les sauts de ligne, les espaces et les éléments combinés. Cette combinaison peut réduire considérablement la taille du fichier, ce qui accélère le chargement du navigateur. CSS Optimizer et CSS Compressor sont deux excellents outils en ligne permettant de réduire le CSS..
Il convient de noter que la réduction de votre code CSS peut générer des gains de performances, mais que vous perdez une partie de la lisibilité de votre code CSS..
Vous constaterez qu'il y a certains styles que vous appliquez encore et encore. Au lieu d'ajouter ce style particulier à chaque ID, vous pouvez créer des classes génériques et les ajouter aux ID ou à d'autres classes CSS (à l'aide du conseil n ° 8).
Par exemple, je me trouve à utiliser float: right et float: un reliquat dans mes conceptions. J'ajoute donc simplement les classes .left et .right à ma feuille de style, et la référence dans les éléments.
.left float: left .right float: right…
De cette façon, vous n'avez pas besoin d'ajouter constamment "float: left" à tous les éléments à faire flotter..
Beaucoup de débutants en CSS ne peuvent pas comprendre pourquoi vous ne pouvez pas simplement utiliser float: centre pour obtenir cet effet centré sur les éléments de niveau bloc. Si seulement c'était aussi simple que ça! Malheureusement, vous aurez besoin d'utiliser
marge: 0 auto; // valeurs supérieure, inférieure - et gauche, droite, respectivement.
pour centrer des divs, des paragraphes ou d'autres éléments dans votre mise en page.
Quand on commence, il est tentant d'envelopper une div avec un ID ou une classe autour d'un élément et de créer un style pour celui-ci..
En-tête
Parfois, il peut sembler plus facile de créer des styles d'élément uniques comme dans l'exemple ci-dessus, mais vous allez commencer à encombrer votre feuille de style. Cela aurait très bien fonctionné:
En-tête
Ensuite, vous pouvez facilement ajouter un style au h1 au lieu d’un div parent.
Si vous n'avez pas encore téléchargé Firebug, arrêtez-vous et allez le faire. Sérieusement. Ce petit outil est un doit avoir pour tout développeur web. Parmi les nombreuses fonctionnalités fournies avec l'extension Firefox (débogage JavaScript, inspection HTML, recherche d'erreurs), vous pouvez également effectuer une inspection visuelle, modifier et éditer CSS en temps réel. Vous pouvez en apprendre plus sur ce que Firebug fait sur le site officiel de Firebug.
Évitez autant que possible d'utiliser des hacks spécifiques à votre navigateur. Il existe une pression énorme pour que les conceptions paraissent cohérentes sur tous les navigateurs, mais l'utilisation de hacks ne fait que rendre vos conceptions plus difficiles à gérer à l'avenir. De plus, l’utilisation d’un fichier de réinitialisation (voir n ° 4) peut éliminer presque toutes les irrégularités de rendu entre les navigateurs..
Le positionnement absolu est un aspect pratique de CSS qui vous permet de définir où exactement un élément doit être positionné sur une page au pixel exact. Cependant, en raison du non-respect absolu du positionnement par rapport aux autres éléments de la page, les mises en page peuvent devenir assez poilues s'il y a plusieurs éléments positionnés de manière absolue autour de la mise en page..
Text-transform est une propriété CSS très utile qui vous permet de "normaliser" la manière dont le texte est mis en forme sur votre site. Par exemple, supposons que vous souhaitiez créer des en-têtes ne contenant que des lettres minuscules. Ajoutez simplement la propriété text-transform au style de l'en-tête comme ceci:
text-transform: minuscule;
Désormais, toutes les lettres de l'en-tête seront en minuscule par défaut. Text-transform vous permet de modifier votre texte (première lettre en majuscule, toutes les lettres en majuscule ou tout en minuscule) avec une simple propriété.
Souvent, les gens vont utiliser une image pour le texte de leur en-tête, puis utiliser display: none ou une marge négative pour faire disparaître le h1 de la page. Matt Cutts, responsable de l'équipe Webspam de Google, a officiellement déclaré que c'était une mauvaise idée, car Google pourrait penser que c'est du spam..
Comme M. Cutts le dit explicitement, évitez de cacher le texte de votre logo avec CSS. Il suffit d'utiliser la balise alt. Alors que beaucoup affirment que vous pouvez toujours utiliser CSS pour masquer une balise h1 tant que h1 est identique au texte du logo, je préfère me tromper de sécurité..
Valider vos CSS et XHTML fait plus que donner un sentiment de fierté: cela vous aide à détecter rapidement les erreurs dans votre code. Si vous travaillez sur un design et que, pour une raison quelconque, les choses ne se passent pas bien, lancez le validateur de balisage et CSS et observez les erreurs éventuelles. Vous constaterez généralement que vous avez oublié de fermer une div quelque part ou un point-virgule oublié dans une propriété CSS..
Il y a toujours eu un débat animé sur le point de savoir s'il était préférable d'utiliser des pixels (px) ou ems (em) lors de la définition de la taille des polices. Les pixels sont un moyen plus statique de définir la taille des polices et les EMS sont plus évolutifs avec différentes tailles de navigateurs et appareils mobiles. Avec l'avènement de nombreux types de navigation Web (ordinateur portable, mobile, etc.), les ems deviennent de plus en plus la solution par défaut pour la mesure de la taille de la police, car ils permettent une flexibilité maximale. Vous pouvez en savoir plus sur les raisons pour lesquelles vous devriez utiliser ems pour les tailles de police dans ce fil de discussion bien pensé. About.com a également un excellent article sur les différences entre les tailles de mesure.
Les listes sont un excellent moyen de présenter les données dans un format structuré permettant de modifier facilement le style. Grâce à la propriété display, vous ne devez pas simplement utiliser la liste en tant qu'attribut de texte. Les listes sont également utiles pour créer des menus de navigation et des choses du genre.
Beaucoup de débutants utilisent des div pour créer chaque élément de la liste car ils ne comprennent pas comment les utiliser correctement. Il vaut la peine de mettre à jour les éléments de la liste d’apprentissage pour structurer les données à l’avenir..
Vous verrez souvent des liens de navigation comme suit:
Accueil À propos Services Contact
Bien que, techniquement, cela fonctionne très bien après un peu de CSS, c'est bâclé. Si vous ajoutez un liste des liens, utilisez un liste non ordonnée, idiote oie!
Il est facile d'ajouter à notre insu des sélecteurs supplémentaires à notre CSS qui encombrent la feuille de style. Un exemple courant d’ajout de sélecteurs supplémentaires est celui des listes..
body #container .someclass ul li …
Dans ce cas, juste le .une classe li aurait bien fonctionné.
.une classe li …
L'ajout de sélecteurs supplémentaires n'apportera pas Armageddon ni quoi que ce soit d'autre, mais cela empêchera votre code CSS d'être aussi simple et propre que possible..
Différents navigateurs rendent les éléments différemment. IE rend certains éléments différemment de Firefox. IE 6 rend les éléments différemment de IE 7 et IE 8. Bien que les navigateurs commencent à adhérer plus étroitement aux normes W3C, ils ne sont toujours pas parfaits (* toux IE toux *).
L’une des principales différences entre les versions des navigateurs est la manière dont le remplissage et les marges sont rendus. Si vous n'utilisez pas déjà une réinitialisation, vous souhaiterez peut-être définir la marge et le remplissage de tous les éléments de la page, afin d'être sûr. Vous pouvez le faire rapidement avec une réinitialisation globale, comme suit:
* marge: 0; remplissage: 0;
À présent tout les éléments ont un remplissage et une marge de 0, sauf définition par un autre style dans la feuille de style.
La programmation orientée objet consiste à séparer les éléments du code pour faciliter leur réutilisation. Le CSS orienté objet suit le même principe de séparation des différents aspects de la ou des feuilles de style en sections plus logiques, ce qui rend votre CSS plus modulaire et réutilisable..
Voici une présentation de la façon dont fonctionne CSS orienté objet:
De Nicole Sullivan.Si vous êtes nouveau dans le jeu CSS / XHTML, OOCSS peut être un peu un défi au début. Mais les principes sont intéressants à comprendre pour la programmation orientée objet en général.
En fonction de la complexité de la conception et de la taille du site, il est parfois plus facile de créer plusieurs feuilles de style plus petites et plus nombreuses au lieu d'une feuille de style géante. En plus de faciliter la gestion du concepteur, plusieurs feuilles de style vous permettent d’omettre le code CSS sur certaines pages qui n’en ont pas besoin..
Par exemple, je pourrais avoir un programme de sondage qui aurait un ensemble unique de styles. Au lieu d’inclure les styles de sondage dans la feuille de style principale, je pourrais simplement créer un poll.css et la feuille de style uniquement pour les pages qui montrent le sondage.
Si vous remarquez que votre design a l'air un peu waché, il y a de fortes chances que ce soit parce que vous avez oublié une clôture
Accentsconagua