Frontend Development - CSS

Definition und Arbeit mit CSS Bibliotheken sowie vorhanden Klassen und Komponenten

Feststellung & Diskussion

Hallo ihr Lieben,

nachdem ich nun schon die ersten Arbeiten in bestehenden und kommenden Projekten vollzogen habe und immer wieder dabei bin Anpassungen vorzunehmen bin ich auf das ein oder andere Hindernis gestoßen. Leider wird mein Weg immer steiniger, so dass sich bei mir die Frage auftut wie wir ab sofort und zukünftig mit dem bestehenden CSS verfahren wollen.

Nachfolgend habe ich mal einige Fakten und Ideen niedergeschrieben, damit ihr mir bei meiner Entscheidungsfindung helfen könnt.

Es stellt sich also die Frage: CSS beibehalten oder umstellen?

Hier habe ich zunächst mal 2 Problemfälle beschrieben, die aus GUI-Sicht dringend sind.
1) Probleme im Pubman:
Gridview - Statussymbole und deren textuelle Beschreibung zentriert ausrichten, derzeit nur über programmiertechnische Lösung
2) Allgemeine Probleme:
Layoutgestaltung von Webseiten. Das Content-DIV ist zu schmal bemessen, daher enden die horizontalen Linien vor dem rechten Inhaltsende.

Ursache zu 1 und 2
Zu wenig Flexibilität in der DIV-Gestaltung. Es sind feste Breiten definiert, die mit Worten anstelle von Rastereinheiten beschrieben werden. Das finden neuer Wörter wird zunehmend schwieriger bis unmöglich.

Lösungsvorschlag
Benennung von Größeneinheiten anhand von Raster.
Bsp.1: width_r5_3_pLR4_mLRA

-> Breite = 5px * 3 Einheiten = 15px
-> Padding = left 4px; right 4px
-> zur Verfügung stehende Breite: 7px
-> Margin = top & bottom = 0; left & right = auto

Bsp.2: width_r5_3_pLR4

-> Breite = 5px * 3 Einheiten = 15px
-> Padding = left 4px; right 4px
-> zur Verfügung stehende Breite: 7px

---

marginLRa

-> Margin = top & bottom = 0; left & right = auto

Darüber hinaus ist mir aufgefallen, dass die Zuweisung "!important" sehr häufig verwendet wird. Im Laufe immer weiterer Neudefinierungen von Klassen besteht die zunehmende Gefahr, dass genau diese Zuweisung durch Mehrfachverwendung in unterschiedlichen Klassen sich gegenseitig aufhebt und an Wirkung verliert.

Um über ein neues CSS zu sprechen sollte man auch berücksichtigen wie generell damit umgegangen werden soll:

projektspezifisches CSS

• individuelle CSS-Klassen
• kein Laden nichtverwendeter Klassen
• projektspezifische Schriftgrößenverwendung
• gleiche Themes können für einzelne Projekte leichter individuell angepasst werden

   Bsp: leichte Farbanpassungen, Schriftgrößen

universelles CSS

• alle CSS-Klassen stehen uneingeschränkt zur Verfügung
• Style-Themes sind immer auf alles anwendbar

Somit bin ich nun bei den Vor- und Nachteilen einer Umstellung angelangt.

PRO altes CSS

• vorhandene Größeneinheiten durch Pubman
• bekannte CSS-Klassen für einige Entwickler
• annähernd am Styleguide
• berücksichtigt einige Browserbugs
• CSS Bibliothek vorhanden

CONTRA altes CSS

• begrenzter Spielraum bei neuer Namensvergebung für neue Größeneinheiten
• Widersprüchige Größeneinheiten definiert
  • medium_area0 vs. medium_area0_p6
• großer Aufwand bei Schriftgrößenänderung
• nur bedingt an dem Styleguide anpassbar
  • für neue Projekte fehlen Klassen, die neu definiert werden müssen
    • zu viele Klassen definiert, die nicht verwendet werden
• je weitere Klassendefinierung wird die Bibliothek immer unübersichtlicher
  • Core-CSS wird zu groß

PRO neues CSS

• genaue Rastereinheiten
• neue Zwischengrößen durch neues Rastering möglich
• klare Strukturierung durch Raster
• Styleguide-konforme Umsetzung
• projektspezifische Styles aus einer CSS Bibliothek
• Core-CSS beinhaltet nur fundierte Eigenschalten - Bsp: floatL, floatR, floatN, cleaning, ...
• mit Datenbankunterstützung
  • Bibliothek mit festen Einheiten für die Umrechnung von Pixel in EM
  • projektbezogenes Abspeichern der verwendeten Klassen
    • geringerer Aufwand bei Schriftgrößenänderung
    • (CSS-Dateigenerierung)

CONTRA neues CSS

• Umgewöhnung auf neues CSS
• Aufwand der Entwicklung
  • Definition der Core-Style-Klassen
• CSS Bibliothek muss erzeugt werden

Bitte ergänzt noch fehlende Daten und helft mir bei der Entscheidung.

Cascading Style Sheets

Graphical User Interface