Über 10.000 Menschen haben gesprochen: Der beliebteste Weg, CSS-Eigenschaften anzuordnen, ist gruppiert nach Typ.
So verteilten sich die Stimmen

Gruppiert nach Typ (45%) gefolgt von Zufällig (39%). Deutlich weniger beliebt war Alphabetisch (14%) und nur wenige Leute nutzten Zeilenlänge (2%).
Zur Klarstellung, Gruppiert nach Typ würde so aussehen (stark angelehnt an Nicolas Gallaghers Idiomatic CSS)
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;
/* Color */
background: #000;
color: #fff
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Other */
cursor: pointer;
}
Es wäre wahrscheinlich nicht explizit mit solchen Kommentaren gekennzeichnet, aber die Eigenschaften wären nebeneinander.
Die Mehrheit der Leute ist organisierter als ich! Ich musste bedauerlicherweise für „Zufällig (kein spezifischer Plan)“ stimmen. Ich habe nicht das Gefühl, dass es mich stark behindert, aber andererseits, woher wüsste ich, ob ich nicht einen organisierteren Ansatz ausprobiere?
Ich habe noch ein paar andere Gedanken.
Ich denke, das ist in Teams ein größeres Problem. Es muss einen Standard geben, sonst sieht das CSS projektweit unordentlich aus. Ich weiß, dass inkonsistente Stile meinem Gewissen zu schaffen machen würden und ich würde Zeit damit verbringen, triviale Formatierungsarbeiten zu beheben, anstatt tatsächliche Arbeit zu leisten.
Die kognitive Belastung spielt hier eine Rolle. Wenn man sich darauf verlassen kann, dass bestimmte Eigenschaften immer an der gleichen Stelle sind, kann man das CSS schneller verstehen (weniger scannen). Wiederum ein größeres Problem, wenn man in einem Team arbeitet und Code betrachtet, der einem leicht unbekannt ist, weil man ihn nicht geschrieben hat.
Eine weitere Überlegung ist „wie Sie es ursprünglich schreiben“ CSS und „nach ein paar Monaten“ CSS. Ich wette, viele von uns beginnen mit der Absicht, sehr organisiert zu sein und sind auch tatsächlich organisiert, aber dann, wenn man später Dinge anpasst, wirft man Eigenschaften irgendwohin. Wie hat sich das auf die Abstimmung ausgewirkt? Haben Sie basierend auf Ihren Absichten oder Ihren tatsächlichen CSS-Dateien abgestimmt?
Ich weiß nicht, Mann… ich finde alphabetisch sortieren viel einfacher zu pflegen (für mich). Außerdem alphabetisiert Firebug für FF und ich kopiere und füge viel ein, wenn ich im Browser entwerfe/anpasse.
Nicht nur für Sie, sondern auch für große Teams. Alphabetische Reihenfolge ist der einfachste Weg, um Zeitverlust bei der Suche nach Eigenschaften zu minimieren, da alles in einer erkennbaren Reihenfolge liegt und Teammitglieder keine „nach Typ gruppierte“ Reihenfolge lernen (und sich merken) müssen.
Sehr interessantes Thema, Chris. Ich persönlich gehöre zu den 2%, die die Eigenschaften nach Zeilenlänge gruppieren. Diese Methode spart nicht nur Speicherplatz auf der Festplatte, sondern ich finde es auch schneller, Stile zu identifizieren und in der Stylesheet zu navigieren, wenn ich nach einiger Zeit bearbeite, da es mir viel Scrollen erspart.
Ich frage Sie, wie oft haben Sie Stylesheets mit 1000 Zeilen verwaltet, die mit der Methode „gruppiert nach Typ“ formatiert wurden.
Wäre es nicht besser gewesen, nur 300 Zeilen Code zu verwalten?
Wie führt die Gruppierung von Eigenschaften nach Zeilenlänge zu weniger Zeilen und nimmt weniger Speicherplatz ein? Ich würde denken
nimmt genauso viel Platz ein wie
Jamie, ich glaube, Andru bezieht sich tatsächlich darauf
Ich bin der Meinung, dass das horizontale und vertikale Scannen die Effizienz verringert, und wenn Sie Ihren Code beim Veröffentlichen minimieren, spielt es keine Rolle, wie viele Zeilen Sie beim Schreiben einnehmen.
Mit cmd + f sollte es keine Rolle spielen, und wie Josh sagt, das Suchen sowohl horizontal als auch vertikal verringert die Geschwindigkeit eher, als sie zu erhöhen. Ich weiß, wann immer ich eine HTML-E-Mail erstelle, es nervt, nach all den Inline-Stilen zu suchen.
Außerdem sollte es keine Rolle spielen, wie aufgelockert Ihr Code ist, da Sie für die Live-Website sowieso optimieren sollten.
Jamie,
Josh hat Recht bezüglich der Art und Weise, wie ich mein CSS formatiere. Die von Ihnen geschriebene „Dingens“-Regel benötigt 19 Zeilen Code (vorausgesetzt, Sie lassen eine leere Zeile zwischen jeder Eigenschaft), während sie für mich 1 oder maximal 2 Zeilen benötigt, je nach Bildschirmbreite.
Für mich ist es viel einfacher, einen so formatierten Code zu verfolgen, da ich beim Bearbeiten der Regel überhaupt nicht scrollen muss. Ich muss auch einen viel kleineren Bereich visuell durchsuchen, um die Teile zu identifizieren, die ich ändern muss, aber das ist eine persönliche Präferenz.
Jeder Programmierer schreibt sein CSS auf unterschiedliche Weise, entsprechend seinem eigenen Stil. Daher glaube ich, dass es keinen besten Weg gibt, dies zu tun. Wichtiger ist, welcher Code Sie schreiben, als wie Sie ihn formatieren.
Hallo, erster Kommentar hier, aber ich habe abgestimmt und für Gruppiert nach Typ gestimmt.
Aber das ist eher eine „gute Absicht“, manchmal sogar Wunschdenken. Ich gruppiere sie, wenn ich mit dem Schreiben beginne. Dann füge ich weitere hinzu und es wird ziemlich unordentlich. Ich sollte die Kommentare ausprobieren.
Aber dann bin ich kein Profi, also hasse ich mich nur selbst, wenn ich nach ein paar Monaten zum Code zurückkehre ^^
Einige Umfrageideen
Wo arbeiten Sie?
-Büro eines Unternehmens
-Genossenschaftsbüro
-Zuhause/Remote
Welche Website nutzen Sie am häufigsten für Suchergebnisse bei CSS-Syntax?
-css3please
-MDN
-css-tricks
-W3C
-Sitepoint
-w3schools
-was auch immer das oberste Google-Ergebnis ist
-ich benutze tatsächlich ein gedrucktes Buch
Welche CSS-Fähigkeit würden Sie als fortgeschrittener betrachten?
-Seitenlayout
-CSS3-Animationen
-CSS-Präprozessoren
(Ich bin mir nicht sicher, ob letzteres vollständig Sinn macht, da die Kenntnis, wie CSS funktioniert, eine Voraussetzung für Präprozessoren ist, aber vielleicht so etwas...)
Alphabetisch oder GTFO. Jeder wird ein leicht anderes Konzept für die Anordnung und Gruppierung haben, das jedem neuen Mitarbeiter, der mit dem Code arbeitet oder ihn betrachtet, erklärt werden muss. Die alphabetische Reihenfolge bedarf keiner Erklärung, vorausgesetzt, man hat die Grundschule bestanden. Sicher, es sieht nicht so gut aus und es kann eine Weile dauern, sich daran zu gewöhnen, wenn man schlechte Programmiergewohnheiten hatte, aber letztendlich stelle ich fest, dass ich schneller und effizienter beim Erstellen und Überarbeiten von CSS mit einem alphabetischen Ordnungssystem bin, jetzt wo ich mich daran gewöhnt habe.
Ich stimme dem nicht ganz zu, denn obwohl die Leute Gruppen unterschiedlich interpretieren werden, wird es fast jeder mit der gleichen Grundschulbildung in etwa 30 Sekunden verstehen. Außerdem sollte es keine Überraschung sein, dass Sie schneller und effizienter mit einem System sind, an das Sie sich gewöhnt haben :)
Alphabetisch ist das einzige System, das in Teams zuverlässig funktioniert, ganz zu schweigen davon, dass es automatische Sortierung ermöglicht. Wenn ich Code auswringe, verschiedene Ansätze teste oder was auch immer, kümmere ich mich oft nicht um die Reihenfolge der Selektoren, aber bevor es committet wird (denn wenn Sie kein VCS verwenden, müssen wir reden), kann ich es mit einem Sortierbefehl durchlaufen und siehe da, mein CSS hält sich an ein kohärentes System! Wenn Sie Ihrem Texteditor beibringen können, nach Typ zu gruppieren, bin ich beeindruckt.
Ich stimme zu. Es ist viel einfacher zu pflegen und zu verstehen.
Josh, alphabetische Reihenfolge eliminiert das Potenzial für „Gruppierungsfehler nach Typ“. Genug dieser kleinen Fehler, zusammen mit der Zeit, die benötigt wird, um die Gruppen zu lernen (und die Reihenfolge innerhalb der Gruppen), macht die alphabetische Reihenfolge zur mit Abstand effizientesten.
Es gibt ein paar Vorbehalte gegen die alphabetische Reihenfolge.
Das erste ist, dass Vendor-Präfixe zusammen gruppiert werden müssen
Das zweite ist, dass CSS-Präprozessoren das Konzept der Anordnung von Eigenschaften durcheinanderbringen, wenn Mixins verwendet werden
Meine Tendenz ist, Eigenschaftsbasierte Mixins alphabetisch einzumischen (kein Wortspiel beabsichtigt), wie z. B.
.box-shadowoder.border-radius.Alle Multi-Style-Mixins erscheinen oberhalb oder unterhalb der Liste der Eigenschaften, je nachdem, welche Stile Vorrang haben sollen.
Persönlich bevorzuge ich die alphabetische Anordnung, da es wenig Ambiguität gibt und schneller zu vermitteln ist als eine benutzerdefinierte Reihenfolge, die leicht durcheinandergebracht werden kann.
Ich ordne gerne nach „Typ“, da viele CSS-Eigenschaften eine starke Beziehung zueinander haben, zum Beispiel
positionundz-index.Wenn sich eine Regel entwickelt und das Element als
staticgestylt wird, dann besteht eine gute Chance, dass die Deklarationz-indexnicht aufgeräumt wird, es sei denn, diese beiden Deklarationen stehen nahe beieinander.@Thierry Koblentz Genau das.
Die Anordnung nach Typ ist der einzige Weg, um sicherzustellen, dass man bestimmte eng verwandte Eigenschaften nicht vergisst, wenn man Änderungen in seinem CSS vornimmt.
Außerdem ergibt es für mich keinen Sinn, Positionierungseigenschaften wie
leftundtopzu trennen.Absolut. Wohlgemerkt, ich arbeite nicht im Team, daher habe ich den Luxus, nach Belieben zu arbeiten. Aber die Sortierung nach Typ ermöglicht es mir, auf einen Blick zu sehen, was das CSS tut.
Hier ist das Problem mit der alphabetischen Sortierung: Wenn ich nicht weiß, welche Eigenschaften in einer Deklaration enthalten sind, muss ich die gesamte Liste durchgehen, um alles zu sehen, was z. B. das Layout beeinflusst. Gruppieren Sie sie nach Typ und ich kann die meisten Eigenschaften ignorieren und mich nur auf das Layout oder den Typ oder was auch immer konzentrieren.
Das, zusammen mit etwas, das Chris gesagt hat.
Ich werde immer, IMMER lieber „oben“ und „links“ zusammen sehen (oder unten, rechts, welche auch immer Sie verwenden). Alles andere ist Wahnsinn. Das Problem wäre gelöst, wenn es ein gemeinsames Präfix gäbe, wie es bei „margin-“ und „padding-“ der Fall ist, aber leider ist das nicht der Fall.
Also gruppiere ich grob nach Typ. Was mich zu dem bringt, was Chris gesagt hat: Kommen Sie in ein paar Monaten wieder auf mich zurück und wir werden sehen, ob es gepflegt wurde. ;-)
Wie bei anderen Kommentaren bin ich auch der Meinung, dass die sogenannte „Konsistenz“ des Ansatzes keine Rolle spielt, SELBST IN TEAMS. Soweit ich weiß, ist es wichtiger, den Cascade richtig zu verwenden, und wenn Sie das tun, werden Sie selten einen Stil mit 20 verschiedenen Eigenschaften sehen. Und selbst wenn, wie schwer ist es, 20 Eigenschaften zu scannen und die fragliche zu finden? Nicht schwer. Um ehrlich zu sein, selbst die Sache mit „oben/links“ wäre nicht wirklich das Ende der Welt, obwohl ich es für Wahnsinn halte, sie zu trennen.
Ja, was @Anthony Nichols gesagt hat. :)
Nach Typ gruppiert oder GTFO. Ich finde es sehr einfach, zu meinem Code zurückzukehren und zu sagen: „Oh, dieser Block hier kümmert sich um die Box-Shadow-Sachen“, was sehr nett ist, wenn man mit Vendor-Präfixen zu tun hat. Manchmal versuche ich, die alphabetische Reihenfolge innerhalb der Typgruppen einzuhalten, aber das ist, wenn ich keine Zeitkrise habe.
Ich bevorzuge auch eine Form von gruppiert nach Typ. Alphabetisch ist einfach albern… warum sollte Höhe weit vor Breite kommen? Das ist kontraintuitiv. In meinem Kopf macht es Sinn, Breite gefolgt von Höhe zu haben, da dies die Art und Weise ist, wie die meisten Dimensionen auf Englisch laut vorgelesen werden. 200×150 = 200 Breite mal 150 Höhe.
Dasselbe kann man über Margin und Padding sagen. Sie sollten nebeneinander und nahe den Breiten-/Höhenregeln liegen, da die vier zusammen die Endabmessungen Ihres Elements bestimmen.
Viele dieser anfänglichen Kommentare sprechen sich für die alphabetische Reihenfolge aus, aber viele dieser Diskussionen lassen darauf schließen, dass Sie für einen bestimmten Selektor etwa 40 Stil-Eigenschaften haben. Ich meine, solange nicht alle Stile auf einem Bildschirm sichtbar sind (d. h. höher als Ihr Editor), sehe ich nur dann, dass ABC wirklich überlegen ist gegenüber gruppiert, und wenn das der Fall ist, machen Sie etwas falsch.
Ich wäre auch neugierig, wie Leute mit Präprozessor-Mixins und Verschachtelung umgehen. Zum Beispiel versuche ich, zuerst alle Mixins aufzurufen und immer alle Stile für den aktuellen Selektor zu deklarieren, bevor ich ein Element verschachtle. Das scheint ziemlich grundlegend zu sein, da es ziemlich verrückt wäre, die Stile eines Selektors durch eine Menge verschachtelten Kram zu trennen.
Außerdem arbeite ich daran, nicht zu viel zu verschachteln (d.h. bei einer einstufigen Navigation setze ich ul, li und a auf die gleiche Ebene).
Das bringt einen sehr guten Punkt hervor – seit ich einen CSS-Präprozessor (SASS) verwende und Konzepte aus OOCSS // SMACSS integriere, sind die einst monolithischen CSS-Klassen mit zahlreichen Stil-Eigenschaften erheblich geschrumpft. Diese Modularität ermöglicht eine deutlich logischere Organisation und Erweiterung von bereits deklarierten Stilen, ohne sich um alphabetische / gruppierte Reihenfolge kümmern zu müssen.
Um auf einige andere Kommentare einzugehen – individuell sehe ich kaum, dass die verwendete Reihenfolge eine Rolle spielt, abgesehen von Ihrer persönlichen Präferenz. In Gruppenumgebungen spart eine gemeinsame Ordnungshilfe Zeit. Zeit ist Geld. Es dauert weitaus weniger Zeit, „Alphabetisch“ zu erklären, als „Nun, Sie sehen, wir machen zuerst das Boxmodell, gefolgt von der Positionierung, dann Farbe…“ usw.
Um ganz ehrlich zu sein, würde ich eine logische Gruppierungsstruktur bevorzugen, aber nur, wenn es sich um eine standardgestützte, weithin akzeptierte Reihenfolge handeln würde, die vereinbart und leicht auswendig zu lernen wäre. Ich kann Ihnen gar nicht sagen, wie ärgerlich es ist, wenn „Höhe“ vor „Breite“ kommt, obwohl Dimensionen „Breite x Höhe“ sind, und ähnliche Umstände.
Ich denke, der beste Weg ist zufällig, da wir Dinge immer ein wenig überstürzt tun.
Früher war ich ein echter Narr und habe nach der Länge des Eigenschaftsnamens sortiert, kombiniert mit einem durch Doppelpunkte getrennten Tabulatorstopp (den ich manuell pflegte). So
Eine Zeit lang sah das großartig aus und machte es einfach, nach bestimmten Werten zu suchen, da die Werte ausgerichtet waren, und ich wusste genau, wo ich nach einer bestimmten Eigenschaft suchen musste, weil ich die Länge des Namens kannte. Es fühlte sich meist schneller an als alphabetisch. Aber ich habe 4 Mal so viel Zeit damit verbracht, alles neu anzuordnen, damit die Doppelpunkte übereinstimmen, jedes Mal, wenn ich eine längere Eigenschaft hinzugefügt habe.
Ich habe versucht, nach Typ zu gruppieren, aber das ist nicht konsistent. Als Beispiel zeigen Sie oben „Positionierung“ und „Boxmodell“ als zwei Abschnitte. Das macht „margin“ zu einer schwierigen Eigenschaft. Mit einem Wert von z. B.
10pxpasst Margin perfekt zum Boxmodell. Aber wenn Siemargin: 0 auto;zuweisen, verwenden Sie es jetzt für die Positionierung.Was ich kürzlich umgestellt habe, ist die Trennung von Layout, Farbe und Typografie. Eine CSS-Datei, die dem Layout gewidmet ist (was die Handhabung responsiver Designs erleichtert). Eine zweite CSS-Datei, die ausschließlich der Farbe gewidmet ist (Randfarben, Hintergrund, Textfarbe usw.). Ich lasse diese zweite Datei manchmal durch einen Präprozessor laufen (z. B. colors.css.php) und verwende dann PHP-Variablen, damit ich Farben leichter mithilfe benannter Variablen zuweisen kann. Und schließlich eine Typografie-CSS-Datei, die Schriftarten, Schriftgrößen und andere typografiebezogene Elemente wie Zeilenabstand, Textausrichtung und in einigen Fällen sogar Padding und Margin (insbesondere für Absatzzeichen, die für Textblöcke und nicht für Layoutblöcke verwendet werden) umfasst.
Ich finde, das macht es sehr flexibel für responsive Designs (colors.css.php muss kaum geändert werden, sobald es erstellt ist), und nur ein paar kleinere Anpassungen am Layout und an der Typografie sind erforderlich, wenn neue Geräte einbezogen werden.
Wenn Sie sich unter SCM befinden, führt ein solcher Ansatz zu tatsächlich unnötigen Änderungen aufgrund ständigen Reindentierens.
Hallo zusammen, das Schreiben von CSS-Code ist eine der wichtigsten Aufgaben für die Gestaltung einer guten Website, eines Projekt-Apps usw. Ich denke, wenn Sie sauberen Code schreiben, wird das Ergebnis dasselbe sein.
Ich ordne CSS normalerweise wie folgt an
.selector{
/* Farbwerte */
/* Boxmodell */
/* Textelemente*/
/* Randstil*/
/* Animationen*/
}
Ich bevorzuge ebenfalls alphabetische Formatierung. Es hilft mir sehr, und ich vermeide es, dieselben Eigenschaften zweimal zu schreiben. Sublime Text 2 erleichtert das Verschieben von Eigenschaften nach oben und unten erheblich.
Ich benutze das Sortieren von CSS-Eigenschaften in einer bestimmten Reihenfolge http://csscomb.com/
Ich gruppiere meine CSS-Eigenschaften persönlich alphabetisch, da ich glaube, dass dies uns hilft, große Mengen linguistischer Daten durch die Nutzung des menschlichen Arbeitsgedächtnisses zu analysieren.
Unser Arbeitsgedächtnis ist darauf trainiert, zu wissen, wie weit (ungefähr) Buchstaben „räumlich“ voneinander im Alphabet entfernt sind. Wenn wir also nach Wörtern in CSS-Eigenschaften suchen, wissen wir, dass die Eigenschaft „border“ am Anfang der deklarierten Eigenschaften erscheinen wird und „top“ irgendwo am Ende.
Natürlich ist dies etwas, das Menschen, deren Muttersprache eine westliche Sprache ist, wahrscheinlich besser finden werden als jemand, dessen Muttersprache keine ist.
Interessanterweise ist die alphabetische Deklaration etwas, das Google in seinen Google Code CSS-Kodierungsstandards verwendet.
In den meisten Fällen gehe ich bei CSS-Eigenschaften völlig zufällig vor, da ich es im Allgemeinen mache und mich bei kleinen Projekten nicht damit beschäftige. Außerdem würde es mich mehr Zeit kosten, CSS-Eigenschaften zu klassifizieren, als die richtige Eigenschaft zu suchen, wenn ich die Datei bearbeiten müsste.
Aber bei größeren Projekten bevorzuge ich die alphabetische Reihenfolge, weil sie klar und universell ist. Selbst wenn ich nach Monaten zum Stylesheet zurückkehren muss, finde ich sofort, was ich brauche.
Aber ich verstehe die Methode des Gruppierens nach Typ, sie macht wirklich Sinn.
Darüber hinaus habe ich meine ursprüngliche Aussage ergänzt, indem ich meine Stile in sogenannte Vorlagenstile (d. h. Stile, die sich mit dem Layout, der Positionierung und der Größe von Elementen befassen) und stilistische Stile (d. h. Stile, die sich damit befassen, wie Elemente „aussehen“) aufgeteilt habe. Die Idee ist, dass ich alle stilistischen CSS-Regeln entfernen können sollte und nichts wirklich auf der Seite bewegt werden sollte – es wird einfach ungestaltet.
Dies dient zwei Zwecken: Es erleichtert das Debuggen von Stilen, da es die Anzahl der Zeilen reduziert, durch die man lesen muss – da man normalerweise weiß, ob das Problem mit dem Layout oder dem Design zusammenhängt, und zweitens erleichtert es die Änderung des stilistischen Designs einer Website, ohne deren Layout zu beeinträchtigen und umgekehrt.
Zusätzlich zu dieser Praxis verwende ich jetzt auch SASS für mein CSS, was es sehr einfach macht, Stile auf diese Weise zu trennen, da das kompilierte CSS das Ergebnis des Imports der Vorlage in die Style .scss-Datei zur Kompilierungszeit sein wird. (Sowie all die anderen schönen Extras, die SASS bietet.)
Persönlich finde ich das überhaupt kein Problem. Jeder Standard in diesem Bereich oder dessen Fehlen ist leicht zu verstehen.
Ich würde sagen, kümmern Sie sich zuerst um Ihre CSS-„Architektur“, d. h. um die Balance zwischen Wiederverwendbarkeit und Semantik, Modularisierung und Vorverarbeitung. Sie können sich mit den Details von Trivialitäten wie diesen beschäftigen, sobald Sie diesen Punkt erreicht haben.
Persönlich mag ich „nach Typ gruppieren“, weil es Ihren CSS-Stilen dem entspricht, was sie tatsächlich gestalten. Es ist eine Erinnerung daran, wie sich die Positionierung/das Boxmodell auf die Wirkung meiner Stile auswirken. Darüber hinaus hält es Dinge, an denen ich wahrscheinlich gleichzeitig arbeiten werde, zusammen. Wenn ich zum Beispiel an einem Layoutproblem arbeite, ist es schön zu wissen, dass alle meine Layout- und Boxmodell-Stile zusammen sind; ich kann leicht herausfinden, wie sich Breite, Padding, Ränder und Margin gegenseitig und das Layout beeinflussen. Wenn ich mich mit einem Textproblem beschäftige, kann ich alle Text-Sachen zusammen sehen und schnell herausfinden, ob eine zusätzliche fette Schrift eine Problem der Schriftart, oder ein Problem der Schriftstärke ist. Ich mag es, Dinge, die nicht für das gelten, was ich gerade tue, mental auszufiltern. Indem ich alles sehen kann, womit ich an einem verwandten Problem arbeite, kann ich den Lärm viel leichter vermeiden.
Wow, ich bin wirklich überrascht, dass Alphabetisch keinen höheren Prozentsatz hat. Sehr interessant.
Die meisten Kommentare für ‚nach Typ gruppieren‘ scheinen von denen zu stammen, die möglicherweise nicht in größeren Teams gearbeitet haben (offensichtlich ist das nur ein Eindruck, keine Tatsache). Als solche kann das Ergebnis von denen verzerrt sein, die alleine arbeiten.
Was Ihren individuellen Stil angeht, ist er für niemanden sonst von Bedeutung. Was auch immer Ihnen am bequemsten ist, ist wahrscheinlich der schnellste Weg für Sie zu programmieren. Wenn es um Teams geht, wird es wichtig.
Ich habe selbst für zufällig gestimmt, vielleicht hätte ich mich gerne in eine etwas andere Kategorie eingegliedert. Zufällig klingt einfach so, als ob mein Gehirn über die Spaghetti-Sauce verstreut ist… Tatsache ist, ich erstelle jeden Bedarf nach Bedarf, und die Dinge entwickeln sich einfach und behalten ihre eigene Ordnung, denke ich.
Alles andere klingt mir ein bisschen zu spießig.
Es wäre interessant gewesen, wenn jeder der Befragten sich als „Designer“ oder „Entwickler“ oder beides kategorisiert hätte.
Interessante Umfrage, thx!
Ja! – nur um meinen eigenen Beitrag zu ergänzen.
Datums-/Zeitreihenfolge würde meine Praxis am besten beschreiben.
Scheiße! Ich habe im Moment wahrscheinlich zu viel Zeit, du bringst mich dazu, darüber nachzudenken.
Datums-/Zeitreihenfolge ist nicht ganz richtig… (bevorzugte) Erstellungsreihenfolge wäre näher dran, denn wenn ich bei z. B. [.generalcontent #colright p{}] bin und einen Bedarf an [a img:hover{}] entdecke, gehe ich zurück und füge oben ein.
Macht das Sinn?
Bevorzugte Erstellungsreihenfolge hat meine endgültige Stimme… vorerst jedenfalls! – es geht um mein eigenes fortlaufendes Lernen.
Danke nochmals, ich werde schweigen und zuhören :-)
Ich neige dazu, Eigenschaften zufällig aufzulisten, aber ich habe vor, eine Form der Organisation auszuprobieren. Es sieht so aus, als würde ich Gruppieren nach Typ ausprobieren!
Ich ordne alphabetisch an, trenne sie aber auch nach CSS3- und CSS2-Gruppen.
Hallo Leute.
Ich denke, dass die von Sung Choi erwähnte Trennung von CSS2- und CSS3-Stilen eine sehr wichtige Sache ist.
Es ist sehr ärgerlich, wenn man versucht, etwas in einem durcheinandergeratenen Code wie dem folgenden zu ändern
Es sieht aus wie grüner Code aus „Matrix“.
Für mich versuche ich, Stile mit „-webkit-“, „-moz-“ usw. nach einfachem CSS2 zu halten, zum Beispiel
So ist es sehr einfach, die notwendigen Stile zu finden und sie in einer solchen Struktur zu ändern.
Ich habe immer zufällig gemacht, aber es gibt oft ein Thema, weil ich normalerweise in einer bestimmten Reihenfolge denke. Dazu muss ich sagen; nachdem ich diese Umfrage gelesen habe, habe ich beschlossen, alphabetisch zu versuchen, da ich denke, dass es universell am sinnvollsten ist.
Bisher war es für mich schwer zu befolgen, da Gewohnheiten schwer zu brechen sind, aber es war sicherlich einfacher, Eigenschaften zu bearbeiten und zu finden.
Danke für die Umfrage.
Ich gruppiere alphabetisch, aber ich platziere die mit Vendor-Präfix oben. Ich denke, es ist leichter anzusehen. Jetzt, wo ich SCSS verwende, platziere ich die mit @include oben.
Tun Sie, was immer Ihnen am bequemsten ist, aber wenn Sie in einem großen Team oder einem großen Portal arbeiten, empfehle ich den gruppierten Stil.
Denn so können wir bestimmte Fehler vermeiden, wenn jemand nach einem Stil zur weiteren Bearbeitung sucht. Sie können den Teil, den sie bearbeiten möchten, sehr einfach suchen und bearbeiten. Kein langes Suchen in allen Stilen jeder Klasse. Sie können den Bereich aus jeder Klasse leicht finden, wenn wir den Stil gruppieren? Jedenfalls danke an Cris für die gute Umfrage.
Ich ordne mein CSS nach Typ und darin alphabetisch....
Das spart mir viel Zeit beim Bearbeiten und Suchen von Code...
Sehr interessante Ergebnisse. Manchmal ordne ich das CSS nach Typ und manchmal ist es zufällig, je nachdem, wie viel CSS es gibt und wofür es ist.
Tolle Umfrage mit interessanten Ergebnissen.
Ich neige dazu, nach Typ zu gruppieren, obwohl ich es nicht aktiv versuche.
Ich könnte mir nie vorstellen, nach Zeilenlänge zu sortieren, obwohl das alphabetische Sortieren die einfachste, klarste und konsistenteste Option im Umgang mit Teams zu sein scheint.
Ich kann nicht glauben, dass 2% nach Zeilenlänge sortieren!
Durchgehend alphabetisch.
Normalerweise ordne ich mein CSS nach der Reihenfolge der Elemente.
Zuerst platziere ich das "globale CSS". Wie HTML, Body, Formularelemente usw...
Danach ordne ich die Elemente in der Reihenfolge ihres Erscheinens im Webseiten-Code.
Beispiel
#header{}
#menu{}
#content{}
#footer{}
Ich denke, die Umfrage bezieht sich auf die Reihenfolge der Eigenschaften. Zum Beispiel
Interessant. Ich ordne meine CSS-Eigenschaften nach der Reihenfolge der HTML-Elemente. Ich meine, ich beginne mit HTML, Body, Wrapper, gefolgt von Header, dann Content, Sidebar, Footer und dann Media Queries oder etwas Zusätzliches.
Das meint Chris mit Eigenschaften (Sie sprechen vielleicht von Selektoren)
Wenn ich mir diesen Beitrag ansehe, schlage ich vor, einen Blick darauf zu werfen
Ich habe es gerade gefunden und es scheint für solche Umfragen gemacht zu sein
Meine war immer zufällig, bis ich das hier gelesen habe. Manchmal habe ich alphabetisch sortiert.
Ich liebe die Idee, nach Typ zu gruppieren und alphabetisch nach Typ zu gruppieren, aber im Moment würde ich mehr Zeit mit dem Neuordnen meiner CSS-Eigenschaften verbringen, als ich mit dem Schreiben von CSS verbringen würde, daher ist es kurzfristig für mich nicht sehr effizient, sie so zu organisieren.
Vielleicht ist es etwas, das ich tun kann, nachdem ich alles geschrieben habe!
Habe nicht abgestimmt, aber hätte "zufällig" gewählt.
Da ich gerne alle Eigenschaften auf eine einzige Zeile schreibe, helfen mir Gruppierung und Sortierung nicht wirklich weiter. Mit einer Zeile/Eigenschaft sieht die gruppierte Option am besten aus.
Ich schreibe meinen CSS-Code gerne, während ich arbeite, und lasse ihn dann ab und zu durch ein CSS-Formatierungsprogramm laufen. Wenn ich also etwas ändern muss, ist das Finden einfach, aber im Moment kann ich einfach Code einhämmern. Das macht es auch für mich und andere wartbarer, wenn wir später Änderungen vornehmen.
Wenn ich das CSS schreibe, ist es fast immer zufällig. Aber bevor die Website live geht, versuche ich normalerweise, nach Typ zu gruppieren, hauptsächlich weil ich sauberes CSS haben möchte, wenn ich das nächste Mal neu gestalte oder Code von dieser Website verwende.
Ich finde wirklich, dass "nach Elementen sortieren" eine Option sein sollte.
Ich bin wirklich überrascht, dass alphabetisch so niedrig ist. Google empfiehlt die Verwendung in ihren Front-End-Richtlinien.
Haben Sie einen Link zu einer Kopie ihrer Richtlinien?
Die Methode nach Typ zu sortieren ermöglicht es Ihnen, leicht zu visualisieren, wie das Objekt gerendert werden soll, wobei das Rendering visuell von außen nach innen organisiert wird. Dies ist besonders nützlich, da Breite und Höhe von den vorherigen Eigenschaften beeinflusst werden. Dies erleichtert es, zu erkennen, wo ein Layoutproblem liegen könnte. Das Auflisten des CSS3-Krams am Ende erleichtert auch das visuelle Lesen der Details.
Tatsächliche Selektoren – Ich organisiere diese nach Gruppen – was alles zum Header oder Footer oder einem bestimmten Seitenelement gehört.
Aber was die Eigenschaften für einen bestimmten Selektor betrifft – das ist zufällig.
Ich muss zugeben, ich verwende zufällig. Manchmal gehe ich zurück und organisiere sie in Gruppen, die miteinander zu tun haben.
Ich ordne die Eigenschaften innerhalb eines Deklarationsblocks ähnlich der Reihenfolge des Box-Modells an. 1. Inhalt (Display/Position, Breite/Höhe, Hintergrund, Schriftart usw. 2. Polsterung 3. Rahmen (Dekorationen: z. B. Rand-Radius, Schatten usw.), Überlauf usw. 3. Rand und Sonstiges (z. B. Cursor, Übergang usw.)
Korrektur/Ergänzung: 1. Inhalt (Display/Position, Breite/Höhe, Hintergrund, Schriftart usw. 2. Polsterung 3. Rahmen (Dekorationen: z. B. Rand-Radius, Schatten usw.) 4. Rand und Sonstiges (z. B. Überlauf, Cursor, Übergang usw.)
Ich habe gerade erstellt
mit einigen unterschiedlichen möglichen Antworten unter Berücksichtigung der Kommentare in diesem Thread
Diese Umfrage bezieht sich auf Selektoren, während sich diese hier mit Eigenschaften befasst.
Meiner Meinung nach geht es weniger darum, wie die Regeln organisiert sind, als vielmehr darum, wie das gesamte Dokument organisiert ist. Wir alle verwenden hier Single-Line-CSS. Das Scannen erfolgt also von oben nach unten, dann von links nach rechts. Zum Regelpunkt zu gelangen ist wichtiger als die Reihenfolge der Stile innerhalb der Regel.
body {margin: 0; padding: 0; font-family: Verdana, Arial, Sans-serif;}
p {font-size: 12px; line-height: 140%;}
a {text-decoration: none; color: #369;}
.clear {clear: both;}
.right {float: right;}
.left {float: left;}
#wrapper {width: 80%; margin: 0 10%;}
#head {height: 100px; width: 100%;}
#head h2 {color: #222;}
#nav {}
#nav li {}
#content {}
#content img {}
#footer {}
Guter Punkt, Jason. So schreibe ich auch CSS.
Ich sehe hier viele Leute, die die Stile alphabetisch sortieren. Mir ist klar, dass der einzige Weg, wie sie eine Regel im Stylesheet finden können, darin besteht, so lange zu scrollen, bis sie den Buchstaben erreichen, mit dem ihre Regel beginnt.
Wenn sie wüssten, wie man den Browser-Inspektor benutzt, um eine Regel zu identifizieren, würden sie sich keine Sekunde Gedanken über die Sortierung machen. Alphabetische Sortierung ist viel Arbeit für nichts.
Es ist sinnvoller, die Regeln nach dem Abschnitt zu sortieren, auf den sie angewendet werden, genau wie Sie oben gezeigt haben.
Ich stimme den obigen Ansichten zu. Ich schreibe/organisiere mein CSS in der Reihenfolge, in der die Regeln auf der eigentlichen Website erscheinen würden. Es ist für mich visuell sinnvoller, so zu organisieren, wie es gesehen wird, und nicht, wie ich nach Regeln in einem Texteditor suche – insbesondere angesichts der Tatsache, dass ich, wenn ich etwas suche, wahrscheinlich weiß, wo es ist, oder meine Hand über CTRL+F habe. Wenn man weiß, wie man ein Dokument schnell durchsucht, wird die Sortierung überhaupt bedeutungslos.
Das gesagt, füge ich auch Kommentare zu den Abschnitten in großen Stylesheets hinzu, damit jeder, der später danach sucht, weiß, wofür dieser Abschnitt ist (auch wenn es offensichtlich ist).
Wenn doch nur WordPress-Theme-Entwickler eine kohärente Methode zur Organisation ihrer Stylesheets übernehmen würden (kann ich ein HELLS YEAH bekommen?!)
Gibt es gute Software, die das Sortieren von Eigenschaften ermöglicht?
Damit Leute mit unterschiedlichen Präferenzen sie einfach neu formatieren/sortieren können.
Jeder könnte so arbeiten, wie er es persönlich am besten für geeignet hält, und es dann nach den endgültigen Bedürfnissen des Projekts neu formatieren.
Leute, die Code von bestehenden Projekten übernehmen, könnten ebenfalls Eigenschaften nach ihrer Präferenz neu ordnen, bevor sie mit der Bearbeitung des Codes fortfahren.
Ich habe online CSS-Optimierer gesehen, aber sie haben die Reihenfolge der Eigenschaften nicht geändert.
Ich bin gespannt auf die Gedanken oder Erfahrungen anderer dazu.
Das könnte sein, wonach Sie suchen: https://github.com/miripiruni/CSScomb/
Ich habe früher jahrelang TopStyle benutzt und es hatte eine Funktion, um CSS basierend auf den von Ihnen festgelegten Einstellungen zu bereinigen und neu zu ordnen. Ich habe das CSScomb-Plugin für Sublime Text 2 und Notepad++ ausprobiert und keines davon hat funktioniert. Dann habe ich das CSSTidy-Plugin ausprobiert, das das CSS bereinigt hat, aber nichts neu geordnet hat, also Pech gehabt...
Ich folge den Vorschlägen von Harry Roberts @csswizardry und Mark Otto @mdo.
Hallo Chris!
Wie wäre es mit dieser Umfrageidee
Welches ist die schwierigste Sprache, die Sie lernen mussten?
a. PHP b. HTML (ha!) c. Javascript d. Ruby, usw.
@steph .... hmmm schwierige Frage. Ruby ist die Antwort, da ich es nicht kenne :(
Ich habe viele Jahre lang Webdesign betrieben (damals, als Tabellen eine Modeerscheinung waren) und arbeite mich erst jetzt zum Profi hoch. Im Laufe der Jahre habe ich festgestellt, dass, wie einige gesagt haben, alphabetisch für mich funktioniert. Ich finde, wenn ich mit einem Kunden zusammen bin, der wissen möchte, warum etwas hier positioniert ist oder wie sich die Größe geändert hat, ermöglicht mir das alphabetische CSS, schnell zu scannen, während ich meine Präsentation halte. Ich habe andere "Modi" ausprobiert, wie z. B. nach Typ oder nach logischer Reihenfolge, aber selbst wenn ich im Eilverfahren zufällig etwas hinzugefügt habe, gehe ich zurück und platziere es dort, wo es alphabetisch hingehört, und das ist für mich am schnellsten. Ich denke, heutzutage kommt es wirklich auf die Komfortzone des Designers an. Ganz zu schweigen davon, wie einfach es ist, einigen meiner Kunden (die es lernen möchten) zu zeigen, wie sie die Eigenschaften ändern können, weil sie wissen, dass "background" im vorderen Bereich und "z-index" im hinteren Bereich liegt und leicht zugänglich ist.
Großartig. Ich habe eine strenge Struktur, der ich folge, und das ist Gruppierung nach Typ. Mit einer Ausnahme: Hintergrund kommt zuletzt.
Meine Methoden wurden in Frage gestellt, und andere Entwickler haben sogar versucht, mich dazu zu bringen, alphabetisch zu sortieren... ha! Es ist toll zu sehen, dass andere ähnlich denken.
Gut zu wissen, dass ich nicht der Einzige bin, der so auf die Reihenfolge beim Schreiben von CSS achtet. Ich bin ein Gruppierungs-Typ. Ich arbeite an einer großen Webanwendung und es macht es einfacher, durch CSS zu scannen, wenn man weiß, was kommt. Ich mochte nie die Alpha- oder Zufalls-Methoden (obwohl ich mich in Eile vielleicht nicht an die gruppierte Reihenfolge halte, aber ich gehe später zurück und korrigiere es).
Nun, mit MSVS wird das meiste davon für Sie erledigt. Ich benutze einfach die "Dokumentenstruktur"-Ansicht und sie kümmert sich darum, das CSS sauber für Sie zu gruppieren.
Ich habe die Gruppierung wie viele Leute jetzt verwendet. Aber ich habe diesen Ansatz wegen der Unfähigkeit, in einem einfachen Notepad schnell zu suchen, verworfen.
Wenn Sie einen neuen CSS von Grund auf neu schreiben, möchten Sie ihn so schnell wie möglich erstellen, daher empfehle ich allen, die Eigenschaften in alphabetischer Reihenfolge zu schreiben. Das spart Ihnen in Zukunft viel Zeit.
Das ist die seltsamste Erklärung bisher. Haben Sie vom Browser-Inspektor gehört, um eine Regel zu finden, die Sie bearbeiten möchten?
Warum müssen Sie in Notepad durch manuelles Scrollen suchen, wenn Sie Strg+F verwenden können?
Und wenn Sie an einem bestehenden CSS mit über 1000 Zeilen Code arbeiten, verbringen Sie dann zuerst ein oder zwei Tage damit, die vorhandenen Regeln alphabetisch neu zu ordnen?
Wissen Sie, es gibt eine Gruppierung, die 1000-mal sinnvoller ist. Das ist die Gruppierung nach Abschnitten, auf die sich die Stile anwenden
Z.B.
css reset styles…
header styles…
sidebar styles…
content styles…
footer styles…