Die Umfrage befindet sich in der Seitenleiste, springen Sie also dorthin, um abzustimmen. Beispiele für die verschiedenen CSS-Formatierungsmethoden finden Sie hier. Ich denke, das deckt die meisten gängigen CSS-Formatierungsmethoden ab, aber wenn Sie Ihre eigene einzigartige Methode haben, können Sie gerne etwas Code oder einen Link zu einer Beispiel-CSS-Datei in den Kommentaren posten!
Ich halte es für ein interessantes Thema, da es sich auf die Auswirkungen auswirkt, die es auf eine Website und das Arbeitsleben des Front-End-Coders haben kann. Wir verbringen so viel Zeit mit CSS, dass die Art und Weise, wie wir es formatieren, beeinflusst, wie effizient wir es schreiben können, wie leicht wir mit altem CSS wieder vertraut werden und sogar potenziell die Ladezeiten von Seiten beeinflussen kann, vorausgesetzt, Sie komprimieren Ihr CSS nicht.
Bei mehr als 3 Argumenten verwende ich das
#id{
[Tab]color: #333;
height: 20px
}
Bei 3 oder weniger verwende ich
.class{ color: #220000; text-decoration: underline; }
Amen! Alle anderen Methoden sind eine völlige Verschwendung von visuellem Platz, besonders bei großen Mengen an CSS.
Ich merke, dass ich mich heutzutage ärgere, wenn es anders formatiert ist. Traurig, ich weiß, aber wahr.
so
document.write(“hallo welt);
ups, es wurde tatsächlich das html verwendet
document.write(“hallo welt);
Ja, ich mache etwas Ähnliches – funktioniert gut. Der einzige Unterschied zu meinem Ansatz ist, dass ich versuche, die öffnende { der Deklaration an dieselbe Stelle einzurücken.
Außerdem neige ich dazu, mehr Argumente etwas einzurücken.
So etwas wie
div.menu {..}div.menu ul {..}
div.menu li {..}
div.menu a {
...
...
...
...
}
Es funktioniert, zumindest für mich – ich kann mich leicht in meinem CSS orientieren.
Das CSS wird am Ende minifiziert, sodass ich verrückt werden kann, wie es im Editor aussieht :)
Ups, es wurde durcheinander gebracht, ich hoffe, Sie verstehen den Punkt trotzdem.
Ich formatiere mein CSS fast immer mit mehrzeiliger Formatierung und Einrückung, sowie mit der Gliederung nach vordefinierten HTML-Tags, IDs oder Klassen, und dann werden die Stile darin alphabetisch aufgelistet (so gut ich kann!).
Zum Beispiel:
Dann schließlich style ich normalerweise alle großen Aspekte einer Website (Bild-Slider, Lightbox, etc.) als separate Elemente, alphabetisch am Ende!
Immer so, das ist kompakt und für mich besser zu lesen.
.style { font-size:100%; font-weight:900; … }
Amen, Bruder!
Genauso bei mir, es ist kompakter in der Datei (ich scrolle nicht gerne zu viel) und Firebug organisiert es gut, sodass ich es einfach bearbeiten kann.
Amen!
Dito. Ich kann es nicht ertragen, in riesigen Dateien auf und ab zu scrollen.
Ja! Einkreisige Zeilen sind viel einfacher zu lesen, als die meisten mehrzeiligen CSS-Coder denken.
Ich stimme vollkommen zu. Vor ein paar Jahren war ich ein mehrzeiliger CSS-Coder, aber jetzt mache ich meistens einzeilige. Wenn es viele Selektoren gibt, trenne ich sie jedoch auf mehreren Zeilen.
Genauso bei mir, ohne das Leerzeichen vor dem {, aber es ist viel einfacher zu lesen, und ich ordne die Eigenschaften alphabetisch an (um Duplikate zu vermeiden).
Ich kann nicht verstehen, warum einzeilige Zeilen besser lesbar sein sollten... besonders wenn Sie mehr als 10 Eigenschaften haben. Das ist so verwirrend... mehrzeilig bleibt es leicht lesbar.
Ich stimme lukas und Kieran zu. Es ist nicht nötig, mehrzeilig mit 3 oder weniger Eigenschaften zu schreiben. Aber sobald es mehr wird, muss ich zu lange suchen.
Aber vielleicht ändere ich eines Tages... weiß noch nicht :D
Ich entschuldige mich für mein Englisch, hoffe, Sie konnten es verstehen.
/* Name für diesen Abschnitt */
Selektor
{Eigenschaften}
/* Nächster Abschnitt…
Das ist einfach, da die meiste Zeit, die man damit verbringt, nach einer bestimmten Eigenschaft im Dokument zu suchen, das Suchen nach dem richtigen Selektor ist. Durch die Minimierung des Platzes zwischen den Selektoren geht das Pflegen von CSS auf diese Weise viel schneller, zumindest für mich.
Ich versuche auch, die Eigenschaften alphabetisch zu halten, aus demselben Grund.
Ich verwende mehrzeilig mit Einrückungen. Wenn die Website live geht, komprimiere ich sie, sodass sie einzeilig ohne unnötige Leerzeichen ist. Ich alphabetisiere auch.
p {
font-size: 1.25em;
}
Ich rücke alles ein.
Keine Leerzeichen, lange Zeilen. Ich arbeite an einem großen Breitbildmonitor und möchte, dass er vollständig mit Code gefüllt ist.
Oh, wie gehe ich mit dem Chaos um? CMD+F
Ich verwende normalerweise mehrzeilig für alles außer einzelnen Regeln.
Ich denke, was wichtiger ist, ist, wie das CSS-Dokument *strukturiert* ist und ob Kommentare verwendet werden. Wie in meinem Beispiel oben werde ich vor einem bestimmten Abschnitt einen großen Kommentarblock einfügen, der angibt, wofür die Elemente dort sind.
+1m
Ich auch :)
gleich, gleich
ich benutze es auf die gleiche Weise
/*** CONTENT STARTSEITE ***/
#header-pic {
margin-bottom: 20px;
height: 130px;
overflow: hidden;
}
#header-pic-start {
margin-bottom: 10px;
}
#main-area {
float: left;
width: 710px;
margin-bottom: 10px;
}
Das gilt auch für mich. Ich bevorzuge diese Methode sehr
Ich bevorzuge das!…
Absolut genauso, ich mag kein Gedränge. = ) Dinge sollten schön luftig sein.
Ich verwende sowohl mehrzeilig mit Einrückung als auch einzeilige Formatierung. Hängt von der Situation ab. Wenn eine Regel weniger als drei Selektoren enthält. Ich verwende auch viele Kommentare und wenn etwas, auf das ich absolut pingelig bin, ist die Vermeidung von Padding. Urgh.
Auch wenn ich für eine ID oder Klasse keine bestimmte Formatierung benötige, liste ich sie trotzdem in meinem Stylesheet auf.
Wenn ich float verwende, liste ich normalerweise auch die Gesamtbreite der Floats auf, damit die Berechnung einfach ist.
Vor allem versuche ich, Kurzschreibweisen für CSS so weit wie möglich zu verwenden.
Ich stimme Danny zu. Das ist meiner Formatierung sehr ähnlich. Durch das Einrücken von Kindern wird die Hierarchie viel klarer und organisierter.
Ich benutze Kompass, das die gesamte Formatierung für mich übernimmt :)
Ich habe die Überschrift gelesen und sofort gedacht: „Ich mache mir keine Sorgen, weil ich Sass benutze“ :)
Einzeilige Formatierung durchgehend. Mehrzeilige CSS-Formatierung macht Ihre Stylesheets viel zu lang und Sie müssen am Ende ewig suchen, um Dinge zu finden.
Walsh hat mich total zur einzeiligen Methode mit Einrückung (nicht Tabulator) bekehrt. ;)
Hier ist etwas CSS von meiner tatsächlichen Website.
Ich bin mir sicher, dass vieles daran falsch ist, aber es funktioniert, also ist es in Ordnung, soweit es mich betrifft.
Ich habe früher mehrzeilig verwendet, aber bei langen CSS-Dateien wird das Scrollen zu viel. Besonders wenn Sie das CSS in einem winzigen Fenster bearbeiten, das in ein CMS integriert ist.
Einzeilige Formatierung mit Einrückung/Tabulator durchgehend!
Ja, ich habe auch mit mehrzeilig angefangen. Als ich zu Coda wechselte, habe ich umgestellt, und als ich zu Dreamweaver zurückkehrte, blieb die Gewohnheit irgendwie.
Ich verwende einzeilige Formatierung.
Ich habe diese Nachricht zuerst in Notepad geschrieben, daher habe ich keine Ahnung, ob sie nach dem Posten gut aussieht, da es keine Vorschau gibt.
—
Nachdem ich Dan Rubin auf ein paar Web Design World Konferenzen gesehen habe, habe ich versucht, seinen Ansatz, CSS in einer einzeiligen Formatierung zu schreiben, auszuprobieren. Ich habe immer CSS auf die übliche Weise geschrieben, das heißt, mehrzeilig.
Es gefiel mir, aber am wichtigsten ist, dass es die Verwaltung der CSS-Regeln VIEL einfacher machte.
Etwas, das ich jedem erzähle, und Dan habe ich es auch gesagt, ist, dass heutige Monitore breiter und größer sind, also nutzt das Schreiben in einer einzigen Zeile die Breite Ihres Monitors aus, was bedeutet, dass Sie mehr Regeln auf einem Bildschirm sehen können.
Ich ging einen kleinen Schritt weiter als Dans einzeiliges Schreiben und implementierte meine eigene Methode beim Schreiben der Eigenschaften.
Hier ist ein Beispiel (dies ist aus einem echten Projekt)
Ich lasse die langen Deklarationen für die letzte, wie 'background:' und 'font:'.
Ich lasse ein Leerzeichen nach der ersten '{' und vor der letzten '}'.
„float:“ kommt immer zuerst, wenn es in der Deklaration benötigt wird.
„widht:“ zuerst, „height:“ kommt immer an zweiter Stelle. Das liegt daran, dass man aus der Druckwelt kommend, wenn man sich auf die Abmessungen eines Dokuments bezieht, die erste Dimension, die man nennt, die Breite ist.
Ich beginne immer mit dem einfachsten Selektor und behalte sie gruppiert, wenn ich mehr Regeln benötige, die sich auf denselben Selektor beziehen. Wenn ein neuer Satz von Regeln für einen Selektor benötigt wird, beginne ich eine neue Gruppe.
Jede Gruppe hat einen Kommentar, der sie beschreibt.
Probieren Sie es aus, in einer einzigen Zeile zu schreiben. Ich hätte nicht gedacht, dass ich meine Gewohnheit nach so vielen Jahren des üblichen CSS-Schreibens ändern würde.
Später dann.
Das hat nicht funktioniert, hier ist es noch einmal
1. Ich lasse die langen Deklarationen für die letzte, wie „background:“ und „font:“.
2. Ich lasse ein Leerzeichen nach der ersten „{“ und vor der letzten „}“.
3. „float:“ kommt immer zuerst, wenn es in der Deklaration benötigt wird.
4. „widht:“ zuerst, „height:“ kommt immer an zweiter Stelle. Das liegt daran, dass man aus der Druckwelt kommend, wenn man sich auf die Abmessungen eines Dokuments bezieht, die erste Dimension, die man nennt, die Breite ist.
5. Ich beginne immer mit dem einfachsten Selektor und behalte sie gruppiert, wenn ich mehr Regeln benötige, die sich auf denselben Selektor beziehen. Wenn ein neuer Satz von Regeln für einen Selektor benötigt wird, beginne ich eine neue Gruppe.
6. Jede Gruppe hat einen Kommentar, der sie beschreibt.
Diese Struktur ist meine Art.
Ich auch!
E {....property:value;
....}
....E>E {
........property:value;
........}
Ich habe "Mehrzeilige Formatierung" gemacht, aber seit fast 2 Jahren, seitdem ich Chris dabei gesehen habe, benutze ich "hauptsächlich einzeilig". Ich habe das Gefühl, es hat meine CSS-Fähigkeiten irgendwie verbessert.
Dieses einzeilige Format gibt mir eine relativ kurze CSS-Datei, die es mir ermöglicht, schnell durchzublättern und zu finden, was ich suche.
Ein Nachteil der Einzeiligkeit ist, dass Tabs browser-/editorübergreifend unterschiedlich interpretiert werden können. Aber was soll's :) – solange es in meinem Editor gut ist.
#div
{
…..property:value;
}
Klammern, die nicht auf einer eigenen Zeile stehen, lassen mich krank werden. Ich weiß nicht warum.
Das ist lustig, ich fühle mich krank, wenn ich es so sehe. Völlig nur eine seltsame persönliche Vorliebe.
Ich verwende mehrzeilige Formatierung, komprimiere sie aber, nachdem ich das Projekt abgeschlossen habe, und behalte 2 Kopien, während ich nur die komprimierte lade. Ich verwende auch mod_deflate, also bin ich gut *denke ich*
+1 Dafür, es ist WEITAUS schneller, Deklarationen mit mehrzeiliger Formatierung zu finden. Dann, wenn Sie sie für die Produktion komprimieren, kümmert sich das um alles andere.
Das machen wir auch; im Grunde verwenden wir eine mehrzeilige Formatierung ohne Einrückung / Tabbing und nutzen Komprimierung zur Build-Zeit. Wir haben auch ein Dienstprogramm entwickelt, um alternativ die unkomprimierten Originaldateien direkt im Browser für eine einfachere Fehlersuche zu verwenden.
Einzeilig funktioniert für mich am besten.
Wenn ich mit CodeIgniter arbeite, verwende ich eine Asset-Bibliothek, die alle meine CSS-Dateien zu einer Datei kombiniert, und sie minifiziert den Code auch mit cssmin.
tolle Idee für eine Umfrage. Seit ich mit Webdesign angefangen habe, habe ich mich gefragt, wie ich CSS formatieren sollte. Es hat sich ein paar Mal geändert, daher wünsche ich mir eine gut begründete „Best Practice“. Diese Umfrage wird interessant und wird wahrscheinlich beeinflussen, wie ich CSS in Zukunft mache.
Einzeilig rockt. CSS ist keine Programmiersprache… eher eine Eigenschaftendatei. Sie verschwenden so viel Zeit mit der gesamten Formatierung.
Ein kleiner Ausschnitt hier vom letzten Redesign meines Blogs.
Entschuldigung, wie lang das ist, es war der einzige Weg, wie ich wirklich zeigen konnte, wie ich es mache, außer dass die gesamte Formatierung etwas fehlte. Ich dachte, ich versuche es (obwohl es fehlschlug), es zu posten, weil die meisten Leute sagen, ich habe eine ziemlich einzigartige Art, es zu machen!
SASS (oder LESS).
Das war einfach!
Ich habe anfangs etwas gekämpft und ich muss sagen, dass ich die Verwendung meines bevorzugten CSS-Editors (CSSEdit) verloren habe. Aber die Gewinne durch die Verwendung von SASS waren gewaltig.
Jetzt würde ich es schmerzhaft und mühsam finden, zu den alten Zeiten von Raw-CSS zurückzukehren.
Mehrzeilige Formatierung, obwohl ich einzeilige Formatierung für sehr spezifische Regeln verwenden werde (wie Sprites).
für Inline-Elemente
elem{ color:blue; text-decoration:underline;}
für Blockelemente
.class{
width:300px;
height:344px;
background:red;
}
Einzeilig für immer
Für Leute, die etwas anderes als TextMate verwenden, verstehe ich, warum Sie denken mögen, dass eine Methode schneller ist als eine andere. Aber für TextMate-Benutzer ermöglicht CMD+Shift+T, mit dem Tippen eines Teils seines Namens zu einem Selektor zu springen.
Meiner Meinung nach ist mehrzeilig am einfachsten zu lesen, da Sie nicht versuchen, Deklarationen zu finden, indem Sie sie beim Scrollen mit dem Auge erfassen.
Mehrzeilige Formatierung mit Einrückungen. Einrückungen sind meist eine Gewohnheit aus der Programmierung, aber sie fühlen sich auch sauberer an.
Außerdem sind alle Stile innerhalb eines Selektors alphabetisch.
Einzeilig mit Einrückung und mit Kommentaren, um die größten Bereiche der HTML-Seite zu trennen.
Darüber hinaus schreibe ich CSS-Eigenschaften immer in einer logischen Reihenfolge für meinen Geist… :-)
Zum Beispiel schreibe ich zuerst die Eigenschaften wie Margin, Position, Float, Padding und am Ende die Font-Eigenschaften.
Schöner Wettbewerb! ;-)
Wenn ich nicht SASS oder Less verwende: einzeilig, seit ein paar Wochen mit Einrückung. Die Einrückungen lassen mich die Verschachtelung der Elemente besser sehen und besser scannen.
Was die Sortierung angeht: Basis-Elemente, dann Klassen, dann Basis-Layout und schließlich spezifische IDs.
Mein Beispiel wäre zu lang, um es hier einzufügen, daher poste ich nur einen Link zu einem kürzlichen Projekt, dessen Anfangstheming ich geleitet habe.
http://gist.github.com/226212
Website, die es verwendet: http://kysdc.com/
Wie Sie sehen werden, erstelle ich
Index
Style Index
Mehrzeilige Regeln innerhalb von Gruppen.
Einzeilige Zeilen mit Kommentaren, die bestimmte Teile immer abschnittsweise trennen. Einzeilige Zeilen ermöglichen es Ihnen, schnell durch lange CSS-Stylesheets zu scrollen, und mit den Kommentaren können Sie bestimmte Abschnitte leicht finden. Außerdem kann ich mit dieser Methode normalerweise ein Stylesheet haben und es so ziemlich wieder für eine andere Website verwenden, d.h. Dinge wie das Styling des Fußzeilenbereichs und Links bleiben normalerweise gleich, vielleicht mit einer anderen Farbwahl! Am Ende des Tages ist es jedem selbst überlassen, und wenn man einmal einen Weg gelernt hat, ist es schwer, sich an einen anderen anzupassen.
Mehrzeilig mit Einrückung.
Meine Stile würden also wie folgt aussehen
Auf diese Weise können Sie eine Hierarchie zeigen. Außerdem organisiere ich in einer Struktur ähnlich wie
Ich weiß, dass viele Leute dazu neigen, die Stile alphabetisch zu organisieren, aber ich ziehe es vor, sie in einer Weise der Abhängigkeit zu organisieren… zum Beispiel
oder
Beim ersten, Höhe und Breite sind Abmessungen, die von display: block abhängen. Und beim zweiten hängen top und left von position: absolute ab. Das macht für mich mehr Sinn, als es alphabetisch zu machen.
Ich lasse auch das letzte Semikolon nicht weg. Manche Leute machen das, um Dateigröße zu sparen, aber ich denke, wenn ich mehr Stile hinzufügen muss, muss ich zuerst das letzte Semikolon hinzufügen, bevor ich anfangen kann, also lasse ich es gleich drin.
Ich bevorzuge mehrzeilig, weil es professioneller aussieht und es viel einfacher macht, einzelne Eigenschaften zu kopieren und einzufügen und Ihr CSS schnell umzugestalten.
Wenn es jedoch eine Abfolge von Regeln mit sehr ähnlichen Attributen gibt (passiert normalerweise mit background-position, wenn Sie Sprites verwenden), sieht es ordentlicher aus, einzeilige Zeilen zu verwenden.
Mehrzeiliges Format. Definitiv.
#MOTHER
.CHILD
…
//von SASS + COMPASS
Ich persönlich mag die Einrückung nicht.
Mehrzeilig mit guten Kommentaren lässt mich immer lächeln :-)
Ich habe kürzlich mit dem Einrücken begonnen, mit einer Art Hybrid aus einzeilig/mehrzeilig...
Ich war immer ein geradliniger Einzeiler, aber ich fand mich immer danach, mehr Struktur hineinbringen zu wollen. Wenn eine CSS-Datei groß wird, habe ich Schwierigkeiten, das zu finden, was ich suche.
Ich habe tatsächlich vor einiger Zeit einen Thread dazu erstellt, 68 Aufrufe, 0 Antworten. Ich schätze, ihr mochtet meinen vorgeschlagenen Stil nicht :P
https://css-tricks.de/forums/viewtopic.php?f=4&t=4756
Ich bin ein mehrzeiliger mit Einrückung-Typ, aber ich erwäge ernsthaft, zu einzeiliger mit Einrückung zu wechseln, da ich gerne diesen Scrollplatz sparen würde.
Ich schreibe es auf zwei Zeilen…
#selector
{ Deklarationen in alphabetischer Reihenfolge }
…es dauert zwar, bis man sich daran gewöhnt hat, Regeln alphabetisch zu schreiben, aber es ist viel einfacher, Monate später damit umzugehen, wenn man zum Projekt zurückkehrt, um Änderungen vorzunehmen.
Meine Deklarationen entsprechen der Kernstruktur meiner HTML-Datei (dem Teil der Seite, der sich nie ändert – wie meine Kopfzeile > Hauptinhalt > Fußzeile).
Dann gehen alle Stile, die außerhalb dieser Struktur fallen (wie der Inhalt für die Homepage und Unterseiten), unter die Kern-Deklarationen.
Funktioniert für mich, aber ich kann verstehen, dass dies ein sehr persönliches Thema für CSS-Ninjas ist und was für den einen von uns gut ist, ist nicht unbedingt der beste Weg für uns alle.
Was lustig ist, ich habe CSS rein von dir, Chris, gelernt, also habe ich mit mehrzeilig angefangen, weil ich es in einem deiner Screencasts so gesehen habe, und dann bin ich zu „hauptsächlich einzeilig“ gewechselt, wie du es in deinen Screencasts gemacht hast!
Danke, dass du ein **wicked** Lehrer bist!
Ich bin einzeilig mit Tabbing – ich bin überrascht, dass es derzeit nur bei 4 % in der Umfrage liegt, da ich glaube, dass dies die bevorzugte Methode von Chris Coyier ist. Meine alten Websites sind im mehrzeiligen Format, und wenn ich zurückgehe, um sie zu aktualisieren, bin ich erstaunt/genervt, wie weit alles auseinander gezogen ist!
Ich verwende Mehrzeilig mit Einrückung, aber einige Argumente auf derselben Zeile – d.h.
div#something {
[TAB]width:Xpx; height:Ypx;
[TAB]margin:0; padding:0;
[TAB]font:style weight size/height family;
[TAB]color:#xxxxxx; background-color:#yyyyyy;
[TAB]}
#menu {
display:block;
float:left;
}
.active {
color: #f1f2fa;
font-weight: bold;
}
In dieser Situation befindet sich meine 'active'-Klasse innerhalb der Menü-Div-Tags.
sauberer Code ist neben Heiligkeit, sagte meine Mutter immer
so
#id
{
indent: stuff;
}
für mich
Sie *wissen*, wie ich es mache – ich habe vor über einem Jahr eine ganze Serie zu diesem Thema geschrieben.
Ich habe zwei verschiedene Stile für verschiedene Anwendungsfälle.
Mein Standard-Codierungsstil
#blargh { color:black; background:white; }
..#blargh a { color:#9c0; text-decoration:none; }
....#blargh a:hover { color:#900; }
Einige Projekte haben eine separate Datei für Hacks oder browserspezifische Dinge
#blargh { border-radius: 1em;
..-moz-border-radius: 1em;
..-webkit-border-radius: 1em; }
mehrzeilig, keine Einrückung, keine Leerzeichen zwischen Eigenschaft und Wert UND in alphabetischer Reihenfolge ;)
Körper {
background:#222;
color:#444;
font-size:14px;
font-family:Georgia,"Times New Roman",sans;
text-align:center;
}
Mehrzeilige Formatierung mit Einrückung ftw!
Ich verwende den One True Brace Style, mit gruppierten Eigenschaften.
Ich verwende mehrzeilig mit Einrückung, wenn der Selektor mehr als 2 Eigenschaften hat, und einzeilig, wenn es nur 1 ist.
Beispiel
Ich verwende eine Kombination, mehrzeilig, aber gruppiere verwandte Eigenschaften. Ich finde, das gibt mir ein Gleichgewicht zwischen nicht so viel scrollen müssen, die Klassen usw. sind leicht zu scannen, aber jede Eigenschaft ist leicht schnell zu erkennen. Ich verwende auch Kommentare, um mich im Stylesheet zurechtzufinden.
Beispiel
Körper {
color:#333;
margin:0 auto;
font-family:Verdana, Arial, Helvetica, sans-serif
font-size:12px;
}
Ich mache es für mich lesbar und wenn ich alles so habe, wie ich es möchte, verarbeite ich das CSS durch einen Kompressor und verwende diesen für die Website. Solange ich das Original habe, habe ich eine besser lesbare Version.
Ich style mein CSS so
Sie, mein Herr, sind ein Muster-CSS-Coder. Ich verneige mich vor Ihrer Geduld.
Ich komprimiere nichts außer gzip, daher ist es wichtig, dass ich eine einzelne Zeile verwende, angesichts der Menge an CSS, die ich verwende.
Hier ist meine Haupt-CSS-Datei, und ja, ich kann sie alle gut lesen
http://cdn.myunv.com/css/uecore.css
Anstatt der „alphabetisch geordneten Eigenschaften“ habe ich meine eigene Reihenfolge, wie Blockeigenschaften und Positionierung zuerst (Ränder, Breite), dann Farben, dann Dinge wie Schriftart, Textschatten, Rahmen usw.
Ich blockiere Code im Allgemeinen in ähnliche Abschnitte
/* Seitenlayout */
Körper {
…
}
#pagewrap {
…
}
/* Menü */
#ul.nav {
…
}
usw.
Ich verwende die folgende Methode anstelle von einer Zeile – ich hasse es einfach, wie es aussieht, wenn ein Editor den Text umbricht, und ich hasse es, zum Suchen zu scrollen. Diese Methode ist meiner Meinung nach also viel sauberer.
#pagewrap {
hintergrund;
farbe:#ccc;
abstand: 5px 0;
rahmen:1px solid #000;
}
Eine einzige Zeile mit Eigenschaften in alphabetischer Reihenfolge.
Außerdem versuche ich, die gleiche Struktur wie bei meiner HTML-Reihenfolge zu verwenden.
– Zurücksetzen
– Seitenstruktur in der Reihenfolge (Wrapper, Kopfzeile, Navigation, Inhalt, Seitenleiste, Fußzeile)
dann Blockspezifische Deklarationen gemäß der gleichen Reihenfolge im Gerüst
– Deklarationen für Kopfzeilenelemente
– Deklarationen für Navigationselemente
– Inhalt
– Seitenleiste
– Fußzeile
und am Ende
Formularelemente und Fehler
.class{
rahmen:1px solid;
hintern:groß;
augen:blau;
}
Einfach zu unterscheiden.
Aber viel Scrollen.
Ich bin es irgendwie gewohnt.
Beim Entwickeln mache ich es so lesbar wie möglich, da ich es am Ende immer weiter zusammendrücken und Zeilenumbrüche entfernen kann. Die Klammer gehört zum Objekt und ein Tab vor jedem Stil.
usw.
Einzelne Zeile, immer gewesen, immer sein wird. Apple macht es auch. Die meisten großen Jungs tun das :) Spart mir Zeit beim Einrücken und Scrollen. Hätte nichts dagegen, ein Werkzeug zu haben, das es für mich aufräumt (Eigenschaften alphabetisch sortieren), aber mit ein wenig Selbsttraining schaffe ich das Gleiche.
Einzelzeilenformat mit Einrückung, kein Tabulator, oft mit Variationen
Der letzte Selektor zeigt, wie ich mit wirklich langen Attributsätzen umgehe.
Eine weitere Variation, die ich oft verwende, typischerweise wenn ich an CSS arbeite, das von jemand anderem im Mehrzeilenformat erstellt wurde
Ich mache meine normalerweise wie das zweite Beispiel mit Tabs
#id{
color: red;
}
.class{
Schriftgröße: 1,4em;
}
.klasse2{
Texttransformation: Kleinbuchstaben;
}
Einzelzeile mit Einrückung. Eine mehrzeilige CSS-Datei nimmt etwa 1/5 der Monitorbreite ein, außerdem muss man seinen Hintern vertikal scrollen. Aber am Ende ist es eine Frage der persönlichen Präferenz.
Beim Schreiben von CSS neige ich dazu, die Selektoren und Ähnliches in einer Zeile zu haben, und die Eigenschaften dann in eigenen Zeilen eingerückt, es sei denn, es werden etwa vier oder weniger Eigenschaften deklariert. Ich mag es auch, die Klammern am Anfang der ersten und der letzten Deklaration zu haben.
Wow, ich bin überrascht, dass immer noch so viele mehrzeilig schreiben.
Ich bin meistens einzeilig und verwende mehrzeilig nur dann, wenn es am sinnvollsten ist (benutzerdefinierte Klasse mit einer großen Anzahl von Deklarationen).
Ich verwende meistens das Mehrzeilenmodell.
/* Benenne den Abschnitt
------------------------------*/
h1 {
farbe: schwarz; /* füge eine Notiz hinzu, warum ich das getan habe */
...
}
Für nur ein oder zwei Werte verwende ich die Einzelzeile.
.test {
color: red;
abstand: 0 0 1em 1em; /* siehe Abschnitt x */
...
}
/* nächster Abschnitt
-------------------------------------*/
Manche Leute regen sich darüber auf, und das ist lächerlich. Was auch immer dir hilft, deinen Code zu lesen, benutze es. Aber wenn du so viel Zeit mit dem Formatieren deines Codes verbringst wie mit dem Schreiben, solltest du dein Leben überdenken.
Nur zur Info, ich schreibe normalerweise einzeilig, es sei denn, ich habe viele Deklarationen. Dann verwende ich mehrzeilig. Ich füge auch einige Kommentarblöcke hinzu, um Hauptabschnitte zu unterteilen.
Ich verwende eine Kombination aus Mehr- und Einzelzeilen.
Meistens einzeilig, aber ich mag kein horizontales Scrollen, also wenn es mehr als etwa 5 Argumente gibt, breche ich sie auf die nächste Zeile.
Außerdem habe ich oft zahlreiche Argumente für Position und Größe und zahlreiche Argumente für Hintergrundeigenschaften, also breche ich sie so auf, dass Positions-/Größenargumente in einer Zeile und Hintergrundeigenschaften in einer anderen stehen.
Es ist viel kompakter und erfordert viel weniger Scrollen als volle Mehrzeilen. Es verursacht auch kein horizontales Scrollen (was ich schlimmer finde als vertikales Scrollen). Wenn Sie sich für eine einzelne Zeile entscheiden, aber den Zeilenumbruch aktivieren, um horizontales Scrollen zu vermeiden, würden Sie etwas Ähnliches wie ich erhalten, aber Sie hätten nur nicht so viel Kontrolle darüber, wo genau die Zeilen umgebrochen werden.
Ich unterteile mein CSS auch mit großen sichtbaren Kommentarzeichen, damit ich schnell scrollen und finden kann, was ich suche.
Ich sehe nicht, was es ausmacht, solange alle auf der gleichen Seite sind. Mit mehreren Leuten zusammenzuarbeiten und sie alle unterschiedliche Stile beim Schreiben von CSS zu haben, ist das Einzige, wo ich sehe, dass es ein Problem sein könnte. Außerdem sollte das Minimieren es zu einem hinfälligen Punkt machen, sobald es sowieso in einer Produktionsumgebung ist :-)
Ich bevorzuge es, Mehrzeilen wie die meisten zu verwenden, aber ich gruppiere ähnliche Objekte auf ähnlichen Zeilen, um etwas Platz zu sparen. Zum Beispiel
.col1 {
float: left; margin: 2%; padding: 2%; width: 42%; /* Das ist meine Positionierungszeile\*
font-size: 1em; color: #333; /* Das ist meine Schriftarteigenschaftenzeile\*
background: #ccc url() repeat-x; /* Das ist meine dekorative Eigenschaftenzeile\*
}
Bei bestimmten Elementen müssen Sie möglicherweise list-style-type usw. verwenden. In diesem Fall füge ich diese normalerweise in eine separate Zeile zwischen Positionierungs- und Schriftarteigenschaften ein.
Hoffentlich habe ich Sinn ergeben :o)
Immer mehrzeilig und eingerückt, damit ich weiß, wo ich bin, aber wenn alles fertig ist, komprimiere ich es normalerweise auf das kleinstmögliche mit csstidy, Sie wissen warum :)
Genau,
Wartbarkeit bedeutet, dass ich das Mehrzeilenformat mag. Ich mache mir keine Gedanken über das Einrücken von Elementen.
Das Tolle an csstidy ist, dass man einen Schritt in seinem Deployment erstellen kann, bei dem das gesamte CSS im laufenden Betrieb komprimiert wird.
Einzelzeile; Leerzeichen herausgequetscht;
Deklarationen für „reine“ HTML-Elemente zuerst; Klassen/andere Nachfahren innerhalb von „reinen“ Elementen (zeigt Unterschiede an);
Semantische divs unten;
Eigenschaften in alphabetischer Reihenfolge
Ich mag kurze CSS-Blätter, also drücke ich nur die Enter-Taste, wenn ich einen neuen Selektor erstelle.
Bis ich gestern diese Umfrage gelesen habe, habe ich immer mehrzeilig mit Einrückungen verwendet, aber nachdem ich einige der Antworten hier gelesen hatte, beschloss ich, die Einzelzeile auszuprobieren (mit Einrückung), und ich bin offiziell dazu übergegangen. Es ist wirklich schön, nicht ständig auf und ab scrollen zu müssen.
Einzelzeile; keine Leerzeichen und kleine Kommentare. Wenn die Zeile zu lang wird, verwende ich manchmal einen einzelnen Zeilenumbruch, damit ich nicht seitwärts scrollen muss.
z.B.
/* = Ninjas schützen meinen Code. */
.ninja{farbe:schwarz;sichtbarkeit:keine;}
Wow, es scheint, dass viele Leute es auf ihre eigene kleine Art und Weise mögen :-)
Ich bin im Lager „Ich mache mehrzeilig, aber auch einzeilig“. Wenn es also nur eine oder zwei Eigenschaften gibt, können sie in einer einzigen Zeile stehen – aber bei mehr als dem wird es mehrzeilig und eingerückt.
Ich habe von einigen Leuten gehört, dass das Scrollen in kleinen Fenstern zum Bearbeiten von CSS – (ich schaue dich an, WordPress!) – nicht so toll ist, aber ich persönlich scrolle lieber vertikal als horizontal. Es scheint mir, dass es leichter zu übersehen ist, wenn etwas horizontal vom Bildschirm abgeschnitten ist.
Ich habe kürzlich über meine eigenen CSS-Formatierungsprobleme gebloggt. Grundsätzlich, wenn Sie fremdes CSS bearbeiten müssen, können Sie http://www.cleancss.com/ verwenden, um das CSS für Sie zu bereinigen und neu zu formatieren.
Ich formatiere mein CSS nicht selbst. Ich schreibe es mit Tools wie Compass und Sass, die die Formatierung für mich übernehmen.
Ich kombiniere drei Ansätze
1- Mehrzeilenformatierung
2- Einrückung
3- Alphabetische Reihenfolge
Ich mag die Art und Weise, wie Sie die Umfrage eingerichtet haben, Chris :( die Einzelzeilenformate haben 4 Optionen, während die Mehrzeilenformate nur zwei haben. Daher hat die Einzelzeile eine viel geringere Chance, als Erste zu landen :P Ich schätze, es geht nicht ums Gewinnen.
Kombination von allem. ;)
Hintergründe und Farben zuerst, gefolgt von Positionen/Floats, Größen, Rändern und Abständen, dann Schriftarten… und der Rest
#id {
hintergrund: #eee;
farbe: #333;
min-Breite: 960px;
Breite: 960px;
min-Höhe: 480px;
overflow-y: scroll;
rahmen: 0px;
margin: 0px;
padding: 5px;
Schriftfamilie: 'Droid Sans', Helvetica, Arial, sans-serif;
Schriftgröße: 1,4em;
Buchstabenabstand: -0,02em;
Zeilenhöhe: 1,3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
Deckkraft: 0,8;
z-index: 20;
}
Gerade Linie für alles, und ich kategorisiere es mit Kommentaren zum Anfang, und drei Leerzeichen nach jedem Abschnitt
/**** Dies ist ein Abschnitt ****/
h1 {}
h1 a {}
Die Hauptprinzipien, denen ich beim Schreiben von CSS-Code folge: **Lesbarkeit** und **logischer Fluss**.
Das klassische Beispiel meines Codes
.example
{
width: 400px;
height: 25px;
schrift: normal 15px/28px helvetica, tahoma, arial, sans-serif;
farbe: #666;
hintergrundfarbe: #f2f2f2;
rahmen-unten: 1px solid #ccc;
abstand: 10px 10px 0;
abstand: 0 0 1px;
}
Das Platzieren von { und } in neuen Zeilen gibt mir Lesbarkeit. Zweitens sind Dimensionsattribute am wichtigsten – Priorität Nummer eins. Zweitens Tipp und Aussehen. Schließlich – Positionierung und Verhalten unter anderen HTML-Strukturen. Tatsächlich verstehe ich eine alphabetische Reihenfolge nicht, denn es ist, als hätte man Bananen, Brot und Johannisbeeren, Donuts in verschiedenen Regalen, während es so sein sollte: Brot und Donuts, Johannisbeeren und Bananen.
Auf jeden Fall ist es alles eine Frage der Vorstellungskraft, ob man Logik hat oder nicht.
Ich muss sagen, ich bin in diesem Bereich sehr durcheinander, ich schreibe die ganze Zeit mehrzeilig, wenn es mehr als 3 Argumente gibt.
Ansonsten sind es Tabs Tabs und Tabs :D