Ist dies, wie würden Sie die Struktur Ihrer CSS-stylesheet?

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

Frage

Abgesehen von der Frage, ob Sie dazu dienen sollte, einzelne oder mehrere stylesheets, vorausgesetzt, Sie senden nur eins, was denkst du von diesem als grundlegende Struktur?

/* Struktur */

Jedes template-layout Zeug gelegt werden sollte hier, so Kopfzeile, Fußzeile, Körper, etc.

/* Struktur Ende */

/* Common Components*/

Wiederholte Elemente sind, wie signup Formulare, Listen, etc.

/* Common Components Ende*/

/* Spezifische Seite 1 */

Einige Seiten haben vielleicht bestimmte Stile, die gehen hier.

/* Spezifische Seite 1 Ende */

/* Bestimmte Seite 2 */

Wie oben

/* Bestimmte Seite 2 Ende */

/* Spezifische Seite, etc */

Und so weiter.

/* Spezifische Seite, etc End */

War es hilfreich?

Lösung

Das ist ähnlich wie ich-Struktur mir, jedoch finde ich, dass sub-überschriften ist der beste Weg, es zu tun, so dass ich diese Struktur verwenden:

/************************* * GLOBAL * *************************/

/* Alle gängigen Sachen geht hier unter den entsprechenden sub-headings */

/* Überschrift-Formatierung */

/* Text-Formatierung */

/* Form-Formatierung */

/* Tabelle formatieren */

/* etc */

/************************* * LAYOUT * *************************/

/* Alle layout Dinge gehen hier unter sub-headings */

/* Header */

/* Links */

/* Sidebar Rechts */

/* Footer */

/************************* * NAVIGATION * *************************/

/* Ich legte die navigation zu trennen, um die layout-wie kann es eine Reihe von Navigations-Punkte unter Ihrer sub-headings */

/* Main (horizontal) Navigation */

/* Linken Navigation */

/* Right Navigation */

/* Breadcrumb-Navigation */

/************************* * FORMULARE * *************************/

/* Jede form der Formatierung variiert, die von der gemeinsamen Formatierung, wenn mehrere unterschiedlich formatierte Formen, dann verwenden Sie sub-headings */

/************************* * TABELLEN * *************************/

/* Gleichen Angebot wie Formen */

/************************* * LISTEN * *************************/

/* Gleichen Angebot wie Formulare und Tabellen */

/************************* * INHALT * *************************/

/* Jede spezielle Formatierung für bestimmte Seiten, gruppiert nach sub-überschriften für die Seite die gleiche Weise wie Formulare, Tabellen und Listen */

/************************* * CSS-UNTERSTÜTZUNG * *************************/

/* Dies ist für spezielle Formatierung angewendet werden kann, um jedes element auf jeder Seite und haben es überschreiben die regelmäßige Formatierung für diesen Artikel.Das können zum Beispiel Dinge wie:*/

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/* etc */

Hoffe, das hilft.

Habe ich im Allgemeinen nicht empfehlen, das schreiben in einer einzigen Zeile wie, dass, obwohl, oder, wie vorgeschlagen, in die Adam link gepostet, bekommen Sie sehr schwer zu überfliegen, wenn Sie lange.Für die Beispiele oben, es war einfach schneller zu Ihnen geben, die Art und Weise, so dass ich nicht haben Einrücken jeder Zeile.

Für die Formatierung würde ich empfehlen, diese Struktur:

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

Und so weiter, habe ich die Struktur der Klasse oder ID an der Spitze, die dann andere Formatierungen, wie schriftart etc. darunter.Macht es sehr schnell und klar zu überfliegen.

Andere Tipps

Wie auch immer macht Sinn für Sie gut genug sind. Ehrlich gesagt, wenn jemand anderes kommt für etwas in Ihrem Stylesheet suchen - oder, wenn Sie nach etwas kommen suchen, was das betrifft - sie werden nicht versuchen, um herauszufinden, was Ihre Organisationsstruktur war. Sie gehen suchen Sie einfach nach was auch immer Klasse oder Element, das sie brauchen, um zu sehen. So lange, wie Sie in der Regel Sachen halten, die zusammen in engen Zusammenhang steht, und Abschnitt Dinge aus mit Kommentaren wie @ Matt schlägt vor, sie ist in Ordnung.

Die Tatsache der Angelegenheit ist, dass auch bei einer sehr gut durchdacht Organisationsstruktur - wie mit einem gut durchdacht Filing-System - es ist nicht immer klar ist, was geht, wo; so sind Sie besser dran, nur ein wenig sinnvoll zu sein, nicht viel Zeit zu halten Dinge organisiert, und unter Berufung auf Suchmaschinen widmen zu finden, was Sie brauchen.

ich meine CSS auf eine ähnliche Art und Weise wie Sie organisieren, aber ich mit einem Reset-Abschnitt beginne. Die Hauptidee ist vom Allgemeinen zum Besonderen zu gehen. Also hier geht es:

  • Zurücksetzen
  • Struktur
  • html_tags
  • Navigation
  • bestimmte Abschnitte
  • Fehlermeldungen - das ist mein letzter Abschnitt

Die Struktur Sie präsentiert ist genau das, was ich benutze. Allerdings scheint es mir, dass es immer noch zu komplex bekam mit neuen Regeln zeigen und sich gegenseitig überschreiben ... Vielleicht sollte ich versuchen, die Lösung in der durch Adam stattdessen verknüpft Thema vorgeschlagen zu bleiben.

Es scheint, dass jedes Mal, wenn ich eine neue CSS-Datei zu erstellen, ich einen neuen Weg finden, es zu organisieren. Und sie sind alle besser als die vorherige.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top