Gibt es eine richtige und falsche Art CSS zu formatieren?

Question

Als ich die erste CSS zu schreiben begann, war ich es in einer erweiterten Form zu schreiben

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

aber jetzt finde ich mich css wie folgt zu schreiben: (Beispiel von Code, den ich jetzt eigentlich schreiben)

.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;} 

und ich fange an, mir Sorgen zu machen, weil ich oft die erste Form in Beispielen online sehe, während ich die zweite Form für mich leichter finde. Es hat eine niedrigere vertikale Höhe, so dass ich alle Klassen auf einen Blick mit weniger Blättern sehen kann, die Tabellierung der Hierarchie scheint mehr offensichtlich, und es sieht eher aus wie Code, den ich mit Javascript oder HTML schreiben würde. Ist dies eine gültige Art, Code zu schreiben oder mit Standards zu arbeiten, wenn ich es online stelle, sollte ich stattdessen das vertikale Formular verwenden?

Answer 1

Ich persönlich bevorzuge den ersten Stil. Ich mag Dinge, die leicht zu lesen sind und es macht mir nichts aus zu scrollen. Die dichte Natur des zweiten Stils verlangsamt mein Lesen, meine Fähigkeit, die Artikel auszuwählen, die mich interessieren.

Es gibt sicherlich Kompromisse mit CSS wegen der Dateigröße berücksichtigt werden. CSS kann komprimiert werden. Ich finde die Größe der CSS-Dateien mit den Seiten, die ich bisher erstellt habe, die geringste Sorge.

Letztendlich ist die wichtige Sache, dass welcher Stil Sie verwenden möchten, konsistent zu sein. Diese Konsistenz wird Ihr Leben einfacher machen, wenn Sie Ihr CSS aktualisieren müssen oder wenn ein anderer Entwickler Ihr CSS aktualisieren muss.

Answer 2

Well, here is what say the most :)

Zusammenfassung: css-tricks.com lief eine Umfrage. Mit einer Marge von etwa 3 zu 1 bevorzugten die meisten Leute mehrzeilige gegenüber einzeiligen CSS-Stilen.

Answer 3

Ich weiß nicht über dich, aber ich mag den vertikalen Modus während des Entwickelns, da es für mich viel einfacher zu lesen ist.

Allerdings, in Prod, möchten Sie Ihre CSS komprimieren, um die Nutzlast zu reduzieren und daher macht der zweite Stil Sinn. Meistens würden Sie dazu einen CSS-Komprimierer verwenden.

Answer 4

ich schreibe gern css in multi line. weil das einfacher zu schreiben und zu lesen ist. wir können Fehler so früh wie möglich finden und ein Aussehen der Ansicht ist schön mit Einrückung. vor allem, wenn ein Designer mit CSS arbeitet und dem Entwickler erlaubt, die Site zu entwickeln, als der Entwickler leicht verstehen kann. so denke ich, Multi-Line-CSS ist der bessere Weg zur Arbeit.

Answer 5

Die Angabe der Hierarchie mit Einzug ist keine schlechte Idee. Sie sollten jedoch darauf achten, dass Sie sich nicht selbst betrügen. In Ihrem Beispiel können Sie davon ausgehen, dass sich .scrollButton immer innerhalb von .object1 befindet. Aber CSS folgt dieser Regel nicht. Wenn Sie eine .scrollButton-Klasse außerhalb von .Objekt1 verwendet haben, werden immer noch die Stile abgerufen.

Answer 6

Ich bevorzuge den zweiten Stil, aber sei dir bewusst, dass es ein Stil ist. Auf die gleiche Art und Weise, dass einige Leute

function (arg) 
{ 

    body(); 

} 

zu

function(arg){ 
    body(); 
} 

bevorzugen bekomme ich es nicht, mich. Das Argument lautet: "Es ist einfacher zu lesen", und meine Antwort lautet konsequent "... für dich".Als Anmerkung habe ich das Gefühl, dass dies der Grund ist, warum so viele Beispiele die more-whitespace-Version verwenden; es hat den Ruf (wenn nicht bestätigtes Eigentum), leichter lesbar zu sein.

Wählen Sie die, die Sie mögen und bleiben Sie dabei. Wenn Sie ein Team haben, mit dem Sie zusammenarbeiten können, versuchen Sie, zu einem Konsens zu kommen, oder schreiben Sie ein paar automatische Formatierungsskripte und halten Sie sich gegenseitig aus dem Weg. Es ist nicht so furchtbar schwierig, den einen mechanisch in den anderen zu verwandeln.

Answer 7

Der Stil, in den Sie schreiben, ist Ihre Wahl (ich bevorzuge Multiline), aber wie Rajat sagte, dass Sie alle zusätzlichen Leerzeichen nach dev entfernen möchten. Immer wenn Sie Dateigröße und Nutzlast reduzieren können, tun Sie Ihrer Website und Ihren Besuchern einen Gefallen.

Answer 8

Ich denke, es hängt auch von Ihrem Editor. Ich benutze mehrzeilige Formatierung und verdichte jede Definition mit Vim's Faltung (ich setze Faltmarkierungen auf { und }), so bekomme ich ein Tag/Klasse/ID pro Zeile, erweiterbar wenn nötig.

Mithilfe von Kommentaren, um "Abschnitte" zu identifizieren, erhalte ich ein sehr sauberes Aussehen mit minimalem vertikalem Scroll, während die Lesbarkeit von mehrzeiligen Linien bei erweiterten Definitionen erhalten bleibt.

Answer 9

Ich möchte nur darauf hinweisen, dass Textmate über eine Option verfügt, mit der Sie ganz einfach zwischen diesen beiden Stilen wechseln können, indem Sie einen Bereich auswählen und STRG-Q/STRG-ALT-Q zum Erweitern/Reduzieren drücken. Als Konsequenz habe ich festgestellt, dass ich es vorziehe, dass mein CSS kollabiert, wenn ich nicht gerade einen bestimmten Abschnitt schreibe oder tiefer debugge. Aber mit der Fähigkeit, leicht zwischen den beiden zu wechseln, sehe ich, dass beide Wege für verschiedene Umstände nützlich sind.

Answer 10

Ich bevorzuge Multiline bis wir bereitstellen. An diesem Punkt möchte ich, dass es minimiert wird.

Answer 11

Ich persönlich finde beide Beispiele schwer zu lesen, besonders die zweite.

Mehrzeilig ist einfacher zu folgen, und Einrückung kann irreführend sein, da CSS nicht unbedingt auf diese Weise angewendet wird. Ihre Einrückung kann Sie glauben machen, dass es ist.

Ich ziehe die grundlegende bewährte Methode der Multi-line, mit vertretbarer/logischer Reihenfolge:

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

nimmt einen wenig mehr Platz in Anspruch und erfordert ein wenig Scrollen in nehmen, aber es ist leicht zu folgen . Diejenigen, die sich Sorgen um Optimierung machen, können CSS-Schrumpfwerkzeuge für CSS-Produktionsdateien verwenden.

Am Ende so lange wie Sie sind sehr konsistent mit Ihrer Arbeit und über ein Team (wenn zutreffend) dann ist keine Antwort richtiger.

Answer 12

Vielleicht, wenn Sie mehrere Selektoren und eine Regel haben, wie folgt aus:

#header li a, #header li span { 
    display:inline-block; 
} 

So ziehe ich es zu tun:

#header li a, 
#header li span { 
    display:inline-block; 
} 

Answer 13

Ich habe immer diesen Stil gefallen:

#something1 { 
    color   : #ffffff; 
    background  : #000000; 
} 

#something2 { 
    color   : #000000; 
    background  : #ffffff; 
} 

Aber yo beantworten Sie Ihre Frage: Solange es auf die gleiche Weise funktioniert, gibt es keinen "richtigen" oder "besten" Weg Formatiere deinen Code. Verwenden Sie einen Stil, mit dem Sie sich wohl fühlen.