Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » CSS: Pseudo-Namensräume für komplexe Projekte

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

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...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 30. März 2007
Bookmarke mich
Share on pocket

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

SEO Galaxy

Udler

Berlin Translate

Berlin

wolpersweb.de Webdesign & SEO

Düsseldorf

iPower AG

Berlin

Alle Agenturpartner

Jobs

Junior Webdesigner/ Mediengestalter

Innsbruck

Web Development & Project Management

Remote

Junior Online Marketing Manager

München

Media Manager in München

München

Copywriter – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.