skip to Main Content

10 astuces pour améliorer votre flux de travail CSS

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Ecrire du CSS n’est pas facile, car si vous ne faites pas attention, vous pourrez écrite un code encombré, être lent, et prendre énormément de temps à déboguer le code lorsque vous rédigez votre code.

Allons droit au but : dans ce tutoriel, j’ai collecté quelques astuces que vous pouvez utiliser pour améliorer votre performance en rédaction de code CSS. Vous pourrez les mettre en oeuvre à tout moment sur vos projets anciens ou nouveaux projets.

Nous allons notamment explorer :

1. La collection des propriétés

Si vous trouvez que vous avez écrit les mêmes propriétés à plusieurs reprises, vérifiez que vous ne pouvez pas les tronquer en supprimant les classes et les ID inutiles. Ensuite, ajoutez toutes les propriétés communes dans une même accolade.

Si vous pouvez coupler vos sections, vous pourrez créer un fichier plus efficace au fonctionnement et il sera beaucoup plus rapide.

2. Utilisez les identifiants pour les constantes

La malheureuse limite du CSS est que vous ne pouvez pas définir des constantes, comme en PHP. Les constantes sont des termes que vous pouvez définir une fois qui sont utilisé par le reste du script peut importe la portée du code et des inclusions.

Vous pouvez arrêtez de créer plusieurs styles plusieurs fois, pour opter pour un type que vous définissez comme votre bloc de conception. Etant donné que le CSS n’a pas été créé pour programmer votre site, Il vous permettra uniquement d’agir comme un architecte d’intérieur pour ainsi dire, il n’a pas la capacité de supporter les constantes.

Pourtant, c’est quelque chose qui serait vraiment utile, en particulier dans le cas où le regroupement de vos propriétés ne fera pas tout le travail pour vous.

Ce que vous pourrez faire c’est de créer un ID qui inclut tous les styles dont vous avez besoin. Lorsque vous avez réellement besoin de l’utiliser, il suffit d’ajouter les sélecteurs dont vous avez besoin pour la déclaration. Ce qui vous fera écrire votre code CSS beaucoup plus rapidement.

3. Commentez vos constantes

Bien sûr, le CSS ne supporte pas constantes, mais cela ne signifie pas que vous ne pouvez toujours pas écrire une référence pour ce qui serait autrement des constantes. Pourquoi ne pas lister les styles communs dans un commentaire multi-lignes ?

Il vous reviendra de déterminer comment vous taperez ces commentaires, mais vous pouvez créer une sorte de table de matière similaire à celle-ci :

/*
* CSS 'Constants'
*
* Background:#ccc9c9
* Deep gray, text:#3a3838
* main content background:#e7e7e7
*
*/

Ceci est particulièrement utile pour moi, car il ne m’est pas toujours facile de savoir rapidement quels sont les détails en fonctionnalités d’un bloc de code (Constante). Avoir un rappel à proximité permet d’accélérer le processus de codage, puisque vous savez exactement où regarder et vous aurez pas à chercher dans une montagne de CSS pour trouver le point où vous avez fait référence à un certain style.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

4. Les sélecteurs groupés

Pourquoi s’arrêter là ? Pendant que vous y êtes, pourquoi ne pas grouper de nombreux sélecteurs qui peuvent être assemblés ? Ceci vous épargnera la tâche de taper plusieurs fois le même style :

h1, h2, h3, h4, p {
  padding: 1 em;
  font-family: "Times New Roman", temps, serif;
}

.navigation  ul, .navigation  li {
  padding-top: 0,5 em;
}

Bien que cela puisse ne pas fonctionner dans tous les cas et l’exemple ci-dessus ne s’appliquera certainement pas à vos besoins spécifiques, il peut servir de rappel pour la prochaine fois que vous codez et que vous avez besoin de gagner en temps et en espace.

5. Utilisez un préprocesseur

Un préprocesseur CSS est une extension du langage CSS régulier qui vous aide à avoir code plus rapide tout en ajoutant beaucoup d’autres fonctionnalités, qu’il ne serait pas possible d’ajouter en temps normal aussi facilement.

Les préprocesseurs CSS plus courants sur WordPress sont SASS et LESS, et vous pouvez apprendre à utiliser les deux.

Les préprocesseurs CSS simplifient considérablement le travail, et il est assez normal de voir à quel point les développeurs s’y attachent une fois qu’ils ont maîtrisé la chose.

6. Les pseudo-classes

Comme l’explique le spécialiste du CSS Eric Meyer,  la liste des styles des liens dans un certain ordre est important. Sinon, vous pourriez vous retrouver avec style des liens qui ne fonctionne pas comme vous l’aurez espéré.

Vous pouvez lutter contre cela et gagner du temps en n’ayant pas à résoudre ce type de problème à l’avenir en suivant un ordre simple pour les pseudo-classes des liens. Vous pouvez vous rappeler cet ordre avec le dispositif suivant :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

a:link {declaration}
a:visited {declaration}
a:hover {declaration}
a:active {declaration}

le style des liens non-visités sont définis en premier, ensuite visité, lors du survol de la souris et les liens actifs. A vrai dire, l’ordre n’a pas réellement d’importance, le but est de pouvoir vous faire retenir cette combinaison le plus simplement possible. Cet ordre s’intitule « LoVe/HAte » pseudo-classes, en raison des lettres utilisées dans les pseudo-classes.

Malheureusement, cela ne comprend pas la pseudo-classe « focus », bien qu’elle puisse être considéré comme la pseudo-classe « active ». Il y a aussi un phrasé mnémonique qui inclut cette pseudo-classe il s’agit de « LoVe Hurts Fade Away »:

a:link {declaration}
a:visited {declaration}
a:hover {declaration}
a:focus {declaration}
a:active {declaration}

7. Utilisez sténographie CSS

Si vous voulez coder avec rapidité et efficacité, mais sans courbe d’apprentissage plus abrupte avec l’aide d’un préprocesseur, vous pouvez coder le CSS de manière sténographique. Les règles sont beaucoup plus simples à apprendre ce qui vous permettra de les utilisateurs beaucoup plus simplement.

Avec le raccourci CSS, vous pourrez condenser plusieurs lignes en une seule, sans perdre en terme de fonctionnalité. Par exemple, ci-dessous vous verrez 3 lignes qui s’appliquent à la bordure d’un élément :

#maincontent {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Cette ligne pourrait être beaucoup plus simple:

#maincontent {
  border: 1px solid black;
}

8. Utilisez des raccourcis pour les images

Les raccourci CSS peuvent ne pas toujours être la meilleure solution pour vous, mais vous pouvez adopter cette règle à l’utilisation des couleurs.

Au lieu d’utiliser un code hexadécimal à 6 chiffres, vous pouvez le faire à 3 chiffres uniquement.

#ffffff = #fff
#1144bb = #14b
#ffcc44 = #fc4

Autrement dit, si vous constatez qu’un code couleur possède des paires (la première et la deuxième valeur, les troisième et quatrième, et les deux dernières valeurs) où chaque paire ont le même caractère. vous pouvez omettre l’un de ces caractères pour chaque paire.

Cela vous prendra du temps à vous s’y faire, mais le sacrifice en vaudra la peine. Si les autres formes de raccourcis ne sont pas communs, vous n’avez pas d’inquiétude à vous faire à ce niveau, car les raccourcis des couleurs sont presque connus de tous.

9. Les liens n’ont pas besoin de citation et d’espace

Lorsque vous ajoutez un URI à votre feuille de style, le format régulier et correct comprend des espaces et des guillemets simples ou doubles, comme dans cet exemple:

body {
background-image: url (« http://www.example.com/deepgray-pattern.png »);
}

Après « url(« , il y a un espace, des guillemets et un espace de fermeture qui sont en fait facultatif.

Pour vous faire gagner un peu plus de temps et d’espace, cette même ligne peut être écrit comme ceci:

body {
background-image: url (http://www.example.com/deepgray-pattern.png);
}

Vous remarquerez que l’espace et les guillemets ne sont pas réellement nécessaires.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

10. Analyser votre code CSS

Il est important d’analyser votre feuille de style une fois que vous aurez terminé pour vous assurer qu’il est aussi propre et léger que possible. Cela peut être pénible, mais surtout, qu’il peut prendre un certain temps à être réalisé.

Heureusement, il existe des outils gratuits comme CSS Analyser, CSS Dig et CSS Lint. Tout ce que vous devez faire est d’entrer votre code, sélectionner certaines options et cliquez sur un bouton pour obtenir instantanément un rapport pour votre code CSS.

CSS Lint est encore plus sévère et pourra heurter votre sensibilité au nom du progrès en vous aidant à améliorer vos compétences de codage.

De toute façon, ce sont toutes les options faciles disponibles pour vous aider à simplifier l’analyse de votre feuille de style pour vous assurer qu’il est aussi saint que possible.

C’est tout pour ces astuces que vous pouvez utiliser sur vos différents projets CSS. N’hésitez pas à nous proposer vos astuces.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
13 Partages
Partagez12
Tweetez
Enregistrer1