Développement de CSS efficace et rationalisé
CSS peut être comparé à un ensemble d'outils de sculpteur; À l'instar des sculpteurs au travail, nous, concepteurs, utilisons le CSS pour créer des mises en page structurées de sites Web.
Au fil des ans, ce processus est devenu plus organisé. des règles ont été mises en place pour créer les meilleures pratiques de codage.
Dans cet article, nous examinerons quelques idées que vous pouvez utiliser lors de l’écriture de feuilles de style pour accélérer votre code.
Le CSS efficace est facile à gérer et à lire et peut constituer une ressource pour les concepteurs Web. S'organiser est un grand pas, mais l'utilisation de CSS peut être un peu plus compliquée que cela.
En lisant cet article, gardez à l’esprit vos propres préférences; Le meilleur conseil que vous pouvez obtenir de tout développeur est de trouver votre propre façon de travailler. Combinez quelques-unes des techniques ici avec vos propres méthodes pour en tirer le meilleur parti.
Pourquoi se soucier de rationaliser les CSS?
De nombreux concepteurs confondent les langages frontaux et principaux lorsqu’on parle de code d’analyse. CSS et HTML sont des langages de conception frontaux utilisés pour formater et styliser des éléments sur un site Web. Les fichiers sont téléchargés et analysés par le navigateur du visiteur, ce qui signifie que le code frontal a un temps de chargement important.
Le code téléchargé et analysé par le navigateur prend du temps pour être lu et calculé, tout comme le code écrit dans les langages principaux (tels que PHP ou Ruby). Un CSS simplifié peut grandement profiter à un site Web, car il peut réduire les temps de chargement et accélérer la structuration des éléments de la page.
Les avantages peuvent ne pas être évidents avec les connexions haut débit d'aujourd'hui et les systèmes d'exploitation avancés. Vous pouvez consulter votre site Web sur un navigateur mobile pour comparer les temps de chargement et voir comment le site Web se charge.
Lorsque CSS est codé efficacement, vous devriez voir la forme et le style des éléments du site Web au fur et à mesure de leur traitement. Cela peut sembler différent d'un navigateur à l'autre, mais cela arrive toujours. Plus vous testez le code de votre site Web, plus vous le verrez.
Gardez votre code standardisé et simple. Si vous mettez à jour votre blog ou votre site Web personnel quelques mois après le développement initial, il est plus facile de passer à travers les styles CSS que vous connaissez que d'en traiter avec de nouveaux. S'adapter à normes établies aide à long terme.
Comment travailler avec un code efficace
Pour commencer à coder les styles avec la plus grande efficacité, vous devrez adopter de nouvelles idées. Ce sont des techniques CSS de base utilisées aujourd'hui par les meilleurs sites Internet et développeurs d'applications.
Gardez votre code simple
Cela peut être facilement négligé. Lorsque vous créez un ensemble de données pour vos styles, restez simple. Créez des jeux de données dans une colonne si nécessaire.
Commencez par créer une liste de différentes sections sur lesquelles travailler dans vos styles. Vous pouvez inclure du texte, des formulaires, des zones de mise en page, des en-têtes, des pieds de page et tout ce dont vous pourriez avoir besoin. Pour être vraiment organisé, vous pouvez le décomposer en quelques styles connus, tels que id ou class pour les liens de navigation.
Cette première étape permet de créer un plan d’action pour votre site Web en utilisant des mots simples, avant d’entrer dans un langage de style. Après, s'asseoir pour écrire du code sera beaucoup plus simple; Avoir la liste de ressources devant vous aidera à déverser le code à un rythme presque surhumain.
Garder les blocs de code délimités et clairsemés
Il y a un débat en cours sur la façon dont le code CSS devrait être écrit. Lorsque j'ai commencé, j'ai utilisé la notation par blocs car c'était tout ce que j'avais jamais vu. Mais la notation sur une seule ligne est beaucoup plus rapide pour analyser le texte et le rendre lisible.
Je ne plaide pas pour ignorer les CSS de style bloc, loin de là. Lorsque vous traitez avec un élément important ou id qui détient six ou sept propriétés principales, le garder sous forme bloquée sera plus facile. Vous isolerez les parties importantes de votre style, ce qui les rendra plus faciles à trouver en un coup d’œil.
La lecture de styles longs en notation par blocs est également plus facile car la plupart des éditeurs de texte encapsulent les longues lignes, et la lecture des paires de valeurs de propriétés peut être source de confusion lorsque vous en avez 10 ou plus. En tant que concepteur Web, vous devez faire appel à la manière d’espacer le code CSS. Gardez l’efficacité à l’esprit et faites preuve de discernement.
Travailler avec d'autres développeurs
Si vous êtes un concepteur de sites Web professionnel ou si vous souhaitez en devenir un, il est probable que vous travailliez avec une équipe tôt ou tard. Cela peut être une bénédiction ou une malédiction, selon l'équipe.
Les concepteurs hésitent souvent à apporter des modifications majeures à leur travail. Le code CSS est un peu différent car vous essayez de créer une belle mise en page en utilisant uniquement des valeurs de propriété, et les fichiers peuvent devenir désordonnés lorsqu'ils sont transmis entre quelques mains. Alors restez organisé.
Les commentaires sont une aide majeure. Si des lignes ou des blocs de code peuvent induire en erreur ou induire les autres en erreur, les commentaires permettront de gagner des heures. Expliquez tout ce que vous avez mis dans la feuille de style aussi élégamment que possible.
Assurez-vous qu'aucun style dupliqué ou ajouté n'est remplacé. Imaginez que le h1 à h4 les en-têtes sont stylés dans un document CSS, mais un code plus bas modifie leurs polices. Cela peut être extrêmement déroutant pour quelqu'un qui n'a pas écrit le code et qui doit maintenant corriger le bogue.
La communication est également essentielle. Vous pourriez écrire le code le plus efficace possible, mais un manque de communication videra votre équipe. Concentrez-vous sur la tâche à accomplir et travaillez avec les idées créatives produites collectivement par l'équipe (pas seulement la vôtre).
Gardez une trace des documents CSS séparés
Une autre façon de garder le code propre et organisé consiste à séparer les types de style. Cela fonctionne bien pour les grands sites Web sur lesquels la tenue de tous les styles dans un seul document serait irréaliste.
Facebook est un bon exemple. Il a probablement beaucoup de styles différents pour toutes ses différentes pages: profil, recherche, enregistrement, photos, etc. Si les styles étaient tous regroupés dans un seul fichier, je ne voudrais pas être le type qui doit trier le code juste pour corrige un bug simple.
Facebook reçoit beaucoup plus de trafic que votre site Web, mais les principes sont les mêmes. Si l'organisation est un problème, des feuilles de style distinctes peuvent aller très loin. Les concepteurs Web organisent souvent du code en fonction de l'aspect du document qu'il structure (par exemple, layout.css , text.css , forms.css ).
Tous les styles ne doivent pas être chargés sur chaque page. Et c'est là que réside l'avantage: la méthode permet une plus grande personnalisation lors de la création de votre site Web. Vous allez réduire considérablement le temps d'analyse simplement en créant des vues et des styles distincts.
Test du support pour IE
Les développeurs Web ont toujours peint Internet Explorer en tant que méchant, en particulier avec CSS. Heureusement, vous pouvez appliquer des commentaires conditionnels (qui ressemblent à des commentaires réguliers à la plupart des navigateurs) au code HTML.
Vous pouvez les utiliser pour appliquer des styles dans Internet Explorer. Consultez les commentaires conditionnels si vous ne les connaissez pas bien. ils peuvent s'avérer inestimables lorsque les propriétés CSS ne fonctionnent pas correctement et que vous avez besoin d'une alternative.
Avec la sortie de Internet Explorer 9 Bêta , nous nous rapprochons un peu d’une expérience Internet unifiée. Le seul problème est le nombre de personnes qui utilisent encore des navigateurs aussi anciens qu'IE6 et IE7, qui ont de sérieux problèmes de traitement (dus à des moteurs de rendu défectueux) et qui nécessitent parfois des styles externes. Heureusement, le support s'est amélioré et Microsoft semble renverser la situation.
Ajouter une table des matières
Cette étape est facultative, mais je trouve que cela fonctionne à merveille pour mes feuilles de style. Vous pouvez stocker la table en dehors du document CSS lui-même, mais j'ai trouvé cela quelque peu contre-productif, en particulier parce que l'ajout de commentaires en ligne est si facile.
Les principales raisons de placer une table des matières dans vos styles sont qu’elle facilite l’accès et simplifie le processus de modification. Placez des marqueurs au début de votre document pour séparer le code en divisions logiques.
Créer vos propres clés est une bonne approche. Par exemple, si vous prévoyez de diviser votre table en fonction des zones principales du document (mise en page, police, en-tête, navigation, etc.), vous pouvez saisir les sections avec des caractères uniques.
Vous pourriez utiliser =!layout et =!font pour délimiter la mise en page et les sections de police, respectivement. Vous ne rencontrerez probablement pas ces séquences exactes de caractères n'importe où dans le code, vous devriez donc les ajouter à votre table et au début de chaque section de commentaires. Ensuite, utilisez la fonction de recherche dans votre éditeur de texte pour passer directement à la section souhaitée.
C'est également une bonne stratégie pour les projets dans lesquels de nombreuses personnes examineront le code. Il garde tout organisé et accessible.
Il existe de nombreuses façons d’optimiser le code et de le rendre plus efficace, et ces conseils sont un bon début. Le CSS évolue et de nombreuses nouvelles idées sont en train de se constituer.
Vous avez besoin de passion et de dévouement pour réussir dans l'industrie du design. Si vous pouvez conserver votre passion pour le design numérique, il ne devrait pas être difficile de suivre les meilleures pratiques CSS. Tendre la main aux autres membres de cette vaste communauté mondiale de concepteurs de sites Web peut être d’une grande aide. Les experts de l'industrie sont généralement heureux de partager leurs techniques et innovations.
Cet article a été écrit exclusivement pour Webdesigner Depot par Jake Rocheleau , web designer passionné et passionné de médias sociaux. Jake aime lire et écrire sur les dernières tendances numériques et Internet et sur la mise en réseau avec la communauté du design. Pour en savoir plus sur son travail, retrouvez-le sur Twitter @ jakerocheleau .
Quelles sont vos méthodes pour rationaliser les CSS? Des suggestions pour les développeurs CSS débutants? Quelles nouvelles fonctionnalités ou quel support supplémentaire souhaiteriez-vous voir dans les futures versions de CSS?