1. Foren
  2. Kommentare
  3. OpenSource
  4. Alle Kommentare zum Artikel
  5. › Webtechnologien im Umbruch: CSS…

Klammern

  1. Thema
  1. 1
  2. 2

Neues Thema Ansicht wechseln


  1. Klammern

    Autor: Donna 12.07.07 - 12:57

    Wär es nicht schön wenn man in CSS die Klammern sinnvoller nutzen könnte? Beispiel:

    .div1 {
    .span {
    color: #369;
    font-size: 12px;
    }

    .xx {
    color: 000;
    }

    #heinz { color: #fff; }
    }

  2. Re: Klammern

    Autor: BSDDaemon 12.07.07 - 13:07

    Donna schrieb:
    -------------------------------------------------------
    > Wär es nicht schön wenn man in CSS die Klammern
    > sinnvoller nutzen könnte? Beispiel:

    Du meinst die Vererbung... geht doch wunderprächtig... wird halt nur nicht mit Klammern gemacht ist aber extrem mächtig.


    ----------------------------------------
    Suum cuique per me uti atque frui licet.
    ----------------------------------------
    Ein Betriebssystem ist immer nur so gut und sicher
    wie der Administrator der es verwaltet.

    Wie gut der Administrator jedoch seine Fähigkeiten
    ausspielen kann, legt das Betriebssystem fest.

  3. Re: Klammern

    Autor: Intervis 12.07.07 - 13:33

    Ausser unübersichtlichkeit bringt das doch wohl nix.

    Anstelle den Code zu verschachteln sollte man sich lieber mit der Kaskadierung und der Spezifität der einzelne Selektoren und Elemente befassen.

    .div1 .span {
    color: #369;
    font-size: 12px
    }

    .div1 .xx {color: 000}

    .div1 #heinz {color: #fff}

  4. Re: Klammern

    Autor: Raven 12.07.07 - 13:40

    > Wär es nicht schön wenn man in CSS die Klammern
    > sinnvoller nutzen könnte? Beispiel: [...]

    Jepp, der Gedanke kommt einem unweigerlich. Damit ließen sich Stylesheets auch bestens zusammenkopieren -- Definitionen aus dem Inhaltsbereich des Frontends könnte man etwa in den WYSIWYG-Editor des Backends übernehmen etc. Vor allem würde die Masse der User möglicherweise dazu bewegt werden, strukturiertere Stylesheets mit weniger unangebracht allgemeinen Regeln zu schreiben, die dann später überschrieben werden (der eine Spezialfall als Vererbung des anderen Spezialfalls quasi).

    Andererseits möchte man seitens des W3C vllt. nicht unbedingt eine Präferenz für monolithische Stylesheets äußern. Dank der Klammerung wäre es ja wesentlich kompakter, alles nach Bereichen zu gliedern, als beispielsweise Farb-/Schrift-/Box-Anweisungen zu gruppieren.

  5. Re: Klammern

    Autor: Cheatha 12.07.07 - 13:44

    div#foo.bar span.baz.quux{
    border: 1px solid rgb(240,44,9);
    }


    gibt jedem span, das die klassen baz und quux hat und sich innerhalb des divs mit der id foo und der klasse bar befindet einen rahmen.

    über weitere selektoren, negationen und so wollen wir jetzt garnicht reden.
    kann man ohne dieses wissen überhaupt spaß an css haben? ;-)

  6. Re: Klammern

    Autor: K2 12.07.07 - 14:06

    Cheatha schrieb:
    -------------------------------------------------------
    > div#foo.bar span.baz.quux{
    > border: 1px solid rgb(240,44,9);
    > }
    >
    > gibt jedem span, das die klassen baz und quux hat
    > und sich innerhalb des divs mit der id foo und der
    > klasse bar befindet einen rahmen.
    >
    > über weitere selektoren, negationen und so wollen
    > wir jetzt garnicht reden.
    > kann man ohne dieses wissen überhaupt spaß an css
    > haben? ;-)

    Richtig Spaß macht es aber nur, wenn man weiß, dass IDs nur 1x vergeben werden dürften, ergo dies "richtiger" wäre:

    #foo.bar span.baz.quux{
    border: 1px solid rgb(240,44,9);
    }

    Dumm nur, wenn man ein Stylesheet auf >=2 valide Dokumente anwenden will, wo dann mal p#foo, div#foo und blockqoute#foo auftauchen. *Dann* würde ich mir als Webworker aber grundlegende Gedanken zum Aufbau der Seite machen... ;-)

    LG
    K2

  7. Re: Klammern

    Autor: Intervis 12.07.07 - 14:08

    Cheatha schrieb:
    -------------------------------------------------------
    > div#foo.bar span.baz.quux{
    > border: 1px solid rgb(240,44,9);
    > }
    Ein sehr gutes Beispiel um die Spezifität darzustellen. Und nein ohne diesen Wissen kann man keine Spass an CSS haben. Lustig wirds erst bei der korrekten Positionierung von Elementen wenn Floats und Position angaben zusammen wirken. Ich mag es wenn es Tricky wird.

  8. Re: Klammern

    Autor: Intervis 12.07.07 - 14:14

    > Richtig Spaß macht es aber nur, wenn man weiß,
    > dass IDs nur 1x vergeben werden dürften, ergo dies
    > "richtiger" wäre:
    >
    > #foo.bar span.baz.quux{
    > border: 1px solid rgb(240,44,9);
    > }
    >
    > Dumm nur, wenn man ein Stylesheet auf >=2
    > valide Dokumente anwenden will, wo dann mal p#foo,
    > div#foo und blockqoute#foo auftauchen. *Dann*
    > würde ich mir als Webworker aber grundlegende
    > Gedanken zum Aufbau der Seite machen... ;-)
    >
    > LG
    > K2
    >
    Das ist doch egal. Es spielt keien Rolle ob der Selektor in der CSS Regel genannt wird (div#foo). #foo oder diy#foo ist das gleiche.

    Was mich allerdings Interessieren würde was Negationen in CSS sind?! Kenne das nur aus Programmiersprachen.

  9. Re: Klammern

    Autor: Cheatha 12.07.07 - 14:17

    K2 schrieb:
    -------------------------------------------------------

    > Richtig Spaß macht es aber nur, wenn man weiß,
    > dass IDs nur 1x vergeben werden dürften, ergo dies
    > "richtiger" wäre:
    >
    > #foo.bar span.baz.quux{
    > border: 1px solid rgb(240,44,9);
    > }

    Klar muss man das wissen, die Notation wird dadurch aber nicht falsch. dafür sieht man, dass man ein div mit namen ansprechen kann. hab ich die ID, wie unten von dir richtig beschrieben, auf was anderes als ein div angewendet, dann stimmt was nicht. ;-) ergo: unnötig, aber nicht falsch ;-)

    aber ne gescheite namensvergabe is sowieso wieder ne wissenschaft für sich ;-)

    f.

  10. Re: Klammern

    Autor: Intervis 12.07.07 - 14:21

    Habe ja auch nichts anders Behaupte ;) Ich sage nur das es egal ,sprich nicht reichtiger oder falsch ist das Element vor die ID zu setzten. Das Ergebniss bleibt gleich...

  11. Re: Klammern

    Autor: Cheatha 12.07.07 - 14:28

    > Was mich allerdings Interessieren würde was
    > Negationen in CSS sind?! Kenne das nur aus
    > Programmiersprachen.
    ich hatte mal irgendwo einen schönen link zu den ganzen css-selektoren ala "erstes nachfolgendes element" und so. is, glaub ich, css3, aber manche browser setzen es schon um. ich kuck mal heute abend ob ich den finde. ansonsten mal in den css-spezifikationen nachkucken: http://www.w3.org/TR/CSS21/selector.html#q1
    da sind einige selektoren spezifiziert, die ich eigentlich im täglichen leben nur zu gerne einsetzen würde. z.b. das erste td eines jeden trs auszuwählen...

    eigentlich ne frechheit: 10 jahre is das drausen, keine sau kümmerts... das schöne an standards is, dass jeder seinen eigenen hat :-/

  12. Re: Klammern

    Autor: pro-css 12.07.07 - 15:23

    *ggg* - das seh ich auch so :) - da gehts erst richtig los :)

    mich keks die Vererbung ein wenig an. Wenn ich z.b. einen DIV-Layer auf transparent stellen möchte -werden alle Kinderdivs ebenfalls transparent gestellt... das ist echt irgendwie blöd.. klar, muss wieder rumgetrickst werden... aber wäre doch besser,wenn man den kinderdivs die transparent nehmen könnte.. aber nuja


    Intervis schrieb:
    -------------------------------------------------------
    > Cheatha schrieb:
    > ...mag es wenn es Tricky wird.


  13. Re: Klammern

    Autor: Cheatha 12.07.07 - 15:45

    kannst du das näher beschreiben? ich hatte bisher noch keinerlei probleme mit der vererbung. es kommt eben auf die art und weise an wie du was selektierst...

  14. Re: Klammern

    Autor: LeVito 12.07.07 - 17:50

    Intervis schrieb:
    -------------------------------------------------------
    > Ausser unübersichtlichkeit bringt das doch wohl
    > nix.
    >
    > Anstelle den Code zu verschachteln sollte man sich
    > lieber mit der Kaskadierung und der Spezifität der
    > einzelne Selektoren und Elemente befassen.
    >
    > .div1 .span {
    > color: #369;
    > font-size: 12px
    > }
    >
    > .div1 .xx {color: 000}
    >
    > .div1 #heinz {color: #fff}

    Schon richtig, so geht das schon. Nervt aber. In meinen Styles gibt's gerne mal 50 Regeln, die allesamt mit "#content .bla" beginnen. Dazu nochmal 20 mit "#menu ..." etc.
    Wäre schon schöner, wenn ich das so schreiben könnte, wie der OP vorschlägt.

  15. Re: Klammern

    Autor: LeVito 12.07.07 - 17:56

    K2 schrieb:
    -------------------------------------------------------
    > Cheatha schrieb:
    > --------------------------------------------------
    > -----
    > > div#foo.bar span.baz.quux{
    > border: 1px
    > solid rgb(240,44,9);
    > }
    >
    > gibt
    > jedem span, das die klassen baz und quux hat
    >
    > und sich innerhalb des divs mit der id foo und
    > der
    > klasse bar befindet einen rahmen.
    >
    > über weitere selektoren, negationen und so
    > wollen
    > wir jetzt garnicht reden.
    > kann
    > man ohne dieses wissen überhaupt spaß an css
    >
    > haben? ;-)
    >
    > Richtig Spaß macht es aber nur, wenn man weiß,
    > dass IDs nur 1x vergeben werden dürften, ergo dies
    > "richtiger" wäre:
    >
    > #foo.bar span.baz.quux{
    > border: 1px solid rgb(240,44,9);
    > }

    Wenn man das Element davor setzt, wird das Rendering u. U. schneller, weil der Browser nicht alle Elemente durchgehen muss, um die gewünschte ID/Klasse zu finden. Von diesen Geschwindigkeits-Vorteilen habe ich aber nur irgendwo gelesen, gemerkt habe ich da noch keinen Unterschied. Ich schätze mal, das hebt sich eh wieder auf, weil ja auch ein paar Zeichen mehr heruntergeladen werden müssen. ;-)

  16. Re: Klammern

    Autor: me and myself 12.07.07 - 18:06

    LeVito schrieb:
    -------------------------------------------------------
    > Schon richtig, so geht das schon. Nervt aber. In
    > meinen Styles gibt's gerne mal 50 Regeln, die
    > allesamt mit "#content .bla" beginnen. Dazu
    > nochmal 20 mit "#menu ..." etc.
    > Wäre schon schöner, wenn ich das so schreiben
    > könnte, wie der OP vorschlägt.

    Nein wär es nicht, was würdest sonst mit
    .div2 #harald {color: #fff}
    machen? Wieder komplett neu definieren? Das gibt noch mehr overhead.

  17. Re: Klammern

    Autor: LeVito 12.07.07 - 18:35

    me and myself schrieb:
    -------------------------------------------------------
    > LeVito schrieb:
    > --------------------------------------------------
    > -----
    > > Schon richtig, so geht das schon. Nervt aber.
    > In
    > meinen Styles gibt's gerne mal 50 Regeln,
    > die
    > allesamt mit "#content .bla" beginnen.
    > Dazu
    > nochmal 20 mit "#menu ..." etc.
    >
    > Wäre schon schöner, wenn ich das so schreiben
    >
    > könnte, wie der OP vorschlägt.
    >
    > Nein wär es nicht, was würdest sonst mit
    > .div2 #harald {color: #fff}
    > machen? Wieder komplett neu definieren? Das gibt
    > noch mehr overhead.

    Wo gibt das mehr Overhead? Mal ein Beispiel:

    /* Alle Links grundlegend stylen */
    a {
    color: #f00;
    text-decoration: none;
    }

    /* nur für Content-Bereich */
    #content {
    p { font-size: 1.4em; }
    a { background-color: #ff9; }
    .teaser { color: #99f; font-style: italic; }
    }

    /* nur für Sidebar */
    #sidebar {
    p { font-size: 1.2em; }
    a { background-color: #ccc; }
    }


    Momentan muss ich vor jedes Element, das ich *nur* im #content-Bereich stylen will, ein "#content" schreiben. Das nervt und erzeugt unnötigen Overhead.

    Will ich ein Element generell für die gesamte Seite stylen, setze ich es eben außerhalb von #content { ... }. Und will ich etwas überschreiben, was ich vorher definiert habe, kommt die Regel eben ans Ende des Stylesheets. Heißt nicht umsonst *Cascading* Style Sheet.

    Ach ja, dein Beispiel: #heinz und #harald kriegen einfach je eine Klasse .name, und die wird einmalig definiert - fertig. Keine Doppelungen nötig.

    Grüße
    LeVito

  18. Re: Klammern

    Autor: Flappse 12.07.07 - 18:43

    Optional, meinetwegen. Mir erschließt sich da jetzt kein Vorteil. Mich verwiirt das eher und es scheint eine zusätzliche Fehlerquelle zu sein. Aber ich bin kein Coder und diese Sache ist doch sicherlich aus irndeiner gängigen Programmiersprache entliehen? Für Leuet die diese kennen hat es dann möglicherweise Vorteile. Mir bringt das auf den ersten Blick nichts, ausser Verwirrung.

  19. Re: Klammern

    Autor: me and myself 13.07.07 - 13:00

    Ich bleib mal beim ersten Beispiel und nehme div2/harald dazu. Und bitte diskutier jetzt nicht über die Vergabe der Ids/Klassen, sondern nimm sie als gegeben an. Das ist nur ein Beispiel und keine praktische Anwendung.

    Vorschlag:
    .div1 {
    span {
    color: #369;
    font-size: 12px;
    }

    .xx {
    color: #000;
    }

    #heinz {
    color: #fff;
    }
    }

    .div2 {
    span {
    color: #369;
    font-size: 12px;
    }

    #harald {
    color: #fff;
    }
    }

    Ist-Zustand:
    .div1 span,
    .div2 span {
    color: #369;
    font-size: 12px;
    }

    .div1 .xx {
    color: #000;
    }

    .div1 #heinz,
    .div2 #harald {
    color: #fff;
    }

    Ich hab jetzt mal angenommen, dass #heinz und #harald Spezialfälle von span sind. Ich bevorzuge ganz klar den Ist-Zustand.

    Das "Cascading" im Namen bezieht sich auf die Anwendung der Regeln und nicht darauf wie der Code aussieht.

  20. Re: Klammern

    Autor: blubbberbart 13.07.07 - 13:15

    me and myself schrieb:
    -------------------------------------------------------
    > Ich bleib mal beim ersten Beispiel und nehme
    > div2/harald dazu. Und bitte diskutier jetzt nicht
    > über die Vergabe der Ids/Klassen, sondern nimm sie
    > als gegeben an. Das ist nur ein Beispiel und keine
    > praktische Anwendung.
    >
    > Vorschlag:
    > .div1 {
    > span {
    > color: #369;
    > font-size: 12px;
    > }
    >
    > .xx {
    > color: #000;
    > }
    >
    > #heinz {
    > color: #fff;
    > }
    > }
    >
    > .div2 {
    > span {
    > color: #369;
    > font-size: 12px;
    > }
    >
    > #harald {
    > color: #fff;
    > }
    > }
    >
    > Ist-Zustand:
    > .div1 span,
    > .div2 span {
    > color: #369;
    > font-size: 12px;
    > }
    >
    > .div1 .xx {
    > color: #000;
    > }
    >
    > .div1 #heinz,
    > .div2 #harald {
    > color: #fff;
    > }
    >
    > Ich hab jetzt mal angenommen, dass #heinz und
    > #harald Spezialfälle von span sind. Ich bevorzuge
    > ganz klar den Ist-Zustand.
    >
    > Das "Cascading" im Namen bezieht sich auf die
    > Anwendung der Regeln und nicht darauf wie der Code
    > aussieht.


    1. total unübersichtlich
    2. einiges unflexibler
    3. Wenn du den zweiten Punkt nicht verstanden hast, hast du CSS nicht verstanden

  1. Thema
  1. 1
  2. 2

Neues Thema Ansicht wechseln


Um zu kommentieren, loggen Sie sich bitte ein oder registrieren Sie sich. Sie müssen ausserdem in Ihrem Account-Profil unter Forum einen Nutzernamen vergeben haben. Zum Login

Stellenmarkt
  1. Uhlmann Pac-Systeme GmbH & Co. KG, Laupheim
  2. ZIEHL-ABEGG SE, Künzelsau
  3. Fiducia & GAD IT AG, Karlsruhe, Münster, Aschheim
  4. Scheidt & Bachmann GmbH, Mönchengladbach

Golem pur
  • Golem.de ohne Werbung nutzen

Anzeige
Hardware-Angebote
  1. (u. a. Ryzen 5 5600X 358,03€)


Haben wir etwas übersehen?

E-Mail an news@golem.de