JavaScript CSS Klassen von Objekten verändern

[pineapplefreak]

Holla, liebe Frontender

Ich habe eine kleine Frage:
Wir haben ein kleines Projekt für die Uni am laufen. Dort haben wir einen ganzen Haufen Buttons auf einer Seite.
Je nachdem, welche Bedingungen man hat und auf einen Button klickt, bekommt der eine CSS Klasse zugewiesen (und ändert dahingehend sein Aussehen).

Bsp: Ich wähle als Bedingungen die Checkboxen "grün" und "klein"aus und drücke Button B. Dieser bekommt daraufhin die CSS Klasse "Button.littleGreen". Diese macht den Button grün und "klein". Jeder Button ist aber standartmäßig schon Mitglied der Klasse "buttons". Diese sorgt dafür, dass die Buttons einen 1px Rahmen haben. ".littleGreen" erbt also von "buttons" (--> @extend , heißt das überhaupt erben in CSS?).


Mein Problem ist jetzt folgendes: Ich brauche ein weiteres Attribut "aktiv". Der zuletzt gedrückte Button soll jeweils aktiv sein. Als Zeichen soll der Rahmen auf 3px vergrößert werden. Muss ich jetzt für jeder meiner Unterklassen (".littleGreen", ".bigGreen", ".littleYellow", ...) noch eine weitere Unterklasse (".activeLittleGreen", ...) machen, die jeweils von jeder Klasse erbt?

Gibt es da nicht eine Möglichkeit das zu umgehen? Vielleicht indem ich von mehreren Klassen erbe (obwohl das eigentlich nicht geht)?


Ein CodeSchnipsel sieht so aus:

	".buttons":{
		background:"#ebf5fa",
		border:"1px",
	},

	".littleYellow":{
		"@extend":".buttons",
		background:"#e6d8ff",
		"&:hover":{
			background:"#deccff",
		},
	},

(Wir verwenden J2C, also kein reines CSS, davon nicht beirren lassen. Darum auch die Einteilung in Javascript)


Gibt es da vielleicht einen Trick in CSS um sowas zu bewerkstelligen?

vielen Dank für die Hilfe im Vorraus!

 

[Hooo]

".buttons":{
	background:"#ebf5fa",
	border:"1px",

        "&.active":{
		border: "3px"
	}

}

<button class="littleYellow active">Ich bin aktiv</button>

Ich habe keine Ahnung von J2Css, aber ich denke so könnte es gehen.

 

[pineapplefreak]

".buttons":{
	background:"#ebf5fa",
	border:"1px",

        "&.active":{
		border: "3px"
	}

}

<button class="littleYellow active">Ich bin aktiv</button>

Ich habe keine Ahnung von J2Css, aber ich denke so könnte es gehen.

Ok, das könnte gehen. Das activ wird automatisch aufgerufen, wenn man den Button anklickt? Weil das ist nicht, was ich will. Später kommen dann z.B. Sachen wie "lastactive", "secondlastactive", ... dazu.

EDIT: Wäre es auch möglich dieses "&.active" in die Buttons Klasse zu packen? Dann muss ich das nicht für jede Unterklasse extra machen.

 

[mastaqz]

Da finde ich BEM sinnvoll: http://getbem.com/introduction/

Ich würde folgende Klassen erstellen:
.button
.button--small
.button--green
.button--active

.button--active dann eben mit add()/remove() (JS) oder addClass()/removeClass()(jQuery) steuern.

Bringt Modularität und erhöht die Einfachheit.

 

[pineapplefreak]

.button--active dann eben mit addClass()/removeClass() steuern.

Wie meinen? Wie kann ich zu einem Element mehrere Klassen hinzufügen? Es kann doch nur entweder Klasse ".button" oder ".button--small" oder ... sein, nicht mehreres auf einmal?

 

[Hooo]

Ich würde dir empfehlen dir erstmal CSS anzuschauen bevor du mit J2Css herumferkelst.

Ein Element kann mehr als eine Klasse haben:
<button class="littleYellow active"> (Klassen littleYellow + active gleichzeitig)

Es ist dann möglich mit JavaScript programmatisch dem Button die Klasse "active" an und auszuschalten
z.B. button.classList.toggle("active")

Er besitzt dann sowohl die Eigenschaften von littleYellow als auch von active
Wenn die beiden Klassen gleiche Eigenschaften aufweisen, in deinem Fall die Eigenschaft "border", wird die speziellere Klasse (eigenl. Selektor) verwendet, hier also border: 3px (https://little-boxes.de/lb1/6.5-spezifitaet-punktesystem-fuer-selektoren.html).

 

[mastaqz]

Wie meinen? Wie kann ich zu einem Element mehrere Klassen hinzufügen? Es kann doch nur entweder Klasse ".button" oder ".button--small" oder ... sein, nicht mehreres auf einmal?

Nein,ein Element kann ganz einfach mehrere Klassen haben:
<div class="button button--green button--active">3 Klassen: button, green, active</div>

 

[pineapplefreak]

Ich würde dir empfehlen dir erstmal CSS anzuschauen bevor du mit J2Css herumferkelst.

Ein Element kann mehr als eine Klasse haben:
<button class="littleYellow active"> (Klassen littleYellow + active gleichzeitig)

Es ist dann möglich mit JavaScript programmatisch dem Button die Klasse "active" an und auszuschalten
z.B. button.classList.toggle("active")

Er besitzt dann sowohl die Eigenschaften von littleYellow als auch von active
Wenn die beiden Klassen gleiche Eigenschaften aufweisen, in deinem Fall die Eigenschaft "border", wird die speziellere Klasse (eigenl. Selektor) verwendet, hier also border: 3px (https://little-boxes.de/lb1/6.5-spezifitaet-punktesystem-fuer-selektoren.html).

Ok, genau das habe ich gesucht!
Vielen Dank! Ich hab mit JS und CSS fast noch nichts gemacht. Daher hab ich mich bisher an die Arbeitsweise meiner Kollegen gehalten und dort war das noch nicht so gemacht worden!

Frage: Bei den Klassen:
.button
.active
wobei die letztere nur den border neu definiert, warum wird dort die letztere ausgewählt? Nach dem Punktesystem hat ja sowohl .active, als auch .button 10 Punkte. Wählt der Browser dann .active, einfach, weil es weiter unten im Stylesheet steht?

 

[Hooo]

Ich fang mal vorne an:

// klassisches CSS

.button { // Spezifität Klasse = 10
    background: #ebf5fa;
    border: 1px;
}

.button.active { // Spezifität Klasse x2 = 20
    border: 3px
}

Die J2Css Bibliothek nutzt eine etwas andere Syntax (angelehnt an CSS Preprozessoren Sass, Less)

.button {
  background: #ebf5fa;
  border: 1px;
  
  &.active { // ein Element mit Klasse .button UND .active (deshalb auch 2x10 = 20)
    border: 3px;
  }
}

Wenn du den zweiten Code-Schnipsel durch nen Sass Preprozessor laufen lässt. Kannste ja spaßeshalber mal machen (https://www.sassmeister.com/), bekommst du den ersten Code-Schnipsel heraus.
Also das ist nur eine komfortablere Schreibweise.

Ich weiße an dieser Stelle lieber schon mal darauf hin, dass

// Leerzeichen beachten
.button.active != .button .active

Ersteres heißt: Element mit Klassen .button und .active
Zweiteres heißt: Ein Element mit der Klasse .active das ein Kind von einem Element mit der Klasse .button ist

 

[pineapplefreak]

Ich fang mal vorne an:

Sehr gute Idee!

// klassisches CSS

.button { // Spezifität Klasse = 10
    background: #ebf5fa;
    border: 1px;
}

.button.active { // Spezifität Klasse x2 = 20
    border: 3px
}

Ok, wenn ich jetzt Unterklassen von ".button"habe, muss ich bei denen nicht nochmal die "active" Unterklasse definieren, richtig?

// Leerzeichen beachten
.button.active != .button .active

Ersteres heißt: Element mit Klassen .button und .active
Zweiteres heißt: Ein Element mit der Klasse .active das ein Kind von einem Element mit der Klasse .button ist

[/QUOTE]

Das heißt, im zweiten Fall hat .active eine Priorität von 20, im ersteren von 10?

.button.active {
    border: 3px
}

Das hier beschreibt ein Kind ".active" der Klasse ".button"?

 

[Hooo]

Mal ein kleines Beispiel zur Verständnis, hoffe ich zumindest

<div>
  <ul class="container">
    <p class="text active">
      Paragraph
    </p> 
  </ul>
</div>

CSS

.container .text { // 10 + 10, .text in einem .container
  color: white;
  background-color: yellow;
}

div .container .text { // 1 + 10 + 10, .text in einem .container in einem div
  background-color: blue; // überschreibt background-color: yellow, weil höhere Spezifität
}

.text.active { // 10 + 10, sowohl .text als auch .active
  color: violet; // hat gleiche Spezifität wie (.container .text) letzter Selektor wird angewendet (<- dieser hier also)
}

Die Art von Vererbung an die du denkst (meine Annahme) gibt es so in CSS nicht. Zumindest nicht ohne Preprozessor.

Eine Lösung wäre

.button {
   // hier alle Gemeinsamkeiten rein
}

.button.active {
  // hier die Eigenschaften eines aktiven Buttons
}

.littleYellow {
  // hier alle spezifischen Eigenschaften rein
}

.littleGreen {
  // hier alle spezifischen Eigenschaften rein
}

.littleBlue{
  // hier alle spezifischen Eigenschaften rein
}

im HTML dann wie folgt:

<button class="button littleYellow"> 
<button class="button littleBlue active"> // aktiv
<button class="button littleGreen">

 

[pineapplefreak]

Tut mir Leid, ich muss nochmal nachfragen!
In HTML wäre der korrekte Code doch

    <button class=".button .littleYellow"> 
    <button class=".button .littleBlue .active"> // aktiv
    <button class=".button .littleGreen">

oder?
Hast du dort absichtlich die Punkte vor button, littleBlue, ... weggelassen?


EDIT
Oder wäre der korrekte Code nicht doch:

    <button class=".button.littleYellow"> 
    <button class=".button.littleBlue.active"> // aktiv
    <button class=".button.littleGreen">

,weil ich ja keine Kinder habe.

 

[ayngush]

In HTML gehören die Punkte vom CSS nicht hin.
Ein Punkt steht in CSS für eine Klasse, die ja in HTML mit class="" angesprochen wird (dort ohne Punkt)
Listentrennzeichen für mehrere Klassen in HTML ist ein Leerzeichen. Also einfach class="btn btn-sm btn-3 btn-active" zum Beispiel.