Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » CSS: Pseudo-Namensräume für komplexe Projekte

CSS: Pseudo-Namensräume für komplexe Projekte

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Jens Meiert
  • 30. März 2007

Inhaltsverzeichnis

Die Arbeit an komplexen Projekten oder Projekten, die keine gute Übersicht über noch umzusetzende Seitentypen oder -elemente bieten, kann eine defensive Strategie beim Schreiben von Stylesheets erfordern. Solch eine defensive Strategie beinhaltet bestimmte Sicherheitsmaßnahmen, um bessere Wartbarkeit zu gewährleisten, und eine Taktik dafür sind CSS-Pseudo-Namensräume.

Anmerkung: Dieses Namensraumkonzept ähnelt dem in XML nur grob. Es gibt noch keine „echten“ Namensräume in CSS, daher der Name „Pseudo-Namensraum“.

Beispiele für CSS-Pseudo-Namensräume
Spezielle Icons für Links sind ein guter Anfang: Möglicherweise müssen oder wollen bestimmte Links (zum Beispiel die für Dateitypen oder Aktionen) mit unterschiedlichen Symbolen ausgestattet werden. Vorausgesetzt, dass dafür kein stabiler, verlässlicher Kontext vorliegt (wie bei ausschließlich PDF-Links in der projektspezifischen Marginalspalte), können den betroffenen Links dazu spezielle Klassen geschenkt werden:

 <a href="" class="doc"></a>
      <a href="" class="pdf"></a>
      <a href="" class="ppt"></a>

Das ist okay, auch wenn man dies beispielsweise mit zusätzlichen file-Klassen noch etwas „kultivieren“ könnte. Aber angenommen, dass man a) nicht weiß, welche anderen Seitenelemente noch folgen werden, und/oder man b) nicht alleine am entsprechenden Projekt arbeitet oder arbeiten wird, möchte man möglicherweise sichergehen, dass nicht irgendwelche Konflikte auftreten – zum Beispiel wenn irgendwann ein „Dokumentvoransicht-Modul“ mitsamt doc-Klasse eingeführt wird.

Anmerkung: Diese Problematik kann man natürlich auch mit kontextabhängiger Formatierung adressieren (a.doc vs. div.doc), was für gewöhnlich eine ratsame Sache ist. Aber dies kann wiederum in mehr Code resultieren, als notwendig ist, besonders, wenn es um komplexere Projekte geht, in denen man eher bei Dutzenden und zugleich wesentlich längeren Selektoren landet, und es löst auch nicht das Problem, dass man nicht unbedingt weiß, wer als nächster am Code arbeitet.

Nun, „Pseudo-Namensräume“ können Abhilfe schaffen, wie zum Beispiel:

      <a href="" class="nf-doc"></a>
      <a href="" class="nf-pdf"></a>
      <a href="" class="nf-ppt"></a>

Das nf-Präfix ist hier willkürlich gewählt und bedeutet „Namensraum [für das] Format“. Das „n“ stellt dabei sowohl einen Vorschlag für ein Namensraumkürzel als auch eine weitere Sicherheitsmaßnahme dar, in dem Sinne, dass es es noch unwahrscheinlicher macht, dass sich irgendjemand einen so abgekürzten Namen ausdenkt. Da das nf-Präfix auf Links beschränkt werden könnte, sollte man für diesen (und jeden anderen) Namensraum eine Konvention festlegen und dies entsprechend dokumentieren. (Wie zuvor erwähnt ist dies eine Sicherheitsmaßnahme, so dass jeder, der eine weitere doc-Klasse einführt, keine Probleme verursacht; man will aber gleichzeitig auch Inkonsistenzen bezüglich ID- und Klassen-Namen vermeiden. Ein klarer Fall für ein wenig Dokumentation.)

Neben dem reduzierten Risiko späterer Konflikte ist es nun möglich, einfacheren CSS-Code zu schreiben:

      .nf-doc {}
.nf-pdf {}
.nf-ppt {}

… und man kann mit den nächsten Elementen fortfahren, zum Beispiel mit bestimmten Maßen für Eingabeeelemente:

      .ni-s {}
.ni-m {}
.ni-l {}

… wo ni „Namensraum [für] input[-Elemente]“ bedeuten mag, und wo man ohne Bedenken sehr kurze und prinzipiell gute Klassen-Namen („small“-, „medium“- und „large“-Eingabeelemente, bei denen die Namen eher die Relation der betroffenen Elemente illustrieren sollen als präsentationsbezogen sind – das täuscht hier) einsetzen kann.

Pro und Contra Pseudo-Namensräume
Idealerweise kann hier das Konzept demonstriert werden, ohne zuviel Fokus auf Details zu provozieren (es wird nicht viel Gutes bringen, an dieser Stelle file-Klassen und ähnliches zu diskutieren). Entsprechend folgen nun die Nachteile von CSS-Pseudo-Namensräumen:

  1. Sie erfordern etwas mehr Code-Konventionen und
  2. etwas mehr Dokumentation, da ihre (empfohlene) knappe Form neue Projektmitglieder irritieren kann;
  3. tendentiell gefährden sie die CSS-Code-Konsistenz (jedoch „by design“, da eben beabsichtigt ist, unvorhersehbare Formatierungsprobleme zu verhindern).

Auf der anderen Seite haben diese Namensräume einige entscheidende Vorteile:

  1. Sie ermöglichen kompaktere und effizientere Stylesheets;
  2. sie bedeuten mehr Sicherheit bei
    • neuen Seitenmodulen,
    • Injektionen von fremdem Code und
    • neuen Teammitgliedern;
  3. sie schützen die Semantik von ID- und Klassen-Namen, während
  4. sie zudem mehr Flexibilität aufgrund von nicht notwendigerweise verwirrender Wiederverwendung von nützlichen ID- und Klassen-Namen erlauben;
  5. sie sind schlussendlich kostengünstiger, obwohl sie dennoch Qualität sichern.

Als Daumenregel: Je größer und undurchschaubarer das jeweilige Projekt ist oder tendiert, zu werden, desto mehr wird man von diesem Namensraumkonzept profitieren. Auch wenn es mit Bedacht eingesetzt werden sollte.

Dieser Artikel kann im englischsprachigen Original kommentiert werden.

Erstveröffentlichung 30.03.2007

Jens Meiert

Jens Meiert

Informationsarchitekt und Autor (Webdesign mit CSS, O'Reilly), spezialisiert auf professionelle Webentwicklung, Barrierefreiheit und Usability, aktiv für W3C, UPA und IxDA.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Aeosys Digitalagentur Logo Soest.

aeosys

Soest

seolist seo frankfurt logo

SEOlist.IO – SEO Agentur & SEO Freelancer Frankfurt

Frankfurt am Main

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

SEOfolgreich Local SEO Agentur Muenchen

SEOfolgreich – Local SEO Agentur München

München

Logo der Frankfurter Webdesign Agentur Nextblick.

NEXTBLICK Internetagentur Frankfurt

Frankfurt am Main

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑