Stylesheets gliedern (war: Die Media-Queries bringen mich zum Heulen...)

[Matthias Scharwies]

Servus!

Es ist allerdings wenig sinnvoll, das komplette CSS für 3 Breiten vorzuhalten. Das meiste wird gleich sein. Baue die Seite deshalb für die minimale Breite auf (mobile first Ansatz) und füge dann CSS für breitere Viewports hinzu, die dann Dinge nebeneinander setzen oder vergrößeren.

Ich bin ja grad an einem Stylesheet für's Wiki dran und vermisse eigentlich eine beispielhafte Gliederung im SELF-Wiki. Passender Ort wäre wohl hier:

• CSS/Tutorials/Einstieg/Ausblick (Die Seite hieß mal "Guter CSS-Stil")

Auf die Schnelle gefunden habe ich: CSS Coding Guidelines – CSS Code besser schreiben, formatieren und organisieren

Ungefähr in der Mitte findet sich der Abschnitt „SMACSS“

SMACSS (Gesprochen: »Smacks«) steht für »Scaleable and modern Architektur for CSS«. In erster Linie ist SMACSS eine Sammlung vom Hilfestellungen und Namenskonventionen zur Organisation von CSS-Projekten.

Der CSS-Code wird dabei in folgende Bereiche untergliedert:

• Base
  • Elementares Styling von HTML-Elementen.
• Layout
  • Unterteilung der Website in grobe Sinnabschnitte wie Header, Footer, Content etc.
• Module
  • Wiederverwertbare Bereiche des Layouts – z. B. Boxen, Formulare, Slider etc.
• State
  • Zustände von Elementen – z. B. .is-collapsed für Accordions.
• Theme
  • Styling für eventuelle Themes, bei multimandantenfähigen Projekten.

Problem ist bei mir, dass ich viele Mediawiki-Einstelungen erst normalisieren muss, um sie dann entsprechend zu formatieren.

Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?

In einem typischen Layout würde ich im Layout als zweiten Unterpunkt die Media Queries für breitere Viewports (=Elemente nebeneinander) einfügen

Das mit dem Theme würde ich doch in die einzelnen Bereiche integrieren und nicht in einen eigenen Punkt bringen. Ich habe viel davon schon in der Farbpalette am Anfang drin.

Was haltet ihr davon?

Herzliche Grüße

Matthias Scharwies