Ich beginne gerade, diesen Bereich zu erforschen und frage mich, was die besten Praktiken sind, wenn es um die Produktion von sauberen, gut strukturierten und wartbaren CSS geht.
Es scheint nur wenige verschiedene Ansätze zur Strukturierung von CSS-Regeln zu geben.
Einer der am häufigsten anzutreffenden, den ich gesehen habe, war, alles in einer Regel zusammenzufassen, d. h. Ränder, Ränder, Schriften, Hintergründe, etwas in der Art:
%Vor%Ein weiterer Ansatz, den ich bemerkte, betrifft die Gruppierung von Eigenschaften, sagen wir, dass textbezogene Eigenschaften wie Schriftgröße, Schriftart, Hervorhebung usw. in eine Regel fallen, Hintergründe in andere, Ränder / Ränder in eine andere gehen:
%Vor%Ich denke, ich suche hier nach einer Silberkugel, von der ich weiß, dass ich sie nicht bekommen werde, wetten Sie trotzdem - was sind die besten Praktiken in diesem Bereich?
Ich habe einen eigenen Auftrag verwendet, der für mich praktisch ist.
Die Regeln wurden in absteigender Reihenfolge aufgelistet, und das Kriterium ist der Einfluss der Regel auf das Layout. Zum Beispiel:
%Vor%Natürlich habe ich im obigen Beispiel nicht alle css-Anweisungen aufgelistet.
Eine besondere Idee war, die Reihenfolge der Gruppen beizubehalten, wie zum Beispiel:
Normalerweise gruppiere ich alle Eigenschaften, die auf dasselbe Element angewendet werden. Dadurch wird es etwas weniger nervig, alles zu finden, was zutrifft, und es wird ein wenig einfacher, die Eigenschaften zu duplizieren. Wenn ich drei verschiedene .my-class -Regeln habe, werde ich in nicht allzu ferner Zukunft nicht überrascht sein, dass sie alle zwei oder drei Mal eine Eigenschaft setzen, weil jemand gehetzt wurde und nur nach dem nächsten Selektor gesucht hat, der richtig ausgesehen hat.
Wenn Sie Klassennamen verwenden, die wahrscheinlich in einem anderen Kontext mit einem völlig anderen Erscheinungsbild wieder verwendet werden, verwenden Sie "Namespacing", um sicherzustellen, dass diese Regeln nicht außerhalb ihres beabsichtigten Kontexts "bluten". Der Kontext ist der Selektor für das nächstgelegene Elternelement, in dem Sie immer ein Element finden, das Ihrem Nicht-Namespaced-Selektor entspricht.
z.B. Stellen wir uns vor, Sie erstellen einige Stile für ein wiederverwendbares Modul, dessen Top-Level-Element immer die Klasse "mymodule" hat. Alle Selektoren, die nur dort verwendet werden sollen, sollten dann mit ".mymodule" beginnen - damit ".item" zu ".mymodule .item" wird, sollten die Titel für Ihre mymodule-Elemente den Selektor ".mymodule .item .title" usw. haben .
Aber seien Sie nicht versucht, Ihre gesamte Elementhierarchie genau in CSS zu replizieren - dies führt zu einem sehr fragilen, schwer zu wartenden CSS. z.B. Wenn Sie glauben, dass Sie ".product-item" außerhalb von ".new-products" verwenden werden, aber Sie wollen das Aussehen weitgehend erhalten, werden Sie sich sicherlich von nicht Namespacing das (Familie von) Selektor (en). Sie können Ihre Stile immer mit anderen Selektoren (mit gleicher oder höherer Spezifität) überschreiben, um Variationen in anderen Kontexten zu berücksichtigen.
Beispiel:
%pr_e%
.article .title { Schriftdicke: fett; / * wirkt sich nicht auf Produkttitel aus * / }
Ich mag Stefano Mazzocchis Vorschläge in dem Beitrag mit dem Titel Warum Programmierer am CSS Design saugen Unter anderem erklärt er, wie man von einer sauberen Weste ausgeht, ob man em oder px verwendet, wie man Fonts definiert usw. Ich würde nicht alle Vorschläge verwenden (zB würde ich zögern, irgendein CSS zu importieren - oder irgendein anderes - - Dateien von Yahoo!), aber einige Ideen sind ziemlich gut.
Und ein paar weitere Vorschläge: 100 außerordentlich nützliche CSS-Tipps und Tricks
Persönlich verwende ich die erste Methode, aber ich füge auch Kindselektoren ein. Zum Beispiel:
%Vor%Ich weiß aber nichts über bewährte Vorgehensweisen, abgesehen davon, dass ich die öffnende Klammer in die gleiche Zeile wie die schließende Zeile setze und jede Eigenschaft mit einem Semikolon beende, auch wenn es das letzte ist.
Hier gibt es wirklich keine richtige oder falsche Antwort, sicherlich nichts Definitives. Tun Sie, was für Sie Sinn macht und im Idealfall für andere am besten lesbar ist.
Persönlich mag ich verwandte Elemente zusammen gruppieren, aber ich organisiere sie auch nach dem Abschnitt, in dem sie sich auf der Seite befinden. Ich werde diese Abschnitte mit einem Kommentar im CSS bezeichnen. Zum Beispiel könnte mein Header-Abschnitt wie folgt aussehen:
%Vor%Es gibt viele verschiedene semantische Praktiken, die CSS umgeben, aber dies ist nur ein Beispiel dafür, wie ich meine Regeln im Allgemeinen gruppiere. Normalerweise versuche ich, den benötigten CSS-Anteil zu minimieren. Daher verwende ich Shorthands für Ränder, Ränder, Padding usw. und versuche, CSS-Selektoren nicht erneut zu verwenden. Ich gruppiere normalerweise alle Eigenschaften zusammen.
CSS erlaubt es Ihnen, mehrere Regeln gegen ein bestimmtes Element zu "kaskadieren", aber im Allgemeinen haben Sie keine Regeln, die genau dieselben Elemente direkt nacheinander betreffen. In einem Block werde ich jedoch bestimmte Arten von Direktiven unterscheiden:
%Vor%Ich denke auch, dass Sie für eine maximale Lesbarkeit jede Direktive so dicht wie möglich machen wollen. Das heißt, das Auffüllen ist hier einfacher zu lesen als der Rand:
%Vor%Nachdem all dies gesagt wurde, hält das Problem mit CSS die kleinen einzelnen Blöcke nicht sauber. Ihr häufigeres Problem wird sein, wie gruppieren Sie Regeln in Dateien und Teile von Dateien?
Beispielsweise könnten Sie eine layout.css, theme.css (Farben, Schriftarten usw.) und einzelne CSS-Dateien haben, die sich auf bestimmte Teile Ihrer Anwendung auswirken, wie zum Beispiel data-browser.css. Anschließend importieren Sie diese CSS-Dateien aus einer CSS-Hauptdatei oder importieren sie bei Bedarf auf jeder Seite.
Für mich ist es gut, Eigenschaften von Elementen zu alphabetisieren. Es ist einfach, sichtbar und gut für das Auge des Programmierers:)
z.B.
%Vor%Vor der Produktion wird empfohlen, einige von css Kompressoren zur Steigerung der Leistung.
Wie bei den meisten "Best Practices" gibt es hier keine richtige Antwort. Ich denke, dass die Vorschläge und Stile anderer gut sind.
Während ich CSS liebe, denke ich, dass CSS uns alle in dieser Hinsicht versagt hat. Die Sprache ist veraltet und könnte viele Verbesserungen bei der Organisation großer und komplexer CSS-Dateien erfordern. Ein guter Versuch in dieser Richtung ist Ссылка . Sie haben CSS mit Variablen, Mixins, verschachtelten Regeln und sogar Operationen erweitert, die es erlauben, CSS viel mehr DRY und überschaubar zu machen.
Es ist nicht / true / CSS, da Sie das LESS vorverarbeiten müssen, um es in CSS umzuwandeln , dass ein Browser das aber verstehen würde ist ein schneller und einfacher Schritt, der sich für Sie lohnt, wenn Ihr CSS unhandlich wird.
Also, wenn Sie CSS unhandlich finden, könnte es einen Versuch wert sein.
Tags und Links css