Share
Je déteste regarder le code ou les balises que j'ai écrit dans le passé, que je ne comprends pas tout de suite. Je ne suis sûrement pas différent de vous dans la mesure où je veux pouvoir revenir des années plus tard, récupérer le code et comprendre exactement ce qui se passe. Je ne veux pas disséquer les concepts les plus simples, où se trouvent les crochets ou même comment la majoration est en retrait. J'ai créé des habitudes pour m'aider avec le développement rapide, qui ont gardé ma santé mentale quelque peu intact. Je serai honnête cependant, je n’avais jamais vraiment réfléchi à la façon dont j’écrivais et hiérarchisais mes CSS, et c’est ce que je partage avec vous.
Il y a beaucoup de façons de faire ce que je suggère avec CSS. Permettez-moi d'être le premier à dire: n'utilisez rien de ce que j'écris aujourd'hui si votre niveau de confort n'est pas élevé avec mes concepts. Pensez plutôt aux concepts et améliorez les solutions sur lesquelles je vous écris. Partagez vos propres idées. Je ne discuterai pas avec vous si vous pensez qu'il existe un meilleur moyen d'organiser les feuilles de style, car à la fin, il n'y a pas de bonne ou de mauvaise façon. Cependant, je pense que plus vous ajoutez de structure, plus vous êtes performant lorsque vous travaillez avec CSS..
"Dans quelle mesure est-il facile pour nous, développeurs, de trouver, comprendre, réparer ou compléter rapidement une base de code donnée? Plus cette tâche est facile, meilleure est la facilité d'utilisation interne."
Il y a quelques concepts que je veux aborder maintenant en général pour que le jus de cerveau fonctionne. Premièrement, la convivialité est au cœur du développement Web. Nous voulons que les utilisateurs de nos sites Web trouvent les choses plus rapidement, naviguent plus naturellement et comprennent intrinsèquement les concepts de nos applications. C'est une utilisation très utile du temps et de l'énergie. Ce qui est parfois oublié, c’est la facilité d’utilisation interne dans tous les processus de planification et de discussion de nos projets. Est-il facile pour nous, développeurs, de trouver, comprendre, réparer ou compléter rapidement une base de code donnée? Plus cette tâche est facile, meilleure est la convivialité interne. À mon avis, ce concept est aussi digne de notre temps et de pensée que la facilité d'utilisation frontale.
Deuxièmement, rappelez-vous qu’il existe un C en CSS. C'est la partie en cascade. La méthode que j'utilise peut aller à l'encontre de certaines pensées conventionnelles, mais si vous vous tenez à l'écart pour n'utiliser que certains aspects de CSS, vous perdez le pouvoir. Lorsque je planifie un projet volumineux, je considère les sélecteurs d'identifiant comme "expliquant l'entité", les sélecteurs de classe comme "décrivant l'entité" et les attributs de style comme "remplaçant ce que je viens de dire". Je cascade les propriétés pour diminuer le code et donne un peu de méthode à la folie. Encore une fois, il n'y a pas de bonne ou de mauvaise façon de faire, mais quand vous n'avez pas de plan, vous vous préparez à faire beaucoup de travail supplémentaire, sans parler des frais généraux supplémentaires..
Enfin, n'oubliez pas qu'il y a toujours des compromis en matière de développement. Les façons de faire les plus élégantes ne sont pas toujours les plus efficaces.
Parfois, les méthodes les plus efficaces vous coûtent cher lorsque vous devez récupérer le code pour le support..
Personne ne peut faire ces choix pour vous, mais vous devez tenir compte des compromis pendant que vous écrivez. Parfois, il faut parfois mordre la balle, peut-être ajouter une requête HTTP supplémentaire pour rendre le résultat final utilisable en interne. D'autres fois, vous devez ajouter un bon commentaire pour vous rappeler le choix que vous avez fait et passer à autre chose..
Il est fort probable que vous utilisiez un framework pour gérer votre CSS ou que vous ajoutiez vos styles de la manière à laquelle vous êtes habitué, mais sans trop de structure. Les deux ont leurs avantages et leurs inconvénients. Regardons d'abord quelques frameworks CSS, de la bouche du cheval:
Il en existe de nombreux autres et, tout comme les cadres pour la langue de choix de votre serveur, chacun a ses avantages les uns sur les autres et ses inconvénients. Je ne suis pas ici pour vous éloigner d'un cadre, tel que je l'ai utilisé dans le passé et je crois aux concepts. Je pense que lorsque vous travaillez dans une grande équipe, il n’ya pas de meilleur choix, car cela uniformise vos styles et voix de chaque développeur et designer. Cela dit, j’estime que l’utilisation d’un framework CSS présente certains inconvénients, car elle alourdit les frais généraux, en particulier pour les styles que vous n’utilisez pas, et la courbe d’apprentissage est plutôt rapide. Cela peut être un peu frustrant, en particulier avec des projets qui ont des calendriers stricts. Cela dit, la courbe d’apprentissage n’est qu’une courbe et, avec le temps, vous maîtriserez le projet que vous jugerez le meilleur. L'avantage d'utiliser un framework est que vous avez maintenant amélioré votre facilité d'utilisation interne, puisque vous utilisez un paradigme de méthode set, bien que cette méthode soit quelque chose qui échappe le plus à votre contrôle..
L’autre solution est ce que j’appelle le "Far West" où tout est permis. Je vais être honnête et dire que bien souvent, je viens de pousser quelque chose à la porte sans trop réfléchir à l'avenir, ou dans le cas d'un très petit projet où le CSS n'est pas très substantiel. La courbe d'apprentissage ici n'est pas si mauvaise, car vous écrivez votre CSS au fur et à mesure. Vous avez un contrôle total sur le destin de votre style. Assez cool jusqu'à présent! Le problème est la facilité d'utilisation interne. Revenez à ce projet après qu'il ne soit plus frais dans votre esprit et qu'il y aura des problèmes. "Pourquoi diable ai-je écrit cela comme ceci" ou "Je ne sais pas ce que je voulais dire par ce commentaire" ou "Pourquoi cette entrée ne change-t-elle pas les styles" feuille de style n'est plus fraîche dans votre esprit.
Si je pouvais placer la solution cadre sur une échelle mobile avec la solution ouest sauvage à l’autre bout, je pense que je préférerais une solution au milieu. Tandis qu'un lit est trop dur et que l'autre lit est trop mou, je veux trouver le lit qui convient parfaitement. C'est ce que j'appelle la solution hybride. Il partage des traits à la fois avec l'ouest sauvage et les cadres. D'une part, j'ai le contrôle de mes styles et, avec cela, la courbe d'apprentissage est plutôt basse. D'autre part, je veux donner une petite structure à ce que j'écris afin que, lorsque j'y reviendrai plus tard, je connaisse au moins la structure, car je me base sur les méthodes que chaque projet.
C'est un peu un projet de bricolage comme dans l'amélioration de l'habitat. Vous négociez la structure et le coût d'un professionnel pour la commodité et la familiarité de l'utilisation de vos propres mains pour effectuer le travail. Ce que vous espérez à la fin est le même projet final, mais sans la courbe d’apprentissage ni idées ou concepts étrangers à la version industrielle..
En repensant aux choix que nous devons faire en tant que développeurs, je choisis d'augmenter le nombre de requêtes HTTP pour une organisation un peu meilleure. Je sais que je me coûte un peu de performance, mais ce que j’obtiens, c’est le CSS, qui est plus facile à comprendre lorsqu’il me faut le regarder ensuite. Vous pouvez faire un choix différent ici, et vous ne recevrez pas beaucoup d'arguments de ma part. Je préfère simplement les fichiers de plus petite taille organisés de manière cohérente par rapport au seul gros fichier CSS ou en-tête de mon code HTML..
reset.css : Un css de réinitialisation définit ceux qui annulent la totalité ou au moins la majorité des styles de navigateur. J'utilise un css de réinitialisation pour pouvoir résoudre certaines différences avec les navigateurs. Je vois tout l'intérêt de gérer les problèmes de navigation croisée. Ce n'est pas Nirvana, et certains préfèrent ne pas réinitialiser, ou ce que j'ai lu récemment, une réinitialisation logicielle. Je préfère tout réinitialiser et j'utilise le style de réinitialisation Eric Meyer.
formulaires.css: Je sépare mes styles de formulaire du reste de mes CSS. Je veux savoir quand je travaille sur des formulaires, et ils ne s'affichent pas tout à fait car je souhaite exactement où aller.
global.css: Mon fichier css global est quelque chose que j'utilise pour chaque projet plus important que j'écris. Ce petit fichier contient des petites classes que je pourrais utiliser encore et encore dans des projets. Ma règle empirique est la suivante: s'il existe un raccourci pour la propriété, elle n'appartient probablement pas au fichier global. Je n'utiliserais pas la propriété fonte. Par exemple:
/ * Couleurs * / .red color: red; fond: hériter; .blue couleur: bleu; fond: hériter; .highlight color: black; fond: jaune; / * Listes * / .horizontal list-style-type: none; affichage: en ligne; .vertical list-style-type: none; bloc de visualisation; / * Texte * / .small font-size: small; .large font-size: large; .bold font-weight: bold;
Notez qu'il s'agit de classes très spécifiques, qui s'ajoutent aux règles de style en cascade. Bien qu'aucun ne soit généralement utilisé comme seul style pour un élément, ils s'ajoutent à la description de l'élément qu'ils classent est appliqué.
style.css: Mon style.css est mon contrôleur principal de mon style. Si vous pensez en termes de OO pour CSS, mon style.css est ma classe, tandis que les autres fichiers étendent ma classe (un peu quand même) et ajoutent à l'héritage de mes objets principaux. J'utilise mon style.css pour importer mes autres fichiers et pour définir mes sélecteurs et classes locaux.
Ma méthode hybride diffère ici de la plupart des gens, car ma règle générale avec id est simplement d’expliquer l’élément en question. Les sélecteurs d'ID ne sont utilisés qu'une fois par page (y compris les processus GET), je souhaite donc qu'ils soient de nature très spécifique. Afin de maximiser réellement la réutilisation du code, toute propriété en dehors de l'explication d'un élément, je préférerais vraiment utiliser un sélecteur de classe. Comme cet identifiant est unique sur la page, je souhaite uniquement utiliser des explications uniques pour ce sélecteur..
Par exemple, ma largeur serait un peu unique. Mon rembourrage et ma marge seraient un peu uniques. Ma position serait un peu unique. Vous pourriez soutenir que l'affichage de ce sélecteur serait quelque peu unique. Ma couleur pour l'élément; pas vraiment unique. Mon parcours, encore une fois pas vraiment unique. Pour les éléments pas vraiment uniques, je les considère comme "décrivent l'élément" pour lequel j'utilise des sélecteurs de classe.
Illustrons ceci avec un petit code. Pour plus de facilité, j’utilise un didacticiel récent de Jeffrey Way intitulé Astuce: Formes CSS pratiques. Et si nous prenions le CSS original:
#container background: # 666; marge: auto; largeur: 500px; hauteur: 700px; rembourrage en haut: 30px; famille de polices: helvetica, arial, sans-serif; h1 background: # e3e3e3; arrière-plan: -moz-linear-gradient (haut, # e3e3e3, # c8c8c8); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# e3e3e3) à (# c8c8c8)); rembourrage: 10px 20px; marge gauche: -20px; marge supérieure: 0; position: relative; largeur: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; box-shadow: 1px 1px 3px # 292929; couleur: # 454545; texte-ombre: 0 1px 0 blanc;
et transformé à ceci:
#container margin: auto; largeur: 500px; hauteur: 700px; rembourrage en haut: 30px; famille de polices: helvetica, arial, sans-serif; # heading-one padding: 10px 20px; marge gauche: -20px; marge supérieure: 0; position: relative; largeur: 70%; .norm-background color: #fff; arrière-plan: # 666; .heading-Fancy background: # e3e3e3; arrière-plan: -moz-linear-gradient (haut, # e3e3e3, # c8c8c8); arrière-plan: -webkit-gradient (linéaire, gauche haut, bas gauche, de (# e3e3e3) à (# c8c8c8)); -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; couleur: # 454545; texte-ombre: 0 1px 0 blanc;
Jusqu'ici, tout ce que j'ai vraiment fait, c'est d'ajouter deux nouvelles classes à partir du sélecteur unique h1 et d'abstraction de ce dernier pour obtenir un identifiant unique. Je n'ai rien gagné pour le moment et, en réalité, j'ai ajouté un peu plus de temps système à mon dossier. Où est l'avantage alors?
Si vous pensez un instant que vous pourriez réutiliser ces descriptions ailleurs, peut-être pour un sous-titre, nous avons une certaine réutilisation de code. Regardons ce que nous pouvons faire maintenant. Voici à quoi ça ressemble à l'origine:
et voici à quoi ça ressemble avec un sous-titre:
J'ai seulement ajouté une nouvelle définition maintenant:
# heading-two padding: 10px 20px; marge gauche: -20px; marge supérieure: 0; position: relative; largeur: 30%;
Avec un peu de HTML:
Ma rubrique
Ma sous-rubrique
Nous avons la réutilisation du code et nous avons une méthode cohérente. Si vous prenez cette méthode et l'appliquez, vous réduirez le nombre de styles (ou d'objets si vous préférez) que vous écrivez. Moins de code avec une méthode signifie une prise en charge plus facile à une date ultérieure. Vraiment, rien n’est bouleversant ici, mais lorsque vous commencez à expliquer vos sélecteurs d’identité mais à décrire vos classes, il est facile d’ajouter un peu de bon sens à votre code..
Je suis sûr que quelqu'un, quelque part, vous a dit de ne jamais utiliser l'attribut style. Je suis également sûr que certains d’entre vous ne seront pas d’accord avec moi, et c’est bien, je peux le supporter. Je vais enfreindre cette règle un peu avec une mise en garde. Ne l'utilisez jamais sans réfléchir un peu à ce que vous faites. Il existe des utilisations légitimes pour l'attribut style, en particulier lorsque vous travaillez avec des applications complexes utilisant des appels AJAX, mais ces utilisations proviennent de votre couche de comportement..
Lorsque vous devez utiliser l'attribut style, vous devez effectuer un appel final rapide pour remplacer quelque chose dans l'affichage en cascade de l'élément qui n'aurait aucun sens à ajouter à votre fichier global.css. Par exemple, vous devrez peut-être remplacer un style de votre couche de comportement en fonction d'une action de l'utilisateur. Cela ne fait qu’ajouter un peu de complexité, mais cela s’ajoute à la cascade. Je ne voudrais pas utiliser plusieurs propriétés, car il s'agit d'une substitution rapide, ou plutôt, "oubliez ce que je viens de vous dire, faites ceci à la place". C'est une cascade, et vous devriez traiter votre CSS comme tel, à mon avis.
Nous passons beaucoup de temps à mettre l'accent sur l'indentation dans notre code et le code HTML, mais je ne vois pas souvent le même accent dans notre code CSS. Cela fait le monde de la différence. Reprenons notre exemple de travail:
Ma rubrique
Ma sous-rubrique
Si nous indentons cela dans notre balisage, pourquoi ne pas l'indenter de la même manière dans notre CSS:
#container margin: auto; largeur: 500px; hauteur: 700px; rembourrage en haut: 30px; famille de polices: helvetica, arial, sans-serif; # heading-one padding: 10px 20px; marge gauche: -20px; marge supérieure: 0; position: relative; largeur: 70%; # heading-two padding: 10px 20px; marge gauche: -20px; marge supérieure: 0; position: relative; largeur: 30%;
Cela ajoute un peu plus d’importance à ce qui se passe avec ces sélecteurs d’identité. Je comprends maintenant que ce sont des enfants du conteneur sans comparer ma marge bénéficiaire.
Lorsque vous décidez de la disposition de votre fichier de style, c’est la règle générale que j’utilise. Vous devez @ importer vos fichiers CSS supplémentaires en commençant par le fichier reset.css, puis les autres. Définissez ensuite vos éléments tels que h1, ancres, etc. Ensuite, définissez vos sélecteurs d'identifiant dans votre style.css. Si vous travaillez avec plusieurs pages, commentez le début de chaque nouvelle page dans votre indentation. Par exemple, #container est probablement un élément de la mise en page qui est le conteneur de chaque page. Commencez par là avec votre mise en retrait et définissez les commentaires à l'endroit où vous utilisez chaque élément. Enfin, définissez vos classes. Normalement, je n'indente pas mes classes, car elles sont souvent réutilisées et l'indentation ne montre pas où elles sont utilisées.
Enfin, et probablement le plus important, commentez votre CSS comme le ferait votre code côté serveur. Si vous pouvez donner un contexte à une classe, par exemple des éléments qu'elle utilise ou un identifiant auquel elle correspond, commentez-le. Tout contexte que vous donnez à votre avenir est comme une machine à remonter le temps. Marty McFly n’aurait peut-être pas empêché ce type effrayant d’attaquer le trafic s’il venait de lire les commentaires de Flux Capacitor en premier.
Je suis à peu près sûr que mes méthodes ne porteront pas un nouveau nom de danse, ni ne guériront du cancer. Je ne sais même pas si elles seraient adaptées par une seule personne en dehors de ma famille proche. Cela dit, j'espère vraiment que vous enlevez les concepts et construisez des méthodes qui fonctionnent pour vous. La convivialité du développement est un objectif que nous devrions tous nous efforcer d’atteindre. Lorsque vous créez une méthodologie, vous augmentez votre utilisabilité interne de manière exponentielle à mesure que vous développez des habitudes que vous réutiliserez et partagerez avec votre équipe et les autres. Il résout les problèmes de développement, augmente la productivité et diminue le coût global du développement. C’est l’une de ces rares propositions gagnant / gagnant que vous rencontrez dans votre développement quotidien..
Merci de votre lecture et partagez vos idées.
Accentsconagua