• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • CSS a parcouru un long chemin, mais les outils qui l'entourent ne l'ont pas été jusqu'à présent.

    Si vous pensez qu'écrire du CSS, c'est comme combattre des monstres dans un goudron, vous n'êtes pas seul. Tandis que CSS est l'une des technologies les plus fondamentales qui alimentent le Web, ce n'est pas un langage de programmation ou un framework approprié en soi. En conséquence, dès que votre projet commence à prendre de l'ampleur, le désordre fait de même - les règles de sélection semblent être partout, et il est difficile de trouver où et où; à mesure que vous incluez des polices, des CSS externes, des JS et d'autres ressources sur vos pages, la taille finale du bundle semble devenir incontrôlable et vous vous demandez où les idéaux de frontaux rapides et conviviaux se sont perdus.

    Mais ça n'a pas besoin d'être comme ça. Aujourd'hui, les outils autour du CSS ont évolué à un niveau tel que le flux de travail peut non seulement être apprivoisé, mais aussi rendu agréable. Dans cet article, je vais parler de cinq de ces outils CSS que j'ai trouvés d'une immense valeur dans mon travail. J'ai consciemment évité d'inclure les outils «jouets» comme les générateurs CSS, les générateurs de menus, etc., car ils créent plus de problèmes qu'ils n'en résolvent.

    Le train CSS arrive! Allons-y! 😛 😀

    PostCSS

    Si vous aimez JavaScript, vous aimerez l'idée que nous pouvons maintenant ajouter et contrôler CSS via JavaScript. Et c'est exactement la capacité qui PostCSS offre.

    Cependant, il ne s'agit simplement pas d'un sucre de syntaxe basé sur JavaScript par rapport à CSS. PostCSS regroupe plusieurs packages / fonctionnalités puissants, ce qui se traduit par un flux de travail beaucoup plus agréable et plus facile lorsqu'il s'agit de CSS. Par exemple:

    • Les préfixes de fournisseur sont automatiquement ajoutés en fonction de la propriété que vous utilisez.
    • La possibilité de détecter quelles fonctionnalités CSS peuvent être utilisées sur le navigateur actuel.
    • Utilisation des mises à jour de syntaxe CSS à venir, encore à paraître, mais très puissantes.
    • Une grille réactive aussi flexible que possible.

    Je pense que je ne rendrai pas justice à PostCSS si je n'inclus pas l'exemple de grille. Alors on y va. Quelque chose d'aussi simple que ceci:

    div {
      lost-column: 1/3 
    }

    est converti en un système CSS complet avec presque tous les cas de bord pris en charge:

    div {
      width: calc(99.9% * 1/3 -  
      (30px - 30px * 1/3)); 
    }
    div:nth-child(1n) {
      float: left; 
      margin-right: 30px; 
      clear: none; 
    }
    div:last-child {
      margin-right: 0; 
    }
    div:nth-child(3n) {
      margin-right: 0; 
      float: right; 
    }
    div:nth-child(3n + 1) {
      clear: both; 
    }

    Comme il s'agit d'une chose pilotée par JS, PostCSS n'est pas vraiment facile à configurer, surtout si vous êtes un concepteur et que vous n'avez pas grand-chose à voir avec les modules, les bundlers et le monde npm en général. Cela dit, le potentiel de PostCSS dans votre travail est énorme et ne doit pas être négligé.

    Purger CSS

    Aimez-vous le flux de travail moderne basé sur un cadre frontal, mais êtes-vous frustré de constater qu'ils apportent trop de bagages? Si oui, PurgeCSS est votre ami, du moins en ce qui concerne CSS.

    Pour ceux qui ne savent peut-être pas quel est le problème: voici un bref aperçu. Lorsque vous créez des applications d'une seule page à l'aide de frameworks frontaux tels que React, Angular, Vue, etc., vous passez par ce qu'on appelle un «processus de construction». Essentiellement, vous codez tous vos CSS, JS, SASS, etc., dans des fichiers séparés (en les organisant comme vous le trouvez le plus intuitif), mais une fois que vous avez terminé, vous dites au bundler de «construire» l'objet. Ce que cela fait, c'est lire tout le code source que vous avez écrit, lui appliquer divers filtres (minification, obscurcissement / uglification, etc.) et cracher la sortie dans des fichiers uniques, généralement «app.js» pour tout le JavaScript, et «App.css» pour tous les CSS. Ces fichiers, avec un "index.html" maigre, est tout ce dont vous avez besoin pour exécuter le front-end de l'application. L'inconvénient est que puisque tout est inclus dans ces fichiers finaux, leur taille dépasse souvent ce qui est permis pour un temps de réponse rapide; par exemple, il n'est pas rare de voir un «app.js» de plus de 500 Ko!

    PurgeCSS est ajouté dans le cadre de votre flux de travail de construction et empêche les CSS inutilisés d'être regroupés dans la sortie finale. Un cas d'utilisation typique est Bootstrap: c'est une bibliothèque de taille moyenne avec plusieurs classes d'interface utilisateur pour différents composants. Si votre application utilise, par exemple, 10% des classes de Bootstrap, les 90% restants sont le seul gonflement de votre fichier CSS final. Mais grâce à PurgeCSS, ces fichiers CSS inutilisés peuvent être identifiés et empêchés du processus de construction, ce qui entraîne des fichiers CSS finaux beaucoup plus petits (une réduction de taille de 5 à 6 fois est assez normale).

    Alors, allez-y, «purgez» les CSS inutiles avec Purger CSS!

    Tailwind

    Tailwind est un framework CSS, mais il va tellement à contre-courant que j'ai pensé l'inclure ici parmi les outils CSS. Si vous détestez le CSS en ligne (qui ne le fait pas?!), Tailwind vous fera probablement reculer d'horreur la première fois que vous le rencontrez. Voyons comment vous pouvez coder un formulaire typique en utilisant Tailwind CSS:

    <div class="w-full max-w-xs">
      <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
            Username
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
        </div>
        <div class="mb-6">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
            Password
          </label>
          <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
          <p class="text-red-500 text-xs italic">Please choose a password.</p>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Sign In
          </button>
          <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
            Forgot Password?
          </a>
        </div>
      </form>
      <p class="text-center text-gray-500 text-xs">
        ©2019 Acme Corp. All rights reserved.
      </p>
    </div>

    "C'est une blague ou quoi?! Que sont toutes ces petites classes ennuyeuses? En y regardant de plus près, pourquoi diable suis-je en train de définir les marges, le remplissage et la couleur directement avec le HTML? Est-ce 2019 ou quoi? »

    Des pensées comme celles-ci sont attendues. Je sais parce que j'ai ressenti la même chose et j'ai immédiatement fermé le couvercle sur Tailwind. Ce n'est que plus tard que je suis tombé sur un podcast où l'invité avait refait un site Web branché et de taille décente à Tailwind que j'ai commencé à y prêter attention.

    Avant d'aller plus loin, réfléchissez à ces questions:

    • Êtes-vous fatigué de mémoriser les classes de framework standard et leurs fonctions afin de pouvoir personnaliser vos conceptions à votre guise? Un bon exemple est la modification de l'apparence et du comportement de la barre de navigation Bootstrap.
    • Pensez-vous que les frameworks populaires comme Bootstrap sont exagérés et essaient de faire beaucoup plus qu'ils ne le devraient?
    • Vous retrouvez-vous à mélanger des frameworks parce que vous voulez le meilleur de tous les mondes?
    • Aimez-vous avoir plus de contrôle sur vos conceptions tout en trouvant l'expérience CSS vanille écrasante?

    Si la réponse à l'une de ces questions est «oui», vous avez grandement besoin de Tailwind. Voyons maintenant ce qu'est Tailwind et ce qu'il fait.

    Tailwind est ce qu'on appelle un CSS utilitaire, qui diffère de ce que nous faisons dans nos flux de travail quotidiens: CSS sémantique. La différence entre le CSS sémantique et le CSS utilitaire est que le premier essaie de regrouper les éléments de style par le nom des sections visuelles qui apparaissent sur la page. Ainsi, si vous avez un menu de navigation, des cartes, un carrousel, etc., sur une page, la manière sémantique de faire les choses serait de regrouper les règles de style CSS sous des classes telles que .nav, .card, .carousel, etc., que leurs sous-sections étiquetées en conséquence (par exemple, .card-body, .card-footer, etc.). C'est de loin l'approche la plus courante du CSS, et nous la connaissons tous grâce à des frameworks tels que Bootstrap, Foundation, Bulma, UI Kit, etc.

    D'autre part, le style «utilitaire» d'écriture CSS nomme les classes précisément en fonction de leur fonction: une classe qui contrôle la marge pour les côtés supérieur et inférieur sera nommée comme .margin-y-medium et peut être appliqué n'importe où dans le balisage HTML où cette marge est nécessaire. Bien que cela introduise un peu un fluage du nom de classe (jetez un coup d'œil au code que j'ai partagé plus tôt ou à la capture d'écran - tellement de classes!), L'intention du CSS est claire: vous n'avez pas besoin de sauter aller-retour entre la documentation, votre CSS et votre HTML pour trouver les bons noms et le bon effet.

    C'est une façon de travailler très libératrice, mais il y a aussi un hic: vous devez avoir vos bases CSS solidement en place (y compris des concepts modernes comme la Flexbox). En effet, Tailwind ne propose aucun style prêt à l'emploi pour les composants de votre page, et c'est à vous de créer les styles à partir des blocs de construction donnés. Un autre problème est celui de l'installation: Tailwind vous permet de regrouper plusieurs classes CSS dans ce que l'on appelle des composants, mais cela se fait via JavaScript et nécessite un chargeur de module et un bundler comme Webpack.

    En fin de compte, Tailwind est une nouvelle façon de coiffer, polarisante et frappante, qui plaira à ceux qui aspirent à plus de simplicité et de contrôle.

    Saas

    Bien que Toupet existe depuis longtemps, je l'ai inclus ici parce que les développeurs ne savent toujours pas à quel point il est utile. Stylistically Awesome Style Sheets (ou SASS) est un sur-ensemble de CSS qui a été développé pour apprivoiser la folie qui s'infiltre dans le projet une fois que CSS dépasse quelques lignes.

    Imaginez ceci: vous avez parcouru un long chemin en écrivant le CSS pour votre projet. Vous utilisez quelques couleurs, vous avez déterminé des marges raisonnables pour divers divs, styles de police, etc. Sauf que maintenant vous réalisez que tout ne va pas très bien ensemble. Vous aimeriez peut-être essayer des marges plus importantes pour toutes les sections, cartes et boutons. Et maintenant quoi? Même l'idée même d'avoir à rechercher-remplacer dans votre fichier CSS géant suffit à donner un mal de tête. Nous avons tous fait cela, et nous savons tous à quel point cela est sujet aux erreurs. Sass résout ce problème en introduisant des variables:

    Lorsque nous écrivons du HTML, nous imbriquons des éléments dans d'autres éléments. Mais lors de l'écriture du CSS, nous devons écrire une hiérarchie plate de règles, ce qui rend difficile l'adaptation mentale du CSS au HTML. Avec Sass, vous pouvez imiter la structure de page dans vos fichiers de style:

    Tout cela ne commence même pas à rayer la surface des goodies que propose Sass: conception modulaire, fichiers inclus, mixins, héritage. . . La liste se rallonge de plus en plus. Bien sûr, vous devrez apprendre un flux de travail de compilateur Sass et l'inclure dans le vôtre, mais à mon avis, ces quelques heures passées sont un investissement qui vous rapportera encore et encore!

    Linters CSS

    Étant donné que les concepteurs Web (et les développeurs d'interface utilisateur - bien que je me demande en quoi ces deux termes sont différents 🤔) utilisent de simples éditeurs de texte - ou comme c'est le cas de nos jours, du code directement à partir des outils de développement Chrome - ils ont rarement la chance d'entendre parler ou de bénéficier d'un linter. D'un autre côté, les programmeurs qui utilisent bons éditeurs de texte comme VS Code, Sublime Text ou d'autres IDE connaissent très bien cet outil car c'est une seconde nature pour eux. Quoi qu'il en soit, le fait est que si vous êtes l'un de ces développeurs CSS qui se noie dans un CSS en désordre, vous pourriez bénéficier d'un linter.

    En termes simples, un linter est un programme qui vérifie votre code pour les erreurs et les incohérences. Il le fait à l'aide d'un ensemble de règles dont il dispose pour déterminer ce qui ne va pas et ce qui est incohérent. Les bons linters s'intègrent aux IDE et aux éditeurs de code et peuvent être configurés pour s'exécuter à chaque fois que vous enregistrez le fichier source. Ils vous aident également avec les aperçus des couleurs, les erreurs et la saisie semi-automatique lorsque vous composez vos fichiers CSS:

    Mais voici la meilleure partie - si vous suivez un style et un formatage CSS particuliers, vous pouvez modifier le linter à votre satisfaction. Cela garantit que le CSS dans un projet suit le même guide de style (le linter peut également être configuré pour formater automatiquement le fichier à chaque sauvegarde / validation du code source). Ainsi, que vous travailliez en équipe ou seul, un linter est toujours un excellent ajout au flux de travail de votre projet.

    Conclusion

    Je suis sûr que maintenant, vous êtes convaincu que le développement CSS moderne est loin de l'approche de l'élevage des chats du passé. 🙂

    Cela dit, je vais encore admettre quelque chose, même si je ressemble à un disque rayé: certains des outils que j'ai abordés dans cet article sont n' facile à installer, surtout si vous n'êtes pas en bons termes avec le npm l'écosystème. Mais avant de vous sentir dégoûté et de détourner votre visage, dites-moi ceci: était CSS facile quand vous étiez pour la première fois apprentissage il? Était-ce facile d'apprendre à centrer une div, à maîtriser les sautes d'humeur de floats, et ainsi de suite? De même, les outils que j'ai décrits ici ont une certaine courbe d'apprentissage, mais ils en valent la peine.

    Honnêtement, une fois que vous aurez commencé à expérimenter les résultats, vous vous en voudrez de ne pas le faire plus tôt. Et ne sous-estimons pas l'importance du CSS qui est modulaire, léger et bien organisé!