Emmet est l’un des plugins d’éditeur de texte les plus utiles que vous rencontrerez pour les développeurs. Il a la capacité apparemment magique de transformer un tout petit travail en une tonne de code, ce qui peut vous faire économiser un temps et des efforts incroyables à long terme.
Auparavant, nous avions examiné certaines des meilleures fonctionnalités d'Emmet du point de vue du langage HTML. Aujourd'hui, nous allons y ajouter quelques conseils sur la manière dont Emmet peut améliorer votre flux de travail CSS.
1. Abréviations Intuitives
Travailler avec Emmet en HTML est assez simple. Une fois que vous avez appris quelques concepts clés, vous pouvez vous débrouiller tout seul. Avec CSS cependant, il y a littéralement des centaines d'extraits à mémoriser. C’est génial d’avoir autant de fonctionnalités, mais comment peut-on tout prendre?
La bonne nouvelle est qu’Emmet utilise des abréviations complètement intuitives. En fait, dans la plupart des cas, la première abréviation que vous pensez essayer est correcte. Voici deux exemples:
Comme vous pouvez le voir, aligner le texte est raccourci à ta et largeur de la bordure est raccourci à bdw. De nombreuses abréviations sont même déclenchées par un seul caractère. Par exemple, z s'étend à z-index.
2. Ajouter des valeurs
Vous pouvez faire beaucoup plus avec Emmet que d’étendre les abréviations en propriétés. Par exemple, vous pouvez facilement jeter une valeur dans votre abréviation en utilisant la syntaxe du côlon.
Ici, :10 élargi à 10px et une élargi à auto. Vous pouvez également spécifier vos unités avec cette méthode en les jetant simplement à la fin. Notez que p est un joli raccourci pour%.
3. Recherche floue
Du point de vue des CSS, la meilleure fonctionnalité d’Emmet est appelée "recherche floue". Cela signifie que vous n'avez pas réellement besoin de connaître l'abréviation appropriée pour obtenir l'extension que vous recherchez. Vous pouvez littéralement faire chier, et dans la plupart des cas, Emmet est assez intelligent pour comprendre ce que vous essayez d'atteindre.
La recherche floue augmente considérablement l’utilité d’Emmet pour l’écriture de CSS. Cela vous permet d'oublier la syntaxe standard au profit de ce que vous préférez. Par exemple, j’utilise rarement un colon pour ajouter une valeur, mais plutôt quelque chose comme: m10, qui se développe dans marge: 10px.
4. Utilisez + pour les extras
Avec HTML, le? +? Le symbole est utilisé pour les relations fraternelles, mais en CSS, nous voyons qu'il est utilisé différemment. Ici, nous ajoutons + pour indiquer que nous voulons que Emmet inclue toutes les options supplémentaires incluses dans l’abréviation. Nous le voyons souvent lorsqu'il existe une version abrégée d'un ensemble de propriétés donné.
Ici vous pouvez voir que si nous élargissons simplement F, on a taille de police sans extras. Cependant, lorsque nous ajoutons le? +?, Nous obtenons un modèle pour le raccourci de la police. Ensuite, nous voyons cette même idée en action avec le raccourci de la frontière.
Vous pouvez utiliser le symbole plus avec des images d'arrière-plan, @ font-face, text-outline, text-shadow, etc.
5. Préfixes du vendeur
La haine de taper tous ces préfixes de fournisseurs ennuyeux? Moi aussi. Heureusement, Emmet vous a couvert. Tapez une propriété CSS précédée d'un trait d'union et elle sera automatiquement étendue pour inclure tous les préfixes pertinents.
Vous pouvez effectuer cette action sur presque tout ce que vous voulez. Par exemple, si vous tapez ? -designshack?, il sera étendu à -webkit-designshack, -moz-designshack, etc.
6. Dégradés
La syntaxe dégradée est nulle, nous le savons tous. Il a changé et évolué trop de fois pour compter, il a traversé toutes les combinaisons possibles de complexité et de simplicité, et vous devez non seulement tenir compte de tous les préfixes, mais également d'au moins deux versions différentes de la version de -webkit.
Une fois encore, Emmet se précipite pour sauver la journée. Vous pouvez économiser beaucoup de frappe en utilisant la syntaxe unique de dégradé abrégé d'Emmet, qui s'étendra à l'énorme morceau de code dont vous avez besoin. Vous pouvez en lire plus à ce sujet et l'essayer ici.
Essayez-les!
Maintenant que vous connaissez plusieurs astuces CSS à essayer avec Emmet, il est temps de les essayer. Consultez notre page de démonstration Emmet et essayez quelques-unes des abréviations décrites plus haut. Assurez-vous également de consulter la page d'accueil d'Emmet, où vous pourrez en apprendre davantage et l'essayer vous-même immédiatement.
Comment développer les abréviations?
L'expansion peut être différente dans chaque éditeur et nécessite généralement un plugin. Dans Sublime Text 2, ouvrez le Gestionnaire de paquets, recherchez Emmet, installez-le, puis redémarrez l'application. Pour déclencher une expansion, appuyez simplement sur languette après avoir tapé une abréviation.
Partagez vos macros CSS Emmet préférées
C’est ma liste personnelle de fonctionnalités CSS Emmet préférées. Il est temps de vous lancer dans la conversation et de partager la vôtre. Laissez un commentaire ci-dessous et répertoriez les fonctionnalités CSS auxquelles vous vous adressez le plus dans Emmet.