allgemeine Vorgaben, Konzept für Innen- und Aussenabstände, Klassen ... Beispiel gesucht

[michaah]

Hi

Im Groben und weitgehend auch im Detail habe ich meiner WEbsite ein responsives Design verpaßt.

Wie (mangels tagtäglicher Erfahrung) nicht anders zu erwarten ist mein CSS jedoch (noch) recht chaotisch, Klassen, die dann an andere Stelle doch nicht passen und mit der Zeit in mehreren Alternativen erstellt wurden, und dann doch nur ein oder zweimal Verwendung finden. Oder besser ein padding des Umgebenden Elements oder ein margin von innen? margin und padding zu Beginn für alle Elemente zurücksetzen oder nicht? In @media-queries eine Klasse umdeklarieren oder das Element individuell überschreiben?

Was ich suche ist eine Art Leitfaden für genau diese Fragen, ein Gedankenrahmen um das CSS möglichst planmäßig zu sortieren.

Bislang besteht mein Plan aus folgendem:

Allgemeine Vorgaben (welche sind heutzutage noch nötig/sinnvoll?)

Klassendefinitionen (mittlerweile bei mir bestimmt zu viele)

Selektoren und individual IDs weitestgehend in der Reihenfolge ihres Vorkommens im html

Im Grunde finde ich das gut so, aber im Detail erscheint mir Vieles planlos. Und die zwei Hauptproblemfelder sind:

• Wann lohnt sich das Erstellen einer Klasse?
• Konzept für (hierachisch verschachteltes) margin und/oder padding

Falls jemand hierzu ein gutes praktisches, möglichst bildhaftes Beispiel aus dem Netz kennt würde ich mich über einen Link freuen.

Gruß

M

PS: Den Designwechsel in vier Stufen vom Ein-Spalten-Design (mobile first) zu Desktop-Design habe ich - zumindest schaut es für mich danach aus - mit jeweils recht wenig Überschreibungen in den @media-queries hinbekommen. Vermutlich kann es auch noch weniger sein, aber es überrascht mich schon wie wenig Anpassung letztlich notwendig ist um die Seite von einem zum anderen design wechseln zu lassen. Hier kann ich soviel nicht falsch gemacht haben.