michat: hierarchie website, Individualformate, Klassen,Selektoren

SELF-Forum

hierarchie website, Individualformate, Klassen,Selektoren

michat
– Informationen zu den Bewertungsregeln

Hi

ich habe für ein div welches genau einmal auf der jeweiligen Seite, aber eben auf fast jeder Unterseite vorkommt ein Individualformat definiert:

#angebot_beschreibung
{
width: 27%;
height: 87%;
margin: 4.5% 0 0% 0%;
padding: 0% 1.5% 0% 1.5%;
float: left;
background-color: blue;
position: relative;
top: 0;
right: 0;
border-top: 2px solid #FFB133;
border-bottom: 2px solid #FFB133;
border-right: 2px solid #FFB133;
}

Ich möchte aber nun auf verschiedenen Unterseiten für *dieses* div die Hintergundfarbe ändern. Nur wie selektiere ich die? Eigentlich will ich ja nach URL selektieren:

http://domian.test/seite2 #angebot_beschreibung { background-color: red; }

da eine URL als Selektor wohl ausscheidet (kein JS) könnte man darauf kommen den body tags wie z.B. id="seite1", id="seite2" ... zu verpassen. Das würde zu verschachtelten Individualformaten führen, hmm... (Davon abgesehen das der Editor meckert und ID für den body wohl nicht im Sinne des Erfinders wäre.

Also mache ich aus #angebot_beschreibung eine Klasse? .angebot_beschreibung ? (Eine Klasse die nur einmal je Seite benötigt wird? Auch irgendwie komisch)

Dann könnte ich selektieren:

#angebot_beschreibung
{
width: 27%;
height: 87%;
margin: 4.5% 0 0% 0%;
padding: 0% 1.5% 0% 1.5%;
float: left;
position: relative;
top: 0; right: 0;
border-top: 2px solid #FFB133;
border-bottom: 2px solid #FFB133;
border-right: 2px solid #FFB133;
}

#seite1.angebot_beschreibung
{
background-color: blue;
}

#seite2.angebot_beschreibung
{
background-color: red;
}

Ich habe <body id="seite2"> garnicht ausprobiert weil mir das selbst abstrus vorkommt.
Vielleicht wäre das eine Situation wo es eigentlich angemessen wäre im html ein style zu verwenden?

Wie würdet ihr damit umgehen?

bye

MH

--
war unregistriert "michaa"
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. hierarchie website, Individualformate, Klassen,Selektoren

    michat
    – Informationen zu den Bewertungsregeln

    kleiner fehler:

    Dann könnte ich selektieren:

    .angebot_beschreibung

    muß es heißen

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. hierarchie website, Individualformate, Klassen,Selektoren

    Hubert
    – Informationen zu den Bewertungsregeln

    Hallo michat,

    Wie würdet ihr damit umgehen?

    jeder Seite eine eigene Definition der Klasse mitgeben:

    <style type="text/css">  
.angebot_beschreibung {  
	background-color: red;  
}  
</style>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. hierarchie website, Individualformate, Klassen,Selektoren

    1UnitedPower Homepage des Autors
    – Informationen zu den Bewertungsregeln

    könnte man darauf kommen den body tags wie z.B. id="seite1", id="seite2" ... zu verpassen. Das würde zu verschachtelten Individualformaten führen, hmm... (Davon abgesehen das der Editor meckert und ID für den body wohl nicht im Sinne des Erfinders wäre.

    Nö, laut Spezifikation ist das erlaubt. Aber ich würde dem Element einfach eine zusätzliche Klasse verpassen. Im übrigen ist es auch kein schlechter Stil Klassen zu benutzen, wenn diese nur einmal vorkommen. Im Gegenteil viele CSS-Frameworks verpassen zum Beispiel dem HTML-Wurzel-Element eine Klasse, die sonst nirgends mehr auftacht.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. hierarchie website, Individualformate, Klassen,Selektoren

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@michat:

    nuqneH

    Eigentlich will ich ja nach URL selektieren:
    http://domian.test/seite2 #angebot_beschreibung { background-color: red; }

    Im Firefox geht das:

    @-moz-document url-prefix(http://domian.test/seite2)  
{  
  #angebot_beschreibung { background-color: red; }  
}

    @document hatte es auch schon in die Spec geschafft. Im WD vom 2012-09-11 ist es noch drin, im aktuellen WD vom 2012-12-13 jedoch nicht mehr.

    könnte man darauf kommen den body tags wie z.B. id="seite1", id="seite2" ... zu verpassen. Das würde zu verschachtelten Individualformaten führen, hmm... (Davon abgesehen das der Editor meckert und ID für den body wohl nicht im Sinne des Erfinders wäre.

    Warum nicht?

    Die ID mag aber beim html-Element besser aufgehoben sein.

    Und ob der Editor (dem HTML5 fremd ist) meckert, ist irrelevant.

    Also mache ich aus #angebot_beschreibung eine Klasse? .angebot_beschreibung ? (Eine Klasse die nur einmal je Seite benötigt wird? Auch irgendwie komisch)

    Warum? Wenn Seiten klassifiziert werden, könnte auch das sinnvoll sein.

    Wie würdet ihr damit umgehen?

    Dem html-Element @id bzw. @class geben.

    Qapla'

    --
    „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  5. hierarchie website, Individualformate, Klassen,Selektoren

    michaa aka michat
    – Informationen zu den Bewertungsregeln

    Hi Gunnar, 1UP, Hubert

    Danke für die Antworten.

    Ich hatte wohl wirklich bislang das Verständnis dass Klassen erst dann sinnvoll eingesetzt sind, wenn sie mindesten 2x benutzt würden und stand etwas ratlos vor meinem .class - mess. Obiges Problem kam mir wie die endgültige Sackgasse vor.

    Nun sehe ich nicht nur, dass die Sackgasse nicht nur keine ist, sondern geradezu die Lösung für die noch anstehenden Aufräumungsarbeiten im CSS. Denn im Wesentlichen ist die derzeitige Arbeit die Erweiterung einer bislang aus einer einzigen html-Seite bestehenden Website. Und da gab es ein CSS für den Bestand und eines für die neuen Seiten (weil leicht abweichendes Layout der Unterseiten).

    Durch eine Unachtsamkeit wurden vor Tagen schon die beiden CSSs zusammengeführt und so weitergeführt (= kräftig verschachtelt und durchmischt). Und mir war immer noch nicht klar wie ich das strukturiere. Nun ist die Lösung quasi nebenbei gefunden: Das ganze CSS System wird einfach auf den Kopf gestellt, das neu Layout (weil für mehrere Seiten) wird zum Standard und die Abweichungen auf der Startseite werden dadurch selektierbar, dass ich dem <html> Tag der index.html (ja, das <html> ist wirklich der bessere Ort, denn dieses Element *ist* die Seite) eine id="startseite" verpasse.

    Das bringt mich jedoch gleich zur Frage nach der Struktur des CSS. Da speziellere Selektoren ja allgemeinere überschreiben sollte man ja (zunächst) vom Allgemeinen ins Spezielle definieren. Und dann irgendwann nach der Reihenfolge des Vorkommens.
    Nur spielt die Reihenfolge im CSS ja auch ein Rolle.

    Naja, ich will jetzt nicht trockenschwimmend das CSS durchdiskutieren. Aber ist der hier skizzierte Leitfanden so sinnvoll. Gibt es noch weitere "Leitregeln" die man beim sortieren des CSS beachten sollte/muss?

    bye

    Michael

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. hierarchie website, Individualformate, Klassen,Selektoren

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, michaa aka michat!

      Gibt es noch weitere "Leitregeln" die man beim sortieren des CSS beachten sollte/muss?

      Du solltest es so bauen, dass man sich als Mensch darin zurecht findet. Also nicht unbedingt optimiert auf eine minimale Anzahl an Deklarationen. Deine angebot-Beschreibung wird (und das hast du ja schon geschrieben, nicht der einzige Unterschied sein, deshalb macht es durchaus Sinn, den html- oder body-Elementen eine Klasse oder ID zu verpassen.

      #angebot_beschreibung {  
  /* hier alle Deklarationen */  
}

      .spezialseite #angebot_beschreibung {  
 /* hier nur die Unterschiede */  
}

      Manchmal würde ich doch noch etwas optimieren

      statt

      border-top:    2px solid #FFB133;  
border-bottom: 2px solid #FFB133;  
border-right:  2px solid #FFB133;

      border: 2px solid #ffb133;  
border-left: 0 none;

      ist auch für den Menschen einfacher zu erfassen.

      Matthias

      --
      1/z ist kein Blatt Papier.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. hierarchie website, Individualformate, Klassen,Selektoren

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Matthias Apsel:

        nuqneH

        border: 2px solid #ffb133;
        border-left: 0 none;
        ist auch für den Menschen einfacher zu erfassen.

        Das ist Ansichtssache.

        Wichtiger scheint mit der „single point of change“: Wenn die Rahmendicke oder -farbe geändert werden soll, sollte man dies nur an *einer* Stelle tun müssen, nicht an dreien.

        Ohne zu überschreiben wäre das auch hinzubekommen:

        foo  
{  
  border-style: solid solid solid none;  
  border-width: 2px;  
  border-color: #ffb133;  
}

        Mit CSS-Präprozessor (oder CSS-Variablen, wenn sie denn mal kommen), wäre auch denkbar:

        $foo-border: 2px solid #ffb133;  
  
foo  
{  
  border-top: $foo-border;  
  border-right: $foo-border;  
  border-bottom: $foo-border;  
}

        Qapla'

        --
        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. hierarchie website, Individualformate, Klassen,Selektoren

      Gunnar Bittersmann Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      @@michaa aka michat:

      nuqneH

      Ich hatte wohl wirklich bislang das Verständnis dass Klassen erst dann sinnvoll eingesetzt sind, wenn sie mindesten 2x benutzt würden

      Nicht „würden“, sondern „werden könnten“.

      Zum Verständnis hier entlang: [CLASS-ID]

      Da speziellere Selektoren ja allgemeinere überschreiben sollte man ja (zunächst) vom Allgemeinen ins Spezielle definieren.

      Dem Browser ist die Reihenfolge bei nicht gleichspezifischen Selektoren egal.

      Schreib das Stylesheet so, dass es für dich am besten wartbar ist.

      Qapla'

      --
      „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln