Existe-t-il une bonne et une mauvaise façon de formater les CSS ?

Question

Lorsque j'ai commencé à écrire des CSS, je les écrivais sous une forme étendue

div.class {
    margin:      10px 5px 3px;
    border:      1px solid #333;
    font-weight: bold;
    }
    .class .subclass {
        text-align:right;
        }

mais maintenant je me retrouve à écrire du css comme ceci : (Exemple de code que j'écris actuellement)

.object1 {}
    .scrollButton{width:44px;height:135px;}
        .scrollButton img {padding:51px 0 0 23px;}
.object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;}
    .featuredObject .symbol{line-height:30px; padding-top:6px;}
    .featuredObject .value {width:90px;}
        .featuredObject .valueChange {padding:5px 0 0 0;}
        .featuredObject img {position:absolute;margin:32px 0 0 107px;}

et je commence à m'inquiéter parce que je vois souvent la première forme réalisée dans des exemples en ligne, alors que je trouve la deuxième forme beaucoup plus facile pour moi de travailler avec. Elle a une hauteur verticale plus faible, ce qui me permet de voir toutes les classes d'un seul coup d'œil avec moins de défilement, la tabulation de la hiérarchie semble plus apparente, et elle ressemble davantage à du code que j'écrirais avec javascript ou html. S'agit-il d'une façon valide de faire du code ou, pour respecter les normes de mise en ligne, devrais-je plutôt utiliser le formulaire vertical ?

Answer 1

Eh bien, voici ce que je dis le plus :)

résumé : css-tricks.com a fait un sondage. Par une marge d'environ 3 contre 1, la plupart des gens préfèrent les styles css multi-lignes aux styles monolignes.

Answer 2

Je préfère personnellement le premier style. J'aime les choses faciles à lire et le défilement ne me dérange pas. La densité du second style ralentit ma lecture et ma capacité à sélectionner les éléments qui m'intéressent.

Il y a certainement des compromis à faire avec CSS en raison de la taille des fichiers. Les CSS peuvent être compressés. Je trouve que la taille des fichiers CSS est le dernier de mes soucis avec les sites que j'ai construits jusqu'à présent.

En fin de compte, l'important est de rester cohérent, quel que soit le style que vous choisissez d'utiliser. Cette cohérence vous simplifiera la vie lorsque vous devrez mettre à jour votre CSS ou lorsqu'un autre développeur devra le faire.

Answer 3

Indiquer la hiérarchie en utilisant l'indentation n'est pas une mauvaise idée. Cependant, vous devez faire attention à ne pas vous tromper vous-même. Dans votre exemple, vous pouvez supposer que .scrollButton se trouve toujours dans .object1. Mais CSS n'obéit pas à cette règle. Si vous utilisiez une classe .scrollButton en dehors de .object1, elle obtiendrait quand même les styles.

Answer 4

Je ne sais pas pour vous, mais je préfère le mode vertical pendant le développement, car il est beaucoup plus facile à lire pour moi.

Cependant, dans le cas de prod, vous voulez compresser votre css pour réduire la charge utile et donc, le deuxième style a du sens. La plupart du temps, vous utiliserez un compresseur CSS pour faire cela.

Answer 5

J'aime écrire les css en plusieurs lignes. parce que c'est plus facile à écrire et à lire. nous pouvons trouver les erreurs le plus tôt possible et un regard de vue est agréable avec l'indentation. la plupart du temps quand un designer travaille avec les css et donne au développeur pour développer le site que le développeur peut comprendre facilement. Je pense donc que le css multi-lignes est la meilleure façon de travailler.