Ich habe eine neue Umfrage gestartet (in der Seitenleiste der Website, für RSS-Nutzer) darüber, wie Sie Ihre CSS-Eigenschaften ordnen. Zum Beispiel
Zufällig
.module {
border: 1px solid #ccc;
width: 25%;
padding: 20px;
position: relative;
min-height: 100px;
z-index: 1;
border-radius: 20px;
}
Alphabetisch
.module {
border-radius: 20px;
border: 1px solid #ccc;
min-height: 100px;
padding: 20px;
position: relative;
width: 25%;
z-index: 1;
}
Nach Typ gruppiert
.module {
width: 25%;
min-height: 100px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
z-index: 1;
}
Leerzeichen nur zur Betonung.
Nach Länge
.module {
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
min-height: 100px;
padding: 20px;
z-index: 1;
width: 25%;
}
Andere
Wenn Sie andere Möglichkeiten der Sortierung haben, teilen Sie sie in den Kommentaren mit! Es ist zu spät, sie zur Umfrage hinzuzufügen, aber nicht zu spät, um sie zu teilen.
Da ich hauptsächlich mit SCSS code, neige ich dazu, zuerst Blockstile und dann Positionierung danach, falls nötig, zu machen, es liest sich einfach leichter, obwohl ich in der Produktionsumgebung, in der ich arbeite, meistens zufällig vorgehe, um die Arbeit schneller zu erledigen, da ich die einzige bin, die die SCSS-Version in unserem Büro lesen wird. Wenn ich CSS direkt für Bearbeitungen oder Anpassungen an aktuellen Websites verwenden muss, mache ich definitiv zufällig, aber wir verwenden Single-Line-CSS, nicht Multi-Line, für uns ist es visuell einfacher, das zu finden, was wir suchen, in Single-Line-CSS. Als ich gerade CSS lernte, war ich ein Anhänger des Gruppierens und des schönen Aussehens meines CSS, aber als es in die Hände eines anderen hier kam, wurde es ruiniert. lol.
Zufällig, aber ich habe das Gefühl, dass sich das ändern wird, sobald ich die Ergebnisse dieser Umfrage sehe.
Kaidez, genau meine Situation. :-D
P@tty
Ich beginne immer mit display / float / position / top / left.
Dann Breite/Höhe/Abstand/Rand
Dann Text / Farbe / Textausrichtung / Schriftgröße / …
Dann Rahmen / Hintergrund
Und zuletzt, Präfix-Anweisungen wie Schatten, Radius, Animation, Transformation …
Ich mache das Gleiche, außer dass die Schriftformatierung nach Rahmen/Hintergrund kommt.
Fast genau das. Positionierung > Größe/Rand/Abstand > Erscheinungsbild-Elemente > Hintergrund > Rahmen > Präfix-Elemente.
Ich auch, wie Rémi und Bill.
Ja, ich mache genau das.
Normalerweise lasse ich eine Leerzeile zwischen jeder Gruppe, um sie leichter lesbar zu machen.
+1 für den „von außen nach innen“-Ansatz.
Ich habe oft mit einem Kollegen zu kämpfen, der denkt, dass alphabetisch logischer ist.
Ich neige auch dazu, CSS3 nach unten zu legen…
Mike Kretz, ich mache genau das Gleiche.
Fast das Gleiche für mich. Und auch CSS3-Sachen ganz unten wegen der vielen Browserpräfixe.
Im Grunde das. Da wir Sachen mit Präfix versehen haben, bin ich auch zu den Leerzeilen zwischen den Gruppen übergegangen.
Ich mache das Gleiche. Es macht es einfach, Dinge schnell später zu finden.
Dasselbe hier. Obwohl ich nicht fanatisch auf die Reihenfolge achte, habe ich doch zwei deutliche Gruppen: Zuerst alle blockartigen Eigenschaften, dann die zweite Gruppe besteht aus Dekorationen und Textstilen.
@Remi Dasselbe hier. Ich finde, dass ich Deklarationen schnell wiederfinde, wenn ich meinen Code in Zukunft wieder aufrufe, wenn sie nach Typ gruppiert sind. Ich alphabetisiere normalerweise auch innerhalb dieser Gruppen.
Ja, dasselbe hier. Ich mache normalerweise Rand/Abstand vor Breite / Höhe, obwohl das vielleicht nicht am genauesten ist, wenn man das Standard-Boxmodell bedenkt.
Wow, ich auch! Nur ein bisschen anders.
Positionierung > Größe/Hintergrund > Rand/Abstand > Erscheinungsbild-Elemente > CSS3
Alphabetisch bis zum Ende! Es ist um ein Vielfaches einfacher, Eigenschaften zu finden, wenn man etwas ändern muss!
Ich mache genau das Gleiche, obwohl meine Schrift-/Textstile nach dem Rahmen/Hintergrund kommen. Dies steht im Einklang mit der von Guy erwähnten „von außen nach innen“-Regel.
Die einzige Ausnahme ist, dass ich manchmal line-height direkt nach height setze, da ich möchte, dass diese Werte normalerweise gleich sind.
Das.
Ja, mit der Positionierung zu beginnen und zu den Dimensionen überzugehen und dann schließlich zu den Inhalts- und Spezialstilen ist schon immer der richtige Weg für mich gewesen.
..manchmal mache ich zuerst Dimensionen und dann Positionierung, aber selten.
Wirklich, es geht darum, was intuitiv ist, wenn man die CSS-Deklaration liest und sich das Element vorstellt.
Ich auch! Und dann ist aus irgendeinem Grund z-index immer zuletzt.
Seien Sie erstaunt.
Ich auch!
Ja, im Grunde diese Reihenfolge
Ein weiteres „dasselbe hier“ von mir. Ich fange gerade erst an, mein CSS zu sortieren, obwohl... bis vor ein paar Monaten war es zufällig.
Fast so wie Mike Kretz es macht, nur dass ich die Präfix-Anweisungen nicht trenne.
Sieht so aus, als hätten viele Leute diese ungefähre Sortierung unabhängig voneinander gewählt (mit kleinen Variationen).
Fast das Gleiche: Positionierung, Größe, Hintergrund, Schrift, Abstand-Rand-Rahmen, „Präfixe“ und Animationen, Zubehör (d.h. Cursor), Anzeige
nie zufällig gewesen
:)
Ich bin ähnlich. Position, Struktur, visuell, dann Typografie, falls nötig. Wenn ich CSS3-Teile habe, landen diese immer ganz unten.
Was die Arbeit im Code anderer Leute angeht, ich jage immer Dinge in Firebug, daher ist die Reihenfolge, in der sie Dinge deklarieren, keine große Sache.
Dieser Ansatz schien mir auch immer am natürlichsten.
Dasselbe wie Mike Kretz, auf einer einzigen Zeile. Es erschien mir immer intuitiv, aber all die Antworten zu sehen bestätigt, wie offensichtlich intuitiv es ist.
Nach Typ gruppiert – beginnend mit Schrift, dann Messungen für Breite/Höhe/Abstand/Rand, dann der Rest, endend mit langen CSS3-Deklarationen
Dasselbe hier – Schrift, Größe, Sonstiges und dann die lustigen Sachen wie Übergänge oder Transformationen. Wenn ich in SCSS schreibe, stehen extends und includes jedoch zuerst.
Ich habe mich immer gefragt, ob es einen Best-Practice-Ansatz gibt. Anscheinend ist es nur persönliche Vorliebe.
Nach Typ, aber alphabetisch nach Typ.
Ich mache dasselbe wie Sie.
Dasselbe hier!
Eine Kombination aus Länge und Typ. Ich liebe performanten Code, aber ich bin auch zwanghaft, also hier haben Sie es...
Zwanghaft.
Alphabetisch – weil es einfacher ist, etwas zu finden.
Das. Macht mal mit, Leute.
100% zustimmen!
Das ist meiner Meinung nach der beste Weg. Es ist der einzige Weg, Regeln schnell und einfach zu finden, egal wer sie geschrieben hat.
Es sei denn, es wird jemals eine branchenweit kanonisierte Methode zum Gruppieren nach Typ geben, die *alle* Entwickler konsistent befolgen können, dann wird das Gruppieren nach Typ einfach zu einem Latenz-Zirkus, da Entwickler, die diese Methode anwenden, sie selten selbst auf die gleiche Weise anwenden, geschweige denn untereinander.
Ich glaube einfach nicht, dass das alphabetische Sortieren von Eigenschaften viel Wert hat ... es sollte nicht so viele Eigenschaften geben, dass das Finden von etwas alphabetisch einen großen Einfluss hat ... aber ich kann mich leicht irren ... ich habe meine nie alphabetisch sortiert, also sind Sie vielleicht auf etwas gestoßen.
@Jordan – Der Unterschied ist riesig. Wenn Sie in Teams arbeiten und oft in bestehende Projekte einsteigen, die von jemand anderem erstellt wurden, müssen Sie raten, welche Art von Organisation sie verwenden. Es kann eine Sekunde bis über eine Sekunde zum Scannen und Verstehen dauern.
Mit alphabetischer Reihenfolge wissen Sie genau, wie jede Stileigenschaft organisiert ist, und es spart Zeit und mentale Energie, indem Sie nicht scannen müssen, wonach Sie suchen. Es gibt Ihnen die Freiheit, sich darauf zu konzentrieren, „was will ich tun?“ statt „wo ist das, was ich tun will?“ oder sogar „wo platziere ich das, was ich tue?“.
Alphabetisch zur Verbesserung der gzip-Kompression. Dasselbe mit Selektoren. Ich gruppiere auch Selektoren, damit eine bestimmte CSS-Eigenschaft nie wiederholt wird.
Alphabetisch, aber bei Bedarf nach Typ. Zum Beispiel gruppiere ich die Eigenschaften oben, links, rechts und/oder unten direkt nach der Positionseigenschaft – das ergibt etwas mehr Sinn.
Rand und Abstand gehen immer als Block.
Ansonsten ist alles andere nach Position sortiert. Ich mache nicht wirklich Präfixe, da dies leicht mit prefixfree.js behoben werden kann :)
Dasselbe bei mir
Alphabetisch. Manchmal mache ich mir Sorgen, dass ich es *falsch* mache, aber ich kann mir nicht vorstellen, es anders zu machen.
Zufällig bei mir.
Nach Typ, natürlich! Menschen denken oder arbeiten nicht alphabetisch.
Ja, genau meine Meinung :)
Nach Typ und aus Gewohnheit. Ich habe nie damit angefangen, es ist einfach im Laufe der Jahre natürlich passiert. Ich würde annehmen, dass es, wenn ich pedantisch genug wäre, um es alphabetisch zu machen, die Zeit, die zum Schreiben von Stilen benötigt wird, um den Faktor 4 erhöhen würde.
Zufällig, aber zufällig ergibt sich meist eine teilweise Ordnung nach Typ.
Ich hatte nie Probleme, Eigenschaften zu lesen, weil es zu viele gab.
Ich folge normalerweise dem Fluss... Je mehr ich versuche, mich auf die Gruppierung zu konzentrieren, desto weniger kreativ werde ich. Daher mache ich es zufällig und es ergibt sich irgendwann in einer teilweisen Gruppierung. Ich neige jedoch dazu, mein CSS3 ganz am Ende zu platzieren.
Zufällig, aber ich fange immer mit Breite und Höhe an. Andere Dinge folgen zufällig :)
Zufällig :)
Nach Typ
* generierter Inhalt (falls generierter Inhalt vorhanden ist, damit Sie ihn direkt sehen können, wenn Sie :before/:after nicht sehen können)
* display
* position
* Box-Eigenschaften (Breite/Höhe, Abstand/Rand und Rahmen)
* Positionseigenschaften (oben, rechts, unten, links)
* Hintergrund-Eigenschaften
* Schrift-Eigenschaften
* Sonstiges (Deckkraft, Übergang usw…)
+1, bis ganz nach unten. Obwohl ich zugeben muss, dass z-index und zoom (IE hat Layout-„Hack“) bei mir oft zuletzt kommen. Ich schätze, ich kann den Drang, alphabetisch zu sortieren, nicht ganz ablegen…
Ooh, eigentlich sollte ich das korrigieren. Ich setze normalerweise einzelne Positionseigenschaften direkt nach float & positioning, **dann** gefolgt von Box-Eigenschaften (natürlich von außen nach innen).
Wir haben uns hier für alphabetische Reihenfolge entschieden, da das Entwicklerteam keine konsistente Methode zur Gruppierung nach Typ beibehalten konnte – und die Reihenfolge, in der dies geschehen soll usw. Es ist eine gute Methode, aber wenn mehrere von uns an einem Projekt arbeiten, ist es einfacher, eine Eigenschaft zu scannen und zu finden, wenn sie alphabetisch ist.
Ich beginne mit der Struktur, z.B.
#something-short-but-semantic { display:block; position:absolute width: 98%; top:50px;dann vielleicht etwas Styling
Dann die Schrift-Sachen
außer... geschrieben in SCSS .. also, ein bisschen komplizierter.
Im Team verwende ich die Konvention, die der Rest des Teams verwendet.
Für persönliche Projekte gruppiere ich nach dem, was oben relevant ist.
Inline-Elemente beziehen sich normalerweise auf Typografie.
Block-Elemente beziehen sich normalerweise auf Anzeige, Größe und Position.
section { width: 80%; margin: 0 auto; display: block; position: relative; float: left; background:badca7; border: 1px solid #bada55; }Ich bin wahrscheinlich verrückt, aber das funktioniert für mich.
Ich schreibe mein CSS zuerst zufällig, aber wenn es in mehr Eigenschaften übergeht, gruppiere ich sie für leichteren Zugriff auf verwandte Eigenschaften, wenn es soweit kommt, dass ein einzelnes Element mehr als 5 Eigenschaften hat.
Seit etwa 4 Jahren bin ich ein A-Z-Mann. Es hat einige Zeit gedauert, bis ich mich eingewöhnt hatte, aber nachdem ich es eine Weile gemacht habe, wurde es zur zweiten Natur. Ich fühle einfach, dass ich immer weiß, wo die Dinge sind, was mich schneller macht.
Ich nehme an, das Gehirn eines jeden Menschen funktioniert anders, also ist das, was für Sie am besten funktioniert, das Beste. Ich würde jedoch gerne eine Studie oder etwas über die Auswirkungen von etwas wie diesem sehen.
Ich habe „nach Typ“ gewählt, obwohl das Beispiel nicht dem entspricht, was ich für „nach Typ“ halte. Ich sortiere es so:
Einige interessante Punkte
– Positionseigenschaften werden so sortiert, wie Randwerte sortiert werden (oben, rechts, unten, links)
– Alle Präfix-Eigenschaften stehen ganz unten, jede in ihrer eigenen Gruppe
– Zuerst die inneren Stile (Hintergrund, Abstand) und dann die äußeren (Rand, Rahmen) und dann die äußeren äußeren (wie Outline).
PS: Die seltsamen Einrückungen sind ein Fehler in diesem Kommentarsystem.
Ich mache
Floats, Clears, Position, Oben/Unten/Links/Rechts, Breite, Höhe
Text, Zeilenhöhe, Schriftformatierung
Anzeige, Cursor usw.
Border
Hintergrund
CSS3-Eigenschaften (Box-Schatten, Text-Schatten usw.)
Ich habe jahrelang alphabetische Reihenfolge verwendet, weil ich dachte, es sei einfacher zu scannen und eine bestimmte Eigenschaft zu finden, aber ich neige dazu, sie nach Typ zu gruppieren, besonders seit ich Sass verwende (Display/Box-Modell/Positionierung, Farben, Schriften, Sonstiges).
Das Problem bei der Gruppierung nach Typ ist, dass es keine Regeln gibt, sodass man seine eigenen schreiben muss, besonders wenn man mit einem Team arbeitet.
Zufällig bei mir, aber manchmal fasse ich verwandte Stile zusammen, so ähnlich wie Wouter J.
Ich denke, ich wechsle dazu. Logisch. Leicht zu erklären.
Ich ordne sie normalerweise nach Priorität in meinen Augen. Zum Beispiel würde ich technische Struktur über Look and Feel priorisieren. Display, Breite, Höhe, Position, Rand und Abstand wären wichtiger als Farbe, Schrift, Hintergrund usw.
Es funktioniert einfach für mich, aber öfter als nicht geht jeglicher Ordnungssinn verloren, aber ich versuche, alles so gut wie möglich organisiert zu halten.
.module {
display: block;
width: 100%;
height: 300px;
position: fixed;
top: 0;
left: 10px;
margin: 10px 5px;
padding: 20px 30px;
color:#fff;
background: #333 url(‘blah.gif’) repeat-x top;
}
Obwohl es kurzfristig länger dauern kann, da es sehr verlockend ist, es so durcheinander zu schreiben, wie es normalerweise aus dem Kopf kommt, spart es Zeit in Zukunft, wenn man Änderungen und Anpassungen vornimmt.
Scott
Völlig zufällig, aber ich stelle sicher, dass sie nicht padding-links, -rechts und durch 0 0 0 0 sind
Was rendert schneller?
Das ist wichtiger als das Aussehen.
Ich glaube nicht, dass die Reihenfolge der Eigenschaften einen Unterschied bei der Ladegeschwindigkeit macht.
Aber wir können einen Test machen…
Ich hatte die Renderzeit im Sinn, nicht die Ladegeschwindigkeit. Ein Test wäre großartig.
Übrigens, ich bin es gewohnt, es alphabetisch zu sortieren.
Ich habe schon lange kein direktes CSS mehr geschrieben, ich benutze meist SASS, aber ich ordne Eigenschaften immer alphabetisch, weil ich es einfacher finde, sie zu scannen und zu finden.
Ich verwende die von Raphael Goetter gelernte Reihenfolge: http://blog.goetter.fr/post/14503308074/ordonnez-vos-declarations-css, mit einem von mir erstellten Tool: http://csslisible.com
Im Wesentlichen zufällig, aber mit etwas Gruppierung.
Neue Blöcke werden mit dem Ziel der Gruppierung von Typen erstellt, wie im Beispiel gezeigt, aber neue Ergänzungen, während die CSS-Datei entwickelt wird, respektieren selten die anfängliche Reihenfolge. Neue Ergänzungen zu einer Regel werden also unten platziert, dies ergibt eine geordnete obere Hälfte und eine ungeordnete untere Hälfte ... also zufällig.
Also, wie wählt man? Wenn ich jemals den Luxus der Zeit hätte, ein CSS-Projekt zu refaktorisieren, würde ich geordnet vorgehen. Aber die pragmatische Realität ist zufällig.
Realität siegt, ich habe zufällig gewählt.
Was Sie als „zufällig“ zeigen, ist nicht wirklich zufällig. Es ist wahrscheinlich eher wie die laufenden Credits am Ende eines Films. Das heißt, Stile werden in der Reihenfolge ihres Erscheinens hinzugefügt.
Alphabetisch.
Firebug und Chrome Dev Tools sortieren es so. Wenn man in großen Teams arbeitet, ist es schön, den Graubereich zu entfernen, den die Sortierung nach Typ erzeugt.
Ich stimme vollkommen zu. Tools wie Firebug und integrierte Entwicklertools zeigen es „berechnet“ in alphabetischer Reihenfolge an. Viel einfacher zu referenzieren, wenn meine Debugging-Tools mit meinem Stylesheet-Layout übereinstimmen. Zu viel Meinung kann in die Priorisierung von Eigenschaften eingebracht werden.
aus demselben Grund hier. Besonders wenn ich Änderungen in Firebug vornehme und sie dann in meine CSS-Datei zurückkopiere und sie dann an GIT committe, ist es einfacher, die Änderungen zu sehen (die Zeilen ändern ihre Position nicht).
Dasselbe hier! Ich bearbeite mit Firebug und kopiere es dann in meine Datei. Nachdem ich fertig bin, füge ich browser-spezifische Syntax unten hinzu.
Ich schreibe mein CSS in Firebug, danach kopiere/füge ich es in die .css-Datei ein, also ist meine Reihenfolge alphabetisch, es ist schneller, denke ich, weil man die Seite nicht neu laden muss, um Änderungen vorzunehmen.
Alphabetisch.
Ich habe gehört, dass wiederkehrende Muster in einer Datei zu einer besseren Komprimierung führen, daher könnte es helfen, eine Art System zu haben – Zeilenlänge, Alphabetisierung usw. Wir reden über vielleicht ein Byte oder zwei, aber ich denke, warum nicht? tun?
Die IDE sollte CSS-Eigenschaften im Build-Prozess sortieren.
Ich habe nie darüber nachgedacht, die CSS-Eigenschaften irgendwie zu ordnen. Also, meine Antwort ist zufällig
Vielleicht ist es seltsam, aber ich ordne sie in der Reihenfolge der Elemente auf meiner HTML-Startseite. Wahrscheinlich nicht die beste Methode, aber sie hält die Dinge von oben nach unten in ziemlich guter Ordnung.
Beispiel: Header, Inhalt, Footer usw.
Anna, das ist *nicht*, worum es in dieser Umfrage geht. Sie beziehen sich auf die Reihenfolge Ihrer Organisation von Selektor+Eigenschaften, aber hier geht es um die Reihenfolge der Eigenschaften selbst innerhalb der Stile jedes Selektors.
Die Organisation der Gruppierung von Selektor+Eigenschaften ist nicht so einfach wie „Alphabetisch“ oder „Nach Typ“, da die Art und Weise, wie Sie Ihre Stile organisieren, die Stile beeinflusst, die in nachfolgende Selektor+Eigenschaften-Stile kaskadieren. Das Wissen, wie Sie Ihr Stylesheet auf dieser globalen Ebene organisieren, erfordert viel Rücksicht auf die Art des Projekts, seine Eigenschaften und die zukünftige Planung.
Ich ordne sie nach sexueller Vorliebe.
Ich gruppiere nach Typ
Generierter Inhalt
Anzeige
Position
Box-Modell
Positionseigenschaften (oben, links usw…)
Hintergrund
Schriftstile
Sonstiges (Übergänge, Deckkraft usw…)
Ich versuche, alphabetisch zu sortieren, aber manchmal bei Block-Elementen neige ich dazu, Höhe und Breite nah beieinander zu gruppieren. Ich platziere auch normalerweise Position und ihre Werte ganz unten.
Es muss zufällig sein, oder? Es erfordert viel zu viel Überlegung, um mit der Planung der Struktur von CSS-Eigenschaften zu beginnen!
Außerdem, wenn man feststellt, dass man etwas vergessen hat, gehen die Leute wirklich zurück und fügen es in die richtige Reihenfolge ein? Keine Chance!
Zufällig ist verschwenderisch, und sich die Zeit zu nehmen, es richtig zu machen, wird zur zweiten Natur. Außerdem machen viele Texteditoren es einfach, neu zu ordnen, nachdem Sie fertig geschrieben haben. In Sublime eine einfache Strg+Cmd+(↑ oder ↓) zum Verschieben einer Codezeile nach oben oder unten, ohne sie auswählen oder ausschneiden zu müssen.
Definitiv nach Typ. Bevor ich zu SASS und LESS wechselte, war es etwas zufälliger, aber ich beginne immer mit den dimensionalen Attributen für die Klasse oder ID, dann positionale Attribute usw.
Ich weiß nicht, warum oder wie ich angefangen habe, das zu tun, aber ich ordne meine Eigenschaften immer mit Hintergrund, Farbe, Typografie, Anzeige, Größe und Positionierung beginnend an. Das Letzte wären die Präfix-Eigenschaften. Ich glaube jedoch, dass ich meine Reihenfolge ändern werde, beginnend mit Positionierungs- und Größeneigenschaften, wie von vielen vorgeschlagen.
Ich ordne mein CSS alphabetisch, wie Firebug es anzeigt. Einfacher zu bearbeiten, besonders wenn ich im Browser stilisiere. Ich kopiere viel von Firebug in das CSS-Stylesheet.
Ich gehe nach dem, was sich zu dieser Zeit richtig anfühlt. Es ist mir jedoch fast zur zweiten Natur geworden, zuerst mit Positionierung und Größe zu beginnen (Breite, Höhe, Float, Rand, Abstand) und mich dann mehr auf das Design (Farben, Typografie) zu konzentrieren, und dann gehe ich in die Detailarbeit der CSS3-Eigenschaften.
Jede Art von logischer Reihenfolge wird Sie ein wenig verlangsamen, aber realistischerweise glaube ich, dass Leute, die ihre Stile „zufällig“ platzieren, dass es einen Sinn hat.
Ich habe begonnen, nach Typ zu gruppieren, und ich folge dem Beispiel von Jonathan Snook in seinem SMACSS-Buch:
1. Box
2. Rahmen
3. Hintergrund
4. Text
5. Andere
Das ist jetzt praktisch geworden, da ich einer größeren Organisation beigetreten bin und alle die gleiche Methode übernommen haben.
Ich habe es tatsächlich auf einen Post-it-Zettel an meinen Monitor gekritzelt.
http://cl.ly/0q1o1u3L2T2g2v0q0A0F
Ich will diesen Arbeitsplatz!
Ich kann nicht sehen, was auf dem Post-it steht.
Hier ist eine Nahaufnahme des Post-its
http://cl.ly/15403y2n372j0H0m180K
Es steht einfach da
1. Box
2. Rahmen
3. Hintergrund
4. Text
5. Andere
Mischung aus Typ und Zufall!
Nach Typ gruppiert. Ähnlich wie https://github.com/necolas/idiomatic-css#declaration-order, ordne ich mein CSS nach Typ, aber mit ein paar Unterschieden zu dem, was er tut.
Ich mache zuerst die Struktur (display, position, breite/höhe, floats, clears). Ich weiche von Nicolas ab, indem ich als nächstes den strukturellen Stil (rand, abstand) mache, da ich der Meinung bin, dass diese das Layout beeinflussen. Er macht abstand, rahmen, rand. Ich versuche normalerweise, rand, abstand, rahmen zu machen. Ich weiß, dass das falsch ist bzgl. Box-Modell, aber rand hat mehr Einfluss auf das Layout als abstand. Als nächstes mache ich stilistische Box-Eigenschaften wie rahmen, hintergrundfarbe usw. Dann schrift, schriftfarbe und Dinge wie Verläufe usw. zuletzt, da sie normalerweise Präfixe und mehrere Zeilen haben, so dass sie stärker hervorstechen.
Bis vor kurzem war es immer zufällig, aber jetzt, wo ich mehr Erfahrung gesammelt habe, ordne ich alphabetisch. Es hilft definitiv, wenn ich später zu meinen CSS-Dateien zurückkehre!
Ich verwende alphabetisch, aber gruppiere Präfix-Sachen nach dem nicht-präfixierten Teil und gruppiere oben, links, rechts und unten zusammen, in dieser Reihenfolge (damit sie sich an der „t“-Position befinden).
Ich neige dazu, eine Kombination aus nach Typ und alphabetisch zu machen. Zum Beispiel habe ich festgestellt, dass es viel einfacher ist, die meisten Eigenschaften alphabetisch zu sortieren, mit Ausnahme von Breite und Höhe ... Das sind meine beiden Ausnahmen. Als ich ein Kind war, wurde mir immer Breite, dann Höhe beigebracht, was hängen geblieben ist. Zu meiner Schreibbequemlichkeit alphabetisiere ich alles, mit der Breite, dann der Höhe unten. Dieses hybride System funktioniert gut für mich!
Alphabetisch mit Ausnahme von Höhe/Breite, die ich auf dieselbe Zeile setze. Es ist leichter zu scannen und die Regeln sind einfach genug, damit ein Team daran arbeiten kann und es immer noch wie eine einzelne Person aussieht, die alles codiert hat.
Ich gruppiere es im Allgemeinen nach Typ. Ich finde es einfacher, wenn ich später zurückkomme, um den Code zu ändern. Ich sehe es als die Grundlagen, die Augenweide, den Präfix-Müll, der nicht universell ist, die Platzierung usw.
Alphabetisch. Es gibt nur einen Weg, Buchstaben zu ordnen, und jeder, der das liest, sollte wissen, wie sie gehen (zumindest hoffe ich das). Die Gruppierung basiert auf Benutzereinstellungen und wird nicht auf die gleiche Weise auf jeden Entwickler übertragen.
Ich gehe alphabetisch vor, weil es die einzige universelle Reihenfolge ist. Wenn die Community einen „Standard“ wirft und eine gemeinsame Gruppierung nach Typ vorschlägt und wenn es eine ernsthafte Akzeptanz und automatische Sortierung in IDEs gibt, würde ich das definitiv tun ;-)
Was denkst du?
Ich habe abgestimmt, dass ich meine Eigenschaften nach Typ gruppiere, aber selbst dann sind die Gruppen etwas zufällig. Zum Beispiel Dimensionen, Positionen, Rahmen, Schriftstile – selbst ich weiß nie wirklich, was zuerst gruppiert wird, dann als nächstes usw. ;-) Ich meine, es ist nicht ganz ohne Gedanken; ich ordne Dinge auf eine Weise, die für mich sinnvoll ist, auch wenn es keine Industriestandard-Best Practice ist. Aber andererseits weiß ich nicht wirklich, ob es einen „richtigen Weg“ gibt.
Ich bin wirklich beeindruckt, dass die alphabetische Wahl auf dem 3. Platz liegt. Ich kann einfach nicht anders codieren. Es ist ziemlich einfach, Eigenschaften zu finden und reduziert dramatisch doppelte Deklarationen.
Nach Logik
display
position
z-index
oben, unten, links, rechts
breite, höhe
padding
border
rand,
text, schrift
text-shadow
background
schatten
Es ist für mich alphabetisch. Im Prinzip gefällt mir die Idee der Sortierung nach Typ und ich würde dies wahrscheinlich tun, wenn ich der einzige beteiligte Entwickler wäre. Ich schreibe jedoch oft Stylesheets, die von anderen verwendet werden sollen, und es gibt keinen offensichtlichen und konsistenten Ansatz zur Sortierung nach Typ. Jeder Entwickler, der eines meiner Stylesheets aktualisiert, müsste entweder meinen Typ-Sortierungsansatz lernen oder etwas anderes tun und das Stylesheet inkonsistenter und somit schwieriger zu verwenden machen. Im Gegensatz dazu kennt jeder das Alphabet.
Ein kleiner Vorteil der Alphabetisierung ist auch, dass sie fast unmöglich macht, doppelte Deklarationen zu schreiben.
Natürlich ist der Nachteil der Alphabetisierung ziemlich offensichtlich: Deklarationen werden in dem präsentiert, was sich zu einer funktionalen Mischung zusammenfügt.
Ich werde sagen: Wenn ich nach Typ sortieren würde, würde ich wahrscheinlich innerhalb der Typen alphabetisieren.
Es endet zufällig, obwohl es nicht unbedingt so beginnt.
Ich fange normalerweise damit an, sie nach Gruppen zu sortieren, wie geplant. Dann, wenn zusätzliche kleine Anpassungen kommen, werden sie unten hinzugefügt. Ich bin mir nicht sicher, wie lang meine längste einzelne CSS-Deklaration ist, aber sicherlich weniger als 20 Zeilen. Wenn ich eine CSS-Datei habe, die vielleicht über 300 Zeilen lang ist, ist das Durchsuchen der richtigen 20 Zeilen kaum eine Herausforderung.
Alphabetisch!
Meine scheinen zufällig, aber das ist es wirklich nicht; es ist chronologisch; von links nach rechts in der Reihenfolge, in der ich es schreibe (ich setze normalerweise auch alle Eigenschaften für einen Selektor auf eine Zeile). Gelegentlich wird etwas gruppiert, z. B. wenn ich beschließe, einen Rahmen zu ändern und gleichzeitig einen Radius hinzuzufügen, weil mein Cursor bereits dort ist, aber ansonsten ist es ziemlich genau in der Reihenfolge, in der ich es schreibe.
Erstaunlicherweise habe ich keine Schwierigkeiten, Dinge auf diese Weise zu finden. Normalerweise habe ich nicht genügend Eigenschaften bei einem einzelnen Ding, um viel Aufwand in die Organisation zu stecken.
Was für mich ein größeres Problem darstellt, ist, wie ich meine Selektoren organisiere: Ich versuche, sie in etwa der gleichen Reihenfolge zu organisieren, in der ihre jeweiligen Elemente auf der Seite erscheinen. Es ist nicht immer perfekt, aber es hilft mir wirklich, es zu visualisieren, während ich arbeite.
Einfach.
Zuerst bestimme ich die Größe, dann platziere ich es dort, wo ich es haben möchte, dann mache ich es schön.
Der Code, der es schön macht, hat keine bestimmte Reihenfolge.
Ich ordne sie alphabetisch und um Sachen wie Breite und Höhe zusammenzuhalten, benutze ich Stylus-Transparent-Mixins.
Nach Typ gruppiert, natürlich. Das ist der *richtige* Weg :)
Alphabetisch!
Ich mache hauptsächlich auch alphabetisch.
Zufällig. Ich stelle fest, dass ich, wenn ich versuche, Regeln auf dieser Ebene anzuwenden, zu viel Zeit für den Code aufwende, die sich nicht direkt auszahlt. Ich denke, man kann CSS zu sehr organisieren.
Ich habe im Allgemeinen nicht viele Eigenschaften, daher glaube ich nicht, dass es mich jemals verlangsamt hat.
Ich bin zufällig, aber ich gruppiere sie auch irgendwie. Nur zur Bequemlichkeit. Zum Beispiel stelle ich Hintergrundfarbe und Farbe nebeneinander, und die border-radius ebenfalls in einer Reihe.
Ich bin da nicht verrückt akribisch, nur ein paar subtile Gewohnheiten, die ich habe.
Ich ordne definitiv alphabetisch. Ich habe festgestellt, dass es mit diesem System in Zukunft viel schneller geht, Änderungen vorzunehmen. Es war schmerzhaft, mich selbst zu trainieren, aber es lohnt sich sehr, wenn man das System beherrscht.
Alphabetisch. Eine interessantere Frage ist, wie ordnen Sie Ihre CSS-Selektoren?
Ich mache alphabetisch. Weil jeder das auf jedem Fähigkeitsniveau aufgreifen kann, und viel zu oft haben andere Methoden zu mehreren sich gegenseitig überschreibenden Deklarationen geführt.
Normalerweise ist es zufällig für mich. Ich schätze, es wäre zufälliger nach Typ. Ich beginne normalerweise mit Hintergrundfarbe, Breite/Höhe, Typografie, Rand, Abstand usw. Ich habe nie darüber nachgedacht, sie alphabetisch zu ordnen. Hmmm…
Ich liste meine immer alphabetisch auf, aber das liegt daran, dass ich vor langer Zeit beschlossen habe, die Google Developer Standards für das Codieren zu befolgen.
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml?showone=Declaration_order#Declaration_order
eu uso o modo alfabético, assim quando estou procurando uma propriedade fica mais fácil…
Ich bevorzuge die alphabetische Reihenfolge
mit einigen Ausnahmen
wo ich die Haupt-Eigenschaft (wie hier Anzeige) als Referenz verwende.
Ich gruppiere auch Anbieter-Alternativen und verwende die reguläre Eigenschaft, um die Gruppe in der Liste zu positionieren.
Ich habe versucht, in der Vergangenheit einen Gruppierungsansatz zu verwenden, aber manchmal könnte er mehrdeutig sein. Da einige Eigenschaften für verschiedene Zwecke verwendet werden könnten.
Ein weiteres Problem ist, dass jeder seine eigene Gruppierungsmethode/Reihenfolge haben könnte, aber es gibt eine einzige alphabetische Reihenfolge.
Außerdem wird der Gruppierungsansatz nutzlos, wenn Sie sich mit CSS vertraut machen. Es kommt ein Punkt, an dem es schwieriger ist, die Eigenschaft im CSS zu finden, als die Eigenschaft anhand des Ergebnisses zu finden.
Sobald Sie CSS kennen, ist das eigentliche Problem nicht, was drin ist zu finden, sondern wo es ist. Die alphabetische Reihenfolge ist die beste Lösung für mich.
Zufällig gerade, aber wenn ich das Ergebnis sehe, werde ich entsprechend ändern.
Danke für die Umfrage!
Ich sage meinen Eigenschaften bestimmt: „Hört zu! Ihr werdet jetzt Befehle annehmen!“ Scheint gut zu funktionieren.
…mit einer Seite Speck!
Halb zufällig, mit zusammengefassten verwandten Eigenschaften. Wenn ich näher an die endgültige Form komme, ordne ich die Ränder in der T R ou B L e Reihenfolge…
Wenn die Definition zu groß wird, ist das oft ein Hinweis darauf, dass ich sie in separate Mixin-Klassen refaktorisieren muss. Dann stelle ich mir Fragen wie: „Ist .myclass immer rot? Oder sollte ich verwenden?“
ups, es hat mein Beispiel nicht HTML-kodiert... sollte eigentlich lauten: „...sollte ich <div class=”myclass error”> verwenden?
Alphabetisch mit CSS 3 unten.
Struktur/Schrift-Text/Farben
.class{
width:value;
height:value;
padding:value;
margin:value;
border:value;
....
font-family:value;
font-size:value;
text-align:value;
text-decoration:value;
....
background-color:value;
border-color:value;
color:value;
....
}
Ich gruppiere CSS-Eigenschaften in der Reihenfolge, in der sie mir einfallen, sie dem Stylesheet hinzuzufügen, also würde ich unter zufällig einsortiert werden.
Obwohl ich dazu neige, dass sich ein Muster in der Gruppierung ergibt. Dinge wie Rand und Abstand sowie Breite/Höhe landen tendenziell zusammen. Manchmal gruppiere ich sie aber auch absichtlich, wenn ich zurückkomme, um sie zu bearbeiten.
Ich ziehe es vor, meine Deklarationen nach Typ zu ordnen, aber auch nach der Beziehung zwischen den Deklarationen (zum Beispiel deklariere ich Padding neben Margin, weil sie ähnlich sind).
Und ich deklariere gerne grundlegende Eigenschaften (wie Padding, Breite und Höhe) zuerst, und dann eher „komplexe“ Eigenschaften (wie Box-Shadow).
Ich vermute jedoch, dass ich versuchen werde, Deklarationen alphabetisch zu organisieren. Nachdem ich es hier gesehen habe, scheint es der beste Weg zu sein, weil es absolut Sinn macht!
Online nach Typ sortieren: http://csscomb.ru
Alphabetisch!!
Neueste geschrieben unten, was entweder zufällig oder nach Typ enden kann, je nachdem, woran ich gerade arbeite.
Gruppierung und (hierarchische) Sortierung können auch das Auffinden von Fehlern erleichtern.
Um ein Beispiel hervorzuheben,
Absolut positionierte Elemente und gefloatete Elemente überschreiben Anzeige-Deklarationen, außer Anzeige: keine.
Wenn Sie Ihre Deklarationen wie folgt ordnen
position
float
display
wird es viel einfacher, zu finden, warum Ihr deklariertes Inline-Block zu einem Block geworden ist.
Suchen Sie einfach nach überschreibenden Eigenschaften vor der aktuellen Deklaration.
Ich habe gerade erkannt, dass das, was ich tue, nicht zufällig ist – es ist „zuletzt geschrieben unten“. Und ich hatte nie Probleme, eine Deklaration in einem Styleblock zu finden!
Ich neige dazu, nach Typ zu gruppieren, von außen nach innen... Rand.. Rahmen.. Abstand.. Breite/Höhe.. Hintergrund.. usw. ... Ich benutze schon seit einiger Zeit Less und noch mehr in einem aktuellen Projekt mit Bootstrap.
Ich ordne mein CSS normalerweise zuerst alphabetisch, aber wenn ich Eigenschaften anpassen muss (und das werde ich), landen die neuesten Stilregeln zur Bequemlichkeit unten. Firebug ist bei weitem mein meistgenutztes Werkzeug, wenn es darum geht, zu polieren und neu anzupassen.
Ich bin zufällig. Ist das schlecht?
Nicht wirklich streng, aber normalerweise von außen nach innen
Die meiste Zeit ist es mir egal, weil ich es danach durchkäme.
Ich habe genug zu tun, als mich darum zu kümmern, ob border-top über border-radius hätte gehen sollen... weil r vor t im Alphabet kommt... Ich hatte nie Probleme, die CSS-Eigenschaften für einen bestimmten Selektor zu scannen... vielleicht bin das nur ich... wenn man sich die Statistiken ansieht, scheine ich in der Minderheit zu sein... obwohl eine große Minderheit...
Ich bin einer von denen, der von außen nach innen geht. Das ist logisch, weil die Positionierung der Elemente das ist, was ich zuerst mache.
Ich ordne es alphabetisch.
Ich mache es alphabetisch, mit Ausnahme von Dingen wie Positionierung. (Ich verwende dafür 2 Leerzeichen anstelle eines 4-stelligen Hart-Tabs)
Präsentation zuerst, gefolgt von Layout. Einfacher bei der Arbeit an einem Mobile-First, responsiven Website.
Alphabetisch :)
Guter Punkt!
Derzeit mache ich es alphabetisch.
Gute Anleitung, wie wir unseren CSS-Code verwalten können.
Danke!
Vor dem Lesen war ich es gewohnt, eine zufällige Reihenfolge zu verwenden.
Aber die Reihenfolge nach Typ gefällt mir wirklich gut. Sie sieht viel schöner aus.
Wie können Sie sie alphabetisch sortieren?? Das ist wahnsinnig. Ich weiß nicht genau, was ich in den Code schreiben werde, bis ich es schreibe. Um es alphabetisch zu sortieren, müssen Sie genau überlegen, was Sie schreiben wollen, bevor Sie es schreiben.
Warum? Weißt du, dass du den Cursor auf die gewünschte Zeile setzen und eine neue Zeile zwischen zwei vorhandenen einfügen kannst?
Ich mache nur Spaß, aber wenn ich deinen Kommentar lese, klingt es so, als ob wir keinen Code in übergeordneten Zeilen platzieren können (Entschuldigung, Englisch ist nicht meine Muttersprache, ich versuche, so verständlich wie möglich zu sein ;-)), als ob wir mit einer Schreibmaschine codieren.
Ich bin froh, dass es eine ganze Menge zufällige gibt – ich nehme an, es hängt davon ab, ob man alleine oder im Team arbeitet.
Auch bei der Organisation von Style-Sheets bin ich nicht gut. Ich mache mir mehr Sorgen um die Organisation – im Allgemeinen verwende ich die Reihenfolge, in der die Dinge auf dem Frontend erscheinen (ungefähr).
Ich mache mir mehr Sorgen darum, wie das Frontend aussieht!
Ich bin irgendwo zwischen zufällig und nach Typ sortiert, aber ich würde sagen, ich tendiere eher zu zufällig.
Ich denke, diese „Nach Typ gruppiert“ funktioniert für mich super. Es hilft mir, schneller zu debuggen.
Ich hatte vorher wirklich nicht darüber nachgedacht, aber ich organisiere definitiv nach Typ. Nicht absichtlich und nicht einmal zu 100% der Zeit.
Wenn nicht nach Typ geordnet, lasse ich es oft so, obwohl es mich manchmal genug ärgert, dass ich Dinge kopiere und einfüge, um sie an einen besser geeigneten Ort zu bringen.
Eine wichtige Sache für mich ist, dass Breite und Höhe IMMER nebeneinander und in genau dieser Reihenfolge sein müssen, da Bilder am häufigsten nach Breite vor Höhe in Bezug auf die Größe referenziert werden.
Unrelated: Mir wurde eine Windelanzeige in der Seitenleiste angezeigt!?
Völlig zufällig
Ich gruppiere Dinge in logische Abschnitte. Besonders wenn ich an responsiven Designs arbeite.
Ich neige auch dazu, sie nach Größe zu ordnen. Klein bis groß.
Sehr sehr zufällig, aber wenn ich das alles lese, freue ich mich darauf, die Umfrageergebnisse zu sehen.
zufällig!!
Zufällig.
Ich habe meine eigene Logik
Anzeige
Position
Float
Hintergrund
Breite
Höhe
Rand
Füllung
Schriftart-Familie
Schriftgröße
Farbe
Text-Dekoration
Textschatten usw.
Border
Rand-Radius
Box-Schatten
Z-Index
Ich ordne Eigenschaften nur in großen Regeln und ordne sie nach Typ.
Ich habe ein geheimes Wort (kann es dir nicht sagen, es ist ein Geheimnis), das ich dann mit dem ersten Wort jeder Eigenschaft für jede Klasse buchstabieren.
Das ist lustig, aber bedeutet, dass selbst ich eine Eigenschaft zuweisen müsste (und sie gleich null setzen müsste), auch wenn sie nicht benötigt wird.
Du nennst es vielleicht Zwangsstörung, ich nenne es genialen Stil.
.selektor
{
inhalt: ;
farbe: ;
schriftart;
hintergrund: ;
rand: ;
füllung: ;
rand: ;
position: ;
breite: ;
links: ;
float: ;
anzeige: ;
text-dekoration: ;
box-schatten: ;
z-index: ;
}
Ich beginne nett und konsistent, indem ich meine Stile in Abschnitte gruppiere, aber auf halbem Weg durch das Projekt neige ich dazu, Dinge einfach zufällig hineinzuwerfen ^^
Alphabetisch, das ist die einfachste Lösung, wenn man in großen Teams arbeitet, denke ich.
Ich platziere zuerst Größen- und Positionierungsangaben, dann Box-Stile, dann Text-Stile.
Bsp.
breite:30%;
höhe:100px;
rand:30px;
hintergrund:#efa;
box-schatten:0 0 10px #000;
schriftgröße:20px;
text-schatten:0 0 3px #fff;
farbe: #fff;
Nach Typ gruppiert, auf jeden Fall!
Zufällig bei mir.
zufällig... es funktioniert für mich besser, ich kann viel schneller codieren, wenn ich nicht über eine Reihenfolge nachdenken muss... außerdem, wenn ich etwas schnell finden und ändern muss, drücke ich CMD F und finde es so...
Nach Typ, zuerst Positionierung, dann Schriftarten und dann der Rest.
in Eile > Zufällig
meistens > Nach Typ gruppiert
wenn mehr Zeit ist > Nach Typ gruppiert + Nach Länge
Alphabetisch für mich. Das ist die universellste Lösung, die jeder intuitiv versteht, während viele dieser typbasierten Schemata für eine einzelne Person funktionieren mögen, haben viele davon, obwohl ähnlich, leichte Unterschiede; vielleicht kommt die Größenbestimmung vor der Positionierung, vielleicht danach, vielleicht auf derselben Zeile.
Alphabetisch macht es mir viel einfacher, das zu finden, was ich bearbeiten möchte, und verhindert, dass ich versehentlich zwei Padding-Definitionen in derselben Zeile hinzufüge, was mir in der Vergangenheit mit einem typbasierten Ordnungsschema gelungen ist.
Natürlich macht das Lesen der bisherigen Kommentarzahl deutlich, dass dies ein ziemlich emotionales Thema ist.
Alphabetisch, da es der einzige universelle Standard ist, den jeder intuitiv versteht. Die Gruppierung nach Typ lässt immer noch zu viele Optionen offen. Außerdem ist alphabetisch DER Standard, der von praktisch jedem Web-Inspektor-Tool verwendet wird, ob im Browser integriert oder von Drittanbietern.
Hallo Chris,
Ich arbeite regelmäßig mit Firebug! Also ordne ich alphabetisch. Wie ordnest du dein CSS?
Nach Typ gruppiert, auf jeden Fall! Es scheint mir natürlich, wenn ich die Breite schreibe, die Höhe hinzuzufügen (falls natürlich benötigt). Rand nach Polsterung usw. Für mich ist es offensichtlicher, wenn ich ein Breite-, Rand- oder Polsterungsproblem habe, es finden zu können.
Ich gruppiere sie nach der Art der Eigenschaft in einer logischen Reihenfolge. Z.B.
Ich ordne sie normalerweise nicht, aber wenn ich es tue – ordne ich sie nach Typ ohne Leerzeilen. Eigentlich denke ich, dass es nicht sehr wichtig ist.
Position
Float
Dimensionen
Rand
Füllung
Hintergrund
Border
.
Alles andere alphabetisch geordnet.
.
Farbe
Ich habe noch keinen Platz für CSS3-Animationen/Selektoren gefunden, mit dem ich wirklich glücklich bin.
Außerdem ärgert es mich WIRKLICH, wenn Leute nach dem Doppelpunkt keinen Leerschritt einfügen. Hässlich!
Nach ein paar Pannen, bei denen dieselbe Eigenschaft zweimal aufgeführt wurde (warum funktioniert meine Polsterungsänderung nicht?!?), habe ich sie im Allgemeinen alphabetisch geordnet.
Ich sehe den Wert darin, nach Typ zu ordnen. Ich würde gerne im Voraus wissen, ob etwas display:block, floated oder positioniert ist. Es scheint auch eine gute Idee zu sein, Höhe und Breite sowie oben/unten und links/rechts zusammenzuhalten. CSS3-Selektoren, die am Ende gruppiert sind, machen auch Sinn. Ich bin offen für Änderungen.
Zufällig... nein. Nicht mal, wenn ich es eilig habe.
Alphabetisch, die Gruppierung nach Typ ist jedoch eine großartige Idee.
Vor einem Monat zufällig, jetzt alphabetisch geordnet. Ich folge http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#CSS_Style_Rules
Sobald es in der gewünschten Reihenfolge organisiert ist, und wenn du so anal bist wie ich, verwende dieses Skript, um es lesbar zu machen!
#! /usr/bin/perl
use strict;
use warnings;
while (){
s/([-a-z ]+:([^link|visited|hover|active]))\s*(.*)/sprintf(“%-32s”,$1) . “$3″/ie;
print;
}
Bingo! Schau dir CSScomb hier oder hier an. Vollständig anpassbar, wie es aussieht, und für eine ganze Reihe von Texteditoren verfügbar!
Tatsächlich... ich habe gerade festgestellt, dass Sublime Text 2 eine eingebaute Sortierfunktion hat... Wähle die Zeilen aus, die du sortieren möchtest (nicht nur CSS), Strg/Cmd+Umschalt+P, tippe dann 'sortieren', drücke Enter und bumm... deine Eigenschaften sind jetzt logisch geordnet!
Andy Ford hat einen großartigen Beitrag zu diesem Thema. Ich benutze seine Reihenfolge (größtenteils) seit etwa 3 Jahren und es ist wirklich hilfreich, wenn man ein Projekt wieder besucht und Dinge schnell finden muss. Alphabetisch klingt großartig, aber für mich ist es zeitaufwändiger... „Was mir an der Alphabetisierung nicht gefällt, ist, dass bestimmte Eigenschaften – meiner Meinung nach – inhärente logische Verbindungen haben und nicht voneinander getrennt werden sollten.“ -Andy Ford
...und hier ist der Link zu besagtem Artikel
http://fordinteractive.com/2009/02/order-of-the-day-css-properties/
Ich ordne sie alphabetisch. Da die meisten meiner Klassen die Layout-, Farb- und schriftenbezogenen Eigenschaften trennen, ordne ich sie nicht auf dieser Grundlage.
Alphabetisch, seit Tag eins. Denn irgendwann wird keine andere Art mehr Sinn machen (d.h. Gruppierung nach was?).
Chris, du hast mich zum Nachdenken gebracht, was ich tue, ich wusste, dass ich keine der Optionen in deiner Umfrage gemacht habe, aber ich war mir nicht sicher, was ich tatsächlich tue. Du hast mich also darüber nachdenken lassen, und warum. Danke.
Persönlich kann ich nicht sehen, wie eine systematische, alphabetische, zeilenlängen- oder typbasierte Ordnung richtig aufrechterhalten werden kann.
Ja, wir können die alphabetische Reihenfolge oder was auch immer beibehalten, aber das ist **keine** Wartung, das ist nur eine beliebige Organisation, die die Wartung nicht wirklich so sehr unterstützt, wie sie es könnte. Wir sollten **Stile** für eine Website pflegen, nicht nur einen Haufen CSS-Eigenschaften.
Wir sollten in der Lage sein, unser CSS zu pflegen, ohne seine Eigenschaften neu ordnen zu müssen, sobald wir eine Änderung vorgenommen haben. Warum? Nun, in einem Multi-User-Versionskontrollsystem müssen wir die Änderungen sehen, und nur die Änderungen, es sollte keine Gefahr bestehen, dass eine Änderung so aussieht, als wäre eine Zeile gelöscht und eine andere hinzugefügt worden, eine Änderung sollte wie eine Änderung aussehen.
Bei der Erstellung eines CSS-Regelsatzes sollten die Eigenschaften darin in der Reihenfolge ihrer wahrgenommenen Wichtigkeit stehen, d.h. welche Eigenschaften am meisten zum gewünschten Stil beitragen.
Da ich oft zwischen der Bearbeitung von CSS und der Ansicht der Testseite in 7 Browsern wechsle (oh, man muss eine umfassende Testseite erstellen, das ist entscheidend). Das Leben ist zu kurz, um die Eigenschaften neu zu ordnen, sobald ich eine Komponente gestylt habe.
Es ergibt sich typischerweise etwas wie
Also ist es in zufälliger Reihenfolge der Priorität meiner Ziele zum Zeitpunkt des Schreibens.
Jegliche Korrekturen für bestimmte Browser werden am Ende angehängt, sobald sie behoben sind, und das Ziel (oder der Grund) der Eigenschaft wird immer kommentiert, sehr wichtig!
Wir müssen nicht jede Zeile einzeln kommentieren, ein Kommentar auf einer eigenen Zeile über mehreren Eigenschaften, gefolgt von einer Leerzeile, ist ausreichend für Kommentare wie
So ist klar, warum jede Eigenschaft existiert. (Hast du jemals CSS gepflegt und dich gefragt, ob eine bestimmte Eigenschaft absolut notwendig war? Ich habe.)
Angenommen, die Reihenfolge war zufällig/alphabetisch/nach Typ/nach Zeilenlänge, bin ich mir ziemlich sicher, dass das kurzfristig sehr hübsch sein und Sinn machen kann, aber wenn du in ein paar Wochen/Monaten/Jahren zu deinem CSS zurückkehrst, nachdem dein Kurzzeitgedächtnis vergessen hat, was du getan hast, wirst du zu einem schönen Durcheinander zurückkehren und unweigerlich deinen Lieblings-Web-Inspektor starten müssen, um dein Kurzzeitgedächtnis wieder auf den neuesten Stand zu bringen, was zum Teufel du getan hast.
Übrigens habe ich für „zufällig“ gestimmt, weil, sobald ich die Eigenschaften für ein Ziel/einen Grund habe, es normalerweise nicht genug davon gibt, um sich darum zu kümmern, wie sie geordnet sind (das Ziel/der Grund ist wahrscheinlich zu allgemein, wenn es so viele Regeln hat), aber es ist immer noch so, dass die Eigenschaften in der **Reihenfolge ihres größten Beitrags** zum gewünschten Ziel stehen.
Wir verwenden: github.com/miripiruni/CSScomb.git :)
Noch interessanter: Wie sortierst du deine Selektoren? :)
Ich sortiere von der einflussreichsten zur am wenigsten einflussreichen Eigenschaft für die Struktur des Elements, wobei ich von außen nach innen vorgehe.
Diese Eigenschaften sind zuerst, da sie die Sichtbarkeit/Struktur und/oder Position des Elements direkt beeinflussen.
display
float
position
top
left
z-index
overflow
Diese Eigenschaften sind zweitens, da sie die Größe des Elements direkt beeinflussen, wieder von außen nach innen.
margin
border
padding
width
height
Diese Eigenschaften sind als nächstes, da sie die Größe und das Aussehen des Inhalts innerhalb des Elements in vielen Fällen beeinflussen und indirekt die Größe des Elements erhöhen, was sie einflussreicher macht als die letzte Gruppe.
font-family
font-size
line-height
font-style
font-weight
text-align
text-decoration
text-transform
color
Die letzte Gruppe besteht aus Eigenschaften, die nicht direkt mit anderen Eigenschaftsgruppen verbunden sind und die Größe des Elements überhaupt nicht beeinflussen.
background
cursor
outline
box-shadow
transition
Ich weiß, dass die meisten Leute das nicht tun, aber ich schreibe meine Eigenschaften in einer einzigen Zeile, so
.selektor { anzeige: block; rand: 0px; rand:0px; füllung: 0px; schriftgröße: 1.2em; zeilenhöhe: 1.6em; farbe: #000; hintergrund: #fff; cursor: pointer; }
Ich weiß, dass viele das nicht mögen, aber ich hasse das Einrücken (auch wenn mein Texteditor es für mich tut), ich hasse, wie die schließende Klammer aussieht, wenn man ohne Einrücken Zeile für Zeile macht, und diese Methode benötigt weniger Zeichen als das Einrücken.
Ich weiß, es ist ein bisschen seltsam, aber meine Struktur funktioniert für meinen zu logischen, perfektionistischen Verstand.
Ich habe meine eigene Art mit meinen eigenen Regeln, die für andere seltsam sein könnten, aber ich habe sie hier vor ein paar Wochen erklärt: http://visuellegedanken.de/2012-05-29/my-css-coding-style-part-i-css-properties-order/
Die Twitter-Leute nehmen das ziemlich ernst.
https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js#L35
Gruppiert in einer semi-spezifischen Reihenfolge: position / margin / padding / background / border / text / display / float / cursor / z-index
Ich entscheide mich immer für die gruppierte.
Mit SASS/SCSS füge ich normalerweise zuerst alle meine Mixins ein und sortiere dann nach Typ und rücke die Regeln zur Ausrichtung ein.
.foo { @include font(2.1rem, 3rem, $font-default); background: #f0f; color: $c-body-copy; height: 200px; width: 200px; }Die Ausgabe ist nicht unbedingt so ordentlich, aber sie wird normalerweise komprimiert und spielt daher keine Rolle.
Ich habe mich an die Vorschläge in diesem Artikel von ThinkVitamin gehalten (https://css-tricks.de/new-poll-how-order-css-properties/), habe es aber schließlich zugunsten der alphabetischen Reihenfolge aufgegeben, aus zwei Gründen
- keine Teamdebatten über Gruppierungen, wir sind uns alle einig, welche Buchstaben wohin gehören
- es entsprach derselben Liste, die ich in Firebug und Web Inspector sehen würde
Ich bin nach dem Anschauen seines „Lynda.com Tutorials“ ein Fan von Chris Coyier geworden.
Hier ist bereits eine App, um deine Regeln schön zu gruppieren
http://csscomb.ru/about/?lang=en
Meine sind eher zufällig, obwohl ich eine Art unterbewusste Gruppierung anwende. Stile für Positionierung, Schriftarten, Dekorationen usw. landen tendenziell zusammen; Mixins kommen immer oben an.
Ich bin sicher, dass ich damit anfangen sollte, strenger zu sein.
Ich versuche nach Typ zu gruppieren, aber nach ein paar Überarbeitungen wird es normalerweise ein wenig zufällig.
Ich denke, diese Debatte ist ein wenig verrückt, aus zwei Gründen
1) Für Leute, die nach „Zeilenlänge“ organisieren, eine Frage: Was ist mit Vendor-Präfixen? Machen sie die Längen nicht länger als die ungeprefixte Deklaration und ruinieren die visuelle Integrität deines schön geformten Codes? :\
2) Für Leute, die nach „Typ“ organisieren, das ist cool. Aber was ist, wenn eine Transition eine Eigenschaft beeinflusst und andere nicht? Persönlich, wenn ich nur einen Box-Schatten transitioniere, möchte ich, dass diese Transition neben dem Box-Schatten deklariert wird. Außerdem ist es für mich schwer zu verstehen, dass Ränder und Polsterungen die „Positionierung“ nicht beeinflussen. Scheint eine willkürliche Gruppierung zu sein.
@gib: Ja, am Alphabet gibt es nichts zu rütteln. Es scheint viel einfacher, wenn die Dinge lang werden. Weniger Herumirren bei der Suche nach Dingen. Und es ist, wie Inspektoren denken.
Ich mache Gruppierungen, wenn ich benutzerdefinierte Stylesheets schreibe.
Ich gruppiere sie nach Spezifikationskapitel und Eigenschaft-Wert-Paar. Dann ordne ich sie nach Spezifikationskapitel.
http://fcpeic.cat/estil-screen.php
Größtenteils zufällig, aber die Längen-Typ-CSS gefiel mir, das ist verrückt für mich :)
Für mich ist gruppiert nach Typ das Beste.
CSS zu ordnen ist nicht notwendig, aber die Ordnung hilft und erledigt unsere Arbeit gut
Zufällig für uns :)
In dieser Reihenfolge
1) Gruppiert nach Struktur / Funktionalität, Hilfsklassen zuletzt. Jede Gruppe wird mit einer Kopfzeile und einer aussagekräftigen Erklärung annotiert.
2) Innerhalb jedes Selektors, im Allgemeinen ist dies die Reihenfolge, die ich verwende.
a) Anzeigetyp (wo erforderlich)
b) Dimensionen, Rand, Füllung
c) Hintergrund
d) Ränder
e) Schriftarten und Vordergrundfarben
Ich verwende immer Kurzschreibweisen und, wo möglich, minifizierte CSS.
Ich versuche, diese Reihenfolge meistens zu verwenden
1) Anzeige/Position
2) Hintergrund
3) Breite/Höhe
4) Schrift/Farben/usw.
5) Ränder/Füllungen
6) Ränder/Randradien
7) Sonstiges
Die konsistente Verwendung dieser Reihenfolge hilft mir, die gesuchte Eigenschaft leicht zu finden.
Wirklich, ich bin eher zufällig. Ich mache viel Live-Bearbeitung in Firebug und es ordnet meine Eigenschaften neu, sobald ich mit der Bearbeitung fertig bin. Nachdem ich das so oft gesehen habe, habe ich angefangen, sie so zu ordnen, wie sie es tun. Ich muss manchmal mein eigenes Ding machen. Sie neigen dazu, Dinge zu trennen, die meiner Meinung nach zusammengehören... aus Gründen der Klarheit. Insgesamt bin ich nicht zu wählerisch.
Ich ordne mein CSS meistens logisch und mache es ähnlich wie bei Firebug etc.
Zuerst die Dimensionen in der Reihenfolge, wie Firebug und Chrome sie anzeigen, wenn man die Metriken eines Elements inspiziert
Breite/Höhe, Füllung, Rand, Rand.
Dann die Positionierung (je nach Element wechsle ich diese beiden manchmal) mit Position, Koordinaten, z-index.
Dann Optionen wie Zeilenhöhe, Schriftgröße, Schriftstärke und so weiter. Und zu guter Letzt der Hintergrund-Kram.
Ehrlich gesagt, für mich sind die Metriken und die Positionierungs-/Anzeigeoptionen die wichtigsten Optionen für ein Element und der Hintergrund ist am wenigsten wichtig, daher kann ich wirklich nicht verstehen, wie Leute nicht zuerst die Metriken und Positionierung (die elementaren Optionen!) haben können.
Aber ich bin jetzt seit mehreren Jahren in diesem Geschäft, am Anfang hatte ich auch mein CSS meistens „zufällig“.