Problem beim setzen mehrere Styles

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

hat aber den Vorteil, dass Inline-Styles entstehen, die gleichlautende im Stylesheet überschreiben.

Du verwechselst vor und nach.

Man kann etwas sorgloser programmieren und braucht nur an einer Stelle ändern.

Diese Sorglosigkeit rächt sich!

Bei der Plattform, an der ich mitarbeite, gibt es etliche Elemente mit @class="hidden", die anfangs nicht sichtbar sein sollen. Dazu steht im Stylesheet
  .hidden { display: none }

Nun sollen einige davon evtl. später mit JavaScript sichtbar gemacht werden. Das geschieht aber nicht etwa per
  $('#foo').removeClass('hidden');
sondern per
  $('#foo').show();
was die 'display'-Eigenschaft auf "block" setzt; spezifischer als die Regel im Stylesheet.

Lass dir das auf der Zunge zergehen: Elemente haben die Klasse "hidden", sind aber sichtbar.

Nun hatte letztens die glorreiche Idee, die Regel important zu machen:
  .hidden { display: none !important}
Sieht ja eigentlich auch vernünftig aus.

Aber vorbei war’s mit dem Sichtbarmachen per JavaScript! Die spefifischere Regel im Stylesheet ließ die Inline-Style-Regel nicht zur Geltung kommen. (Wurde aber bemerkt, das ging nicht so raus.)

Moral von der Geschichte:
(1) Verwende keine Bezeichner, die nicht das ausdrücken, was sie wirklich tun.

(2) Trenne Präsentation (CSS) und Verhalten (JavaScript) voneinander! Ändere keine CSS-Eigenschaften per JavaScript! jQuery’s show() and hide() considered harmful.

Qapla'