•  09-06-2019
  •  | 
  •  

Question

Permettez-moi de clarifier quelque chose.

JE. Détester.CSS.

C'est un cauchemar sans fin.Chaque changement mineur de mise en page ressemble à un hack.Les solutions aux problèmes semblent souvent impliquer des chiffres agités, comme un chef essayant de déterminer exactement la quantité de noix de muscade à mettre dans son futur célèbre riz au lait.Vient ensuite le problème des navigateurs multiples, les problèmes de résolution multiples.

..pour faire court, c'est pénible.Un PITA, si vous voulez.

De nombreux frameworks cherchent à s'éloigner du HTML (balises personnalisées, système de composants JSF) dans le but de faciliter la gestion de cette marmite de poisson particulière.

Y a-t-il quelque chose que vous avez utilisé qui a un concept similaire appliqué au CSS ?Quelque chose qui fait beaucoup de magie entre navigateurs pour vous, prend en charge des variables telles que (pourquoi dois-je taper #3c5c8d à chaque fois que je veux cette couleur), prend en charge les champs calculés (qui sont « compilés » en CSS et JS), etc.

Sinon, est-ce que j'y pense correctement ?Est-ce que j'essaie de pousser un bloc très carré à travers un trou très rond ?

Était-ce utile?

La solution

Vous pouvez toujours utiliser un moteur de modèles pour ajouter des variables et des champs calculés à vos fichiers CSS.

Autres conseils

Ce que j'ai trouvé qui fonctionne le mieux, c'est de vraiment apprendre le CSS.Je veux dire vraiment apprendre le CSS.

Cela peut être une langue déroutante à apprendre, mais si vous en lisez suffisamment et si vous pratiquez, vous finirez par apprendre la meilleure façon de faire les choses.

La clé est de le faire suffisamment pour que cela devienne naturel.CSS peut être très élégant si vous savez ce que vous voulez faire avant de commencer et si vous avez suffisamment d’expérience pour le faire.

Certes, c'est aussi un PITA majeur à faire parfois, mais même les problèmes entre navigateurs ne sont pas si graves si vous vraiment entraînez-vous et apprenez ce qui fonctionne et ce qui ne fonctionne pas, et comment contourner les problèmes.

Tout ce qu'il faut, c'est de la pratique et, avec le temps, vous pourrez devenir bon dans ce domaine.

Si par hasard vous utilisez Ruby, il y a Toupet.Il prend en charge les sélecteurs hiérarchiques (utilisant l'indentation pour établir des hiérarchies), entre autres choses, ce qui facilite grandement la vie d'un point de vue syntaxique (vous vous répétez beaucoup moins).

Mais je suis certainement avec vous.Même si je me considère comme un petit expert CSS, je pense que ce serait bien s'il existait des outils pour CSS comme il y en a avec Javascript (Prototype, JQuery, etc.).Vous dites à l’outil ce que vous voulez et il gère les incohérences du navigateur en coulisses.Ce serait l'idéal, je pense.

Cela développe ma réponse précédente.

Quand j'ai commencé à utiliser CSS, je pensais aussi que c'était pénible qu'il ne prenne pas en charge les variables, les expressions, etc.Mais au fur et à mesure que je commençais à l’utiliser de plus en plus, j’ai développé un style différent pour surmonter ces problèmes.

Par exemple, au lieu de ceci :

a { color: red }
.entry { color: red }
h1 { color: red }

Tu peux faire:

a, .entry, h1 { color: red }

Vous pouvez conserver la couleur déclarée au même endroit en procédant ainsi.

Une fois que vous utilisez suffisamment CSS, vous devriez être en mesure de surmonter facilement la plupart des incohérences du navigateur.Si vous constatez que vous devez utiliser un hack CSS, il existe probablement une meilleure façon de le faire.

Désolé de dire ça les gars, mais vous n'avez tous pas compris l'essentiel.

Le mot abstraction C'est la clé.Disons que vous et Sally créez un site Web.Vous stylisez les formes pendant qu'elle arrondit les coins.Vous et elle avez défini une poignée de sélecteurs.

Et si, sans le savoir, vous choisissiez des noms de classe qui entrent en conflit avec ceux de Sally ?Vous voyez, vous ne pouvez pas « masquer » (abstraire) les détails lorsque vous travaillez en CSS.C'est pourquoi vous ne pouvez pas corriger un bug dans IE, puis créer une solution autonome que d'autres peuvent utiliser telle quelle, un peu comme vous appelez des procédures dans un langage de programmation en ne vous souciant que des conditions préalables et postérieures et sans y penser. comment ça marche à l'intérieur.Tu penses juste à quoi vous voulez accomplir.

C’est le plus gros problème du Web :il manque complètement de mécanismes d'abstraction !La plupart d’entre vous s’exclameront : « C’est inutile ;tu arrêtes de fumer du crack !"

Au lieu de cela, vous ferez le travail, par exemple, de corriger des bugs de mise en page, d'arrondir les coins ou de débattre encore et encore du "meilleur" balisage pour tel ou tel cas.Vous trouverez un site qui explique la solution, puis copiez-collez la réponse puis adaptez-la à votre cas précis sans même penser à ce que vous foutez !Oui, c'est ce que vous ferez.

Fin du discours.

Vient ensuite le problème de plusieurs navigateurs

Il y a ce cela permet de supprimer certaines incohérences d’IE.Vous pouvez également utiliser jQuery pour ajouter des sélecteurs via javascript.

je suis d'accord avec Dan, apprenez-le et ce n'est pas vraiment un problème, même amusant.

Vous voyez, c'est le problème avec SO : chaque réponse jusqu'à présent a fait valoir un argument valable et doit être considérée comme la réponse finale.Je vais essayer de résumer :

  • CSS c'est bien! Pour élargir davantage, il y a une courbe d'apprentissage, mais une fois que vous l'aurez appris, beaucoup de choses seront beaucoup plus faciles.
  • (Quelques) incohérences du navigateur sont résolubles de manière générique.
  • (Certains d'entre vous) Variable et calculé la fonctionnalité de champ peut être prise en charge via le moteur de création de modèles que vous utilisez.

Je pense qu'une combinaison de tout cela résout certainement une grande quantité de problèmes (même si, pour être honnête, l'apprentissage approfondi du CSS n'est pas une option pour tout le monde ;certaines personnes ne l'utilisent tout simplement pas suffisamment pour justifier le temps).

Il y a quelques problèmes qu'aucun des points ci-dessus ne couvre (certains types de champs calculés nécessiteraient l'écriture d'une bibliothèque JS, je pense) mais c'est certainement un bon début.

Pour la prise en charge des variables, j'ai utilisé PHP avec des en-têtes CSS à bon escient.Je pense que vous pouvez le faire dans n'importe quelle langue.Voici un exemple php : 

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }

Les solutions aux problèmes semblent souvent impliquer de mélanger des chiffres, comme un chef essayant de déterminer exactement la quantité de noix de muscade à mettre dans son futur célèbre riz au lait.

Je n'obtiens cela que lorsque j'essaie de faire fonctionner des choses dans IE.

Si vous apprenez le CSS au point de pouvoir coder la plupart des choses sans avoir à rechercher la référence (si vous recherchez encore régulièrement une référence, vous ne la connaissez pas vraiment et ne pouvez pas prétendre vous plaindre, je pense), et alors développer pour Firefox/Safari, c'est un endroit plutôt agréable.

Laissez la douleur et la souffrance de la compatibilité d'IE jusqu'à la fin après son fonctionnement dans FF/Safari, de sorte que votre esprit attribuera la faute à IE, à qui il appartient, plutôt qu'au CSS en général.

Variables CSS Arrivent (relativement) bientôt, mais je reconnais qu’ils se font attendre depuis longtemps.En attendant, il est possible d'utiliser un moteur de template CSS tel que Sass, ou même le langage web dynamique de votre choix, pour générer vos feuilles de style par programmation.

Pour les frameworks CSS, vous pourriez envisager Grilles YUI.Cela rend la mise en page de base beaucoup plus rapide et plus simple, même si utilisé sous sa forme brute, il compromet la sémantique.

La clé d'une véritable compréhension du CSS (et des maux de tête du navigateur) est une solide compréhension du modèle de boîte utilisé par les normes CSS et le modèle incorrect utilisé par certains navigateurs.Une fois que vous aurez compris cela et commencerez à apprendre les sélecteurs, vous vous éloignerez des propriétés spécifiques au navigateur et CSS deviendra quelque chose que vous attendez avec impatience.

Consultez également PlanCSS, un framework de mise en page en CSS.Cela ne résout pas tous vos problèmes, mais beaucoup, et vous n'êtes pas obligé d'écrire le CSS vous-même.

Je pense que les erreurs courantes que font les débutants avec CSS sont liées à la spécificité.Si vous stylisez le un balise, êtes-vous sûr de vouloir vraiment styliser chacun des éléments du document ou une certaine "classe" de un Mots clés?

Je commence généralement par être très précis avec mes sélecteurs CSS et je les généralise quand je le juge opportun.

Voici un article humoristique sur le sujet, mais aussi informatif :Guerres de spécificité

CSS prend un peu de temps à apprendre, mais ce que j'ai trouvé au départ le plus décourageant était le fait qu'il fallait autant de hacks pour que tous les navigateurs se comportent de la même manière.Apprendre un système qui n'adhère pas à la logique semble stupide...mais je me suis accroché à la vague croyance selon laquelle il existe une logique derrière les particularités de chaque navigateur, sous la forme de la spécification W3.Il semble que les navigateurs de nouvelle génération s'alignent petit à petit - mais IE6 me rend toujours la vie un enfer au quotidien.

Peut-être que créer une couche d'abstraction entre le code CSS conforme/valide et les implémentations de mauvaise qualité des navigateurs ne serait pas une mauvaise chose.Mais si une telle chose était créée, faudrait-il qu'elle soit alimentée par JS (ou jQuery) ?(et cela créerait-il un fardeau déraisonnable, en termes de coût de traitement ?)

J'ai trouvé qu'il était utile de « niveler le terrain » lors de l'écriture de scripts avec CSS.Il existe probablement de nombreuses versions différentes de scripts de réinitialisation - mais l'utilisation des réinitialisations YUI m'a aidé à réduire le nombre de bizarreries que je rencontrerais autrement - et les grilles YUI rendent parfois la vie un peu plus facile.

@SCdF :Je pense que votre résumé ici est juste.Mais l’argument selon lequel certaines personnes n’ont pas le temps d’apprendre le CSS est faux – réfléchissez-y une seconde.Remplacez une technologie que vous maîtrisez et vous comprendrez pourquoi :

JE.Détester.Java.Y a-t-il quelque chose qui pourrait l'écrire pour moi ?Tout le monde n’a pas le temps de maîtriser Java.

CSS est certainement une technologie imparfaite - j'ai de grands espoirs que dans 5 ans nous n'aurons plus affaire à des incompatibilités de navigateurs (nous y sommes presque), et que nous aurons de meilleurs outils côté auteur (j'ai écrit une macro Visual Studio pour mon propre usage qui fournit le type de variables et de calculs que vous décrivez, donc ce n'est pas impossible) - mais insister sur le fait que vous devriez pouvoir utiliser cette technologie efficacement sans vraiment la comprendre n'est tout simplement pas raisonnable .

Cependant, vous y réfléchissez correctement, vous aurez probablement encore besoin de comprendre les différentes implémentations CSS dans les navigateurs.Il s’agit simplement de comprendre l’environnement dans lequel vit votre application.

Clarifier:il ne s'agit pas de comprendre CSS.Si vous connaissez bien la langue, vous devez quand même gérer la redondance, la duplication et le manque de structures de contrôle dans la langue.

J'écris du CSS solidement depuis plus de 10 ans et j'en suis arrivé à la conclusion que même si le langage est puissant et efficace, l'implémentation du CSS est nulle.J'utilise donc une couche d'abstraction comme Toupet ou Moins ou xCSS pour s'interfacer avec la langue.Ces outils utilisent une syntaxe similaire à CSS afin que vous résolviez le problème dans le domaine du problème.Utiliser quelque chose comme PHP pour écrire du CSS fonctionne mais n'est pas la meilleure approche.

En masquant les problèmes du langage via une couche d'abstraction, vous pouvez fournir un meilleur produit qui conservera son intégrité tout au long du cycle de vie de votre projet.L'écriture manuelle de CSS s'accélère pourriture des logiciels à moins que vous ne fournissiez une documentation solide, ce que la plupart des codeurs CSS ne fournissent pas.Si vous écrivez un framework CSS bien documenté, vous ne l'écrirez probablement pas à la main de toute façon.Ce n'est tout simplement pas efficace.

Un autre problème avec CSS est dû au manque de prise en charge des déclarations de blocs d'imbrication.Cela encourage les codeurs à créer un ensemble plat et global de classes et à gérer les collisions de noms avec une convention de dénomination.Nous savons tous que les globals sont mauvais, mais pourquoi écrivons-nous du CSS de cette manière ?Ne serait-il pas préférable de donner un contexte à vos classes au lieu de les exposer à l'ensemble du modèle de document ?Et votre convention de dénomination peut fonctionner, mais ce n'est qu'une autre tâche que vous devez maîtriser pour écrire le langage.

J'encourage ceux d'entre vous qui sont fiers d'écrire du bon CSS à commencer à appliquer certaines des meilleures pratiques de la programmation à votre balisage.Utiliser une couche d'abstraction ne signifie pas que vous n'avez pas les compétences nécessaires pour écrire un bon CSS, cela signifie que vous avez limité votre exposition aux faiblesses du langage.

Vous n’avez pas besoin d’une abstraction éloignée du CSS : vous devez réaliser que le CSS lui-même est une abstraction.CSS ne consiste pas à placer des pixels simplement sur l'écran.Il s’agit plutôt d’écrire un système de règles qui aident le navigateur à prendre ces décisions à votre place.C’est nécessaire, car au moment où vous écrivez CSS, vous ne connaissez pas le contenu auquel le navigateur l’appliquera ;vous ne connaissez pas non plus l'environnement dans lequel le navigateur le fera.

Maîtriser cela prend du temps.Vous ne pouvez pas récupérer CSS en un week-end et être prêt à partir.C’est un peu décevant, car la barrière d’entrée dans la langue est si basse, mais les eaux coulent profond.En voici juste quelques-uns des sujets vous devriez chercher à maîtriser pour maîtriser CSS :

  • La Cascade et l'Héritage
  • Le modèle de boîte
  • Méthodes de mise en page incluant les flotteurs et la nouvelle flexbox
  • Positionnement
  • Meilleures pratiques actuelles telles que SMACSS ou BEM pour garder vos styles modulaires et faciles à maintenir

Vous n’avez pas besoin de tout savoir d’emblée, mais vous devez continuer à avancer.Tout comme pour les autres langages et la programmation en général, vous devez continuellement chercher à en apprendre davantage et à maîtriser le métier.CSS est un élément fondamental du développement Web, et davantage de développeurs doivent le traiter avec le même respect qu'ils accordent aux autres langages.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top