Tri et organisation de CSS à l'aide de CSSComb

Comparé à d'autres langages liés au Web, CSS est relativement simple et facile à écrire . Mais en même temps, il est également difficile à organiser, en particulier lorsqu'il s'agit de codes composés de milliers de lignes.

Ce serait bien si nous pouvions organiser CSS et faciliter la lecture et la maintenance des codes par les autres développeurs, ce qui est utile si vous travaillez en équipe.

Dans ce post, nous allons vous montrer comment trier et organiser CSS en utilisant un outil appelé CSSComb . Mais d'abord, jetons un coup d'œil à un court exemple sur la commande de propriétés CSS.

Techniquement, CSS n'a aucune restriction quand il s'agit de commander des propriétés. L'exemple suivant ...

 .class {background-color: # f3f3f3; largeur: 100px; hauteur: 100px; font-color: # 000; } 

... produira le même résultat que le suivant:

 .class {width: 100px; font-color: # 000; couleur de fond: # f3f3f3; hauteur: 100px; } 

Mais comme nous l'avons mentionné précédemment, être organisé aidera vos coéquipiers à maintenir facilement vos codes. Le tri des codes CSS, cependant, nécessite beaucoup de couper et coller, et des réflexions sur la façon de le commander. Et c'est là que CSSComb est utile.

Comment utiliser CSSComb

CSSComb est un utilitaire de tri pour CSS qui est construit par Slava Oliyanchuk . CSSComb prend en charge CSS2 à CSS4, et est disponible dans de nombreux éditeurs de code populaires tels que TextMate, Coda, Notepad ++ et Sublime Text, en tant que plugin ou extension.

Si vous utilisez Sublime Text, CSSComb peut être facilement installé via le contrôle de paquet. Une fois installé, vous pouvez trier les propriétés CSS de plusieurs façons:

• Appuyez sur la combinaison de touches par défaut: Maj + Ctrl + C.
• Cliquez avec le bouton droit de la souris et sélectionnez: Trier via l' option CSSComb .
• Ouvrez la palette de commandes - Commande + Maj + P et sélectionnez Trier par CSSComb .

Dans cet exemple, nous avons la règle de style suivante.

 .class {padding-top: 1px; border-left: 1px solide #fff; -moz-box-shadow: 0 0 1px 0 # 000; -webkit-box-shadow: 0 0 1px 0 # 000; box-shadow: 0 0 1px 0 # 000; border-right: 1px solide #fff; hauteur: 23px; rembourrage-fond: 10px; background-color: #fff; } 

La règle de style ci-dessus fonctionne, et il n'y a rien de mal à cela, sauf que c'est un peu désorganisé. Maintenant, après l'exécution de CSSComb, les propriétés sont triées dans l'ordre suivant.

 .site-header> .container {padding-top: 1px; rembourrage-fond: 10px; hauteur: 23px; border-right: 1px solide #fff; border-left: 1px solide #fff; background-color: #fff; -webkit-box-shadow: 0 0 1px 0 # 000; -moz-box-shadow: 0 0 1px 0 # 000; box-shadow: 0 0 1px 0 # 000; } 

Ci-dessus est la règle de classement par défaut dans CSSComb, mais si vous ne voulez pas la commander comme cela, vous pouvez personnaliser la commande en allant dans le menu Préférences> Paramétrage du paquet> CSSComb et définir une nouvelle règle de commande sous Ordre de tri. - Utilisateur .

Remarque : Si vous utilisez un éditeur de code qui n'a pas l'extension ou le plugin, CSSComb est également disponible en tant qu'outil Web.

8 conseils simples pour atteindre une productivité maximale

Productivité maximale - quelque chose que tout le monde veut atteindre mais si peu parviennent à atteindre . Raison d'être, la quasi-totalité d'entre nous tergiverser à différents niveaux; des étudiants aux employés aux pigistes, et même aux femmes au foyer. Le fait est que vous pourriez finir par faire «une partie» de votre travail, mais atteindre votre «productivité maximale» serait encore une vague notion.Eh bien, arrê

(Conseils techniques et de conception)

La vérité sur la vie en tant que nomade numérique

Au fil des ans - grâce à l'avènement de la communication en ligne - un nouveau type de professionnel a émergé: le «nomade numérique». Les nomades numériques sont des individus dont la routine quotidienne est de bouger, de voyager et d'essayer de nouvelles choses .Ils n'ont besoin que d'un ordinateur portable et d'une connexion Internet pour pouvoir travailler pratiquement n'importe où dans le monde: sur le sable d'une plage tranquille d'une île exotique, d'un restaurant renommé ou même d'une chambre d'hôtel à l'autre bout du monde. Pour beaucoup

(Conseils techniques et de conception)