10 astuces CSS pour gagner du temps lors de l'utilisation de Sass

Ces 10 meilleures pratiques CSS vous permettront de gagner du temps et de mieux collaborer avec votre équipe.

Nous pensons parfois que nous savons tout ce que nous devons savoir sur le SCSS et que nous pouvons lui donner plus de temps pour progresser en JavaScript.

Je suis désolé d’être celui qui vous a révélé cela, mais vous devriez accorder plus d’attention à vos feuilles de style. J’ai travaillé sur des projets dans lesquels le code s’est transformé en spaghetti simplement parce que quelques bonnes pratiques simples n’étaient pas appliquées. J'ai rapidement compris à quel point de bons conseils peuvent être précieux lorsque vous travaillez avec d'autres personnes sur une base de code qui peut devenir assez volumineuse en un rien de temps.

C'est pourquoi, aujourd'hui, je partage avec vous 10 meilleures pratiques SCSS qui vous aideront. et votre équipe.

Commencez à les utiliser, vos coéquipiers et les personnes qui reprendront par la suite votre code vous en remercieront. (Au fait, c’est l’une des rares façons d’obtenir des points supplémentaires au bon endroit. ?)

Conseil n ° 1: Adoptez la Convention BEM

Vous êtes-vous déjà lancé dans un projet sans savoir comment commencer à lire ou à donner un sens au nom des classes CSS?

Ouais, on est tous passés par là. C’est pourquoi chaque fois que je commence un nouveau projet ou que je participe à un projet, l’une de mes premières optimisations de style de code consiste à implémenter BEM et à s’assurer que tout le monde le suit.

BEM signifie Block, Element, Modifiers. La valeur ajoutée apportée par cette convention de nommage des classes CSS est simple: elle vous permet de visualiser le style de votre modèle de manière structurée.

Son fonctionnement est encore plus simple:

1. Vous appelez le modèle principal ] les blocs de votre page comme celui-ci, par exemple: class = "button" .

2. Nommez ensuite les éléments de chaque bloc à l’aide de deux traits de soulignement (pour montrer qu’il fait partie du bloc): class = "button__icon" .

3. Et si vous avez une variante de ce bloc, utilisez deux tirets pour nommer un modificateur: class = "button button - red" .

Dans votre modèle, il ressemblera à ceci:

 < button   class  =  " bouton button - blue "  . 19659018]> 
	 < img   class  =  " button__icon "    src  =  " http: : //www.bem-br.org/img/logo.png  "   alt  =  " icon-blue "   /> 
	 < p   class  =  ] " button__label "  >  Utilisez BEM  </  p > 
 </  bouton > 

 < button   class  =  " bouton bouton - rouge "  > 
	 < img   class  =  " button__icon "    src  =  " http://www.bem-br.org/img/logo .png  "   alt  = "  icon-red  "  /> 19659020] < p   class  =  " button__label "  >  Veuillez utiliser BEM  </  p > .
 </  bouton > 
 

Editer vos styles deviendra beaucoup plus facile, car vous pourrez visualiser la structure de votre code:

 .button  {
	 border :  none ; 
	 marge :   20  px ; 
	 curseur :  pointeur ; 

	. Button__icon  {
		 largeur [19659018]:   20  px ; 
		 height :   20  px ; 
	} 

	 .button__label  {
		 ] couleur :  blanc ; 
		 rembourrage :   20  px  40  px ; 
		 alignement des textes  ]:  centre ; 
		 transformation de texte :  majuscule ; 
		 taille de la police :   16  px ; 
	} 

	

	 &  - bleu  {
		 couleur de fond :  bleu  et 
	} 

	  &  - red  {
		 couleur de fond :  rouge ; 
	} 
 

Pour en savoir plus sur BEM: MindBEMding Si vous suivez la convention BEM (ou si vous allez le faire), voici une autre bonne pratique à suivre pour accélérer votre temps de développement: utiliser une extrapolation variable. De cette façon, vous ne vous répéterez plus.

C'est assez simple: vous définissez simplement votre classe de blocs dans une variable (dans l'exemple ci-dessus, il s'agissait de .button ) et remplacez-la par # { $ c} dans votre code CSS.

Utilisons l'exemple ci-dessus pour voir comment cela fonctionne:

  $ c : “.button”

 # {$ c}   {
	 frontière :  aucune ; 
	 marge :   20  px  ; 
	 curseur :  pointeur ; 

	  &  - bleu  {
		 couleur de fond :  bleu  bleu  ]; 
	} 

	  &  - rouge  {
		 couleur de fond :  rouge  et 
	} 

	 [19459077]  ] # {$ c}  __ icon  {
		 width :   20  px ; 
		 hauteur :   20 . ; 
	} 

	  # {$ c}  __ label  {
		 couleur :  blanc ; 
		 padding  :   20  px  40  px  
		 alignement de texte :  centre ; 
		 transformation de texte :  majuscule ; 
		 taille de police :   1 6  px ; 
	} 
} 

Il s'agit d'une amélioration simple et petite, mais vous n'avez pas à réécrire votre nom de classe à chaque fois (ou vous pouvez simplement le mettre à jour simultanément). ) accélère les choses, améliore la lisibilité du code et fait apparaître la structure de votre code CSS. 1965

Conseil n ° 3: Structurez votre projet avec InuitCSS

Vous pouvez penser à InuitCSS comme un cadre CSS. Même s'il ne vous fournit pas de composants d'interface utilisateur ou quelque chose du genre.

Au lieu de cela, InuitCSS vous aide à normaliser, configurer, homogénéiser et structurer vos feuilles de style.

Cela semble abstrait? Voyons comment cela fonctionne.

Commençons par installer InuitCSS avec npm install inuitcss --save . Il ne vous reste plus qu'à connaître la structure de répertoires CSS spécifique à InuitCSS qu’elle fournit et à la suivre pour définir la structure de votre projet:

• / settings : les variables globales, les paramètres du site et les configurations vont. Par exemple, au lieu de déclarer des variables de couleur dans chacune de mes feuilles de style, je les mets simplement et les organise dans un seul fichier sous ce dossier.

• / tools : Le dossier outils vous permet de définir votre projet mixins et fonctions, la plupart du temps, je l’utilise pour stocker le mélange Sass que j’utilise pour les requêtes multimédias réactives .

• / generic : Vous pouvez spécifier ici des paramètres bas. Règles de spécificité CSS, telles que normalize.css et réinitialisation des jeux de règles.

• / elements : Lorsque vous devez styliser des éléments HTML non classés tels que des liens, des pages, des images, des tableaux, etc., vous pouvez simplement créer un feuille de style dans ce dossier pour cela.

• / objects : Le dossier des objets est l'endroit où vous placez vos objets, abstractions et modèles de conception comme vos mises en page.

• / components : C’est là que se trouve le style des composants spécifiques de l’interface utilisateur. Honnêtement, je ne l'utilise jamais, simplement parce que je code mes projets avec Vue.js et qu'il utilise des composants de fichier unique.

• / utilities : Le dossier utilities est destiné à tous les sélecteurs très explicites et très spécifiques. comme les animations que vous devez utiliser dans votre projet.

C'est très chouette, je sais! 1965

Conseil n ° 4: utilisez des ensembles de données pour regrouper vos couleurs

Si vous utilisez des boucles Sass, je vous recommande vivement d’utiliser des ensembles de données, en particulier s’il s’agit de définir des couleurs.

Vérifions celle-ci en jeu en prenant les exemple de boutons sociaux. Comme vous pouvez probablement le deviner, les boutons sociaux (Facebook, Twitter, etc.) ont des couleurs différentes.

Donc, au lieu de devoir écrire ceci:

 $ c  :   ". bouton social "; 

 # {$ c}   {
	 frontière :  rien ; 
	 border-radius : [19659074] 4  px ; 
	 couleur :   $ white ; 
	 sélection utilisateur :  aucune ; 
	 curseur :  pointeur ; 

	

	 &  - facebook  {
		 contexte :   # 3b5998 ; 
	} 

	  &  - google  {
		 background :   # db4437 ; 
	} 

	  &  - messenger  ] {
		 background :   # 0084ff ; 
	}   

	 &  - twitter  {
		 background :   # 1da1f2 ; [19659085]} 
} 

Vous pouvez choisir une méthode plus élégante:

  $ c  :   ". C-social-button" ; 
  $ networks  :  facebook, google, messenger, twitter ; 
 $ socialColors  :   [
  facebook :   # 3b5998 [AZ90901]. ,
  google :   # db4437 ,
  messenger :   # db4437 ,
  twitter :   # 1da1f2 
 ) ; 
 # {$ c}   {
  frontière :  aucune  aucune . 
  border-radius :   4  px ; 
  couleur :   $ blanc ; 
  choix des utilisateurs  :  none ; 
  curseur :  pointeur ; 
  @each   $ réseau  sur  réseaux $   {
 & - #  { réseau }   {
  background :   map-get  ( $ socialColors 
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires