Salut, je commence html et css depuis une semaine, avant j'ai connue un langage "gml" qui était asse différent.. plus du genre variable condition boucle tableau algo ce genre de chose, et je suis un peu dérouté avec ces 2 langages.

J'essaye de faire une chose asse simple qui pourrait être ultra pratique mais qui n'a pas l'air d'exister en css ou html.

Je voudrais créer des class génériques qui m'éviterait d'écrire trop de ligne de code inutiles.
exemple:

.bg-rouge_p-bleu_bold {           /*class générique*/
    background-color: red;
    color: blue;
    font-weight: bold;
}

div.boite_un{
/*ajout d’attribut de un ou plusieurs class */
    style: bg-rouge_p-bleu_bold , un_autre-style , un_autre_style...;   
    margin: auto;
    position: relative;
    width: 1200px;
    height: auto;
}
div.boite_deux{
    style: bg-rouge_p-bleu_bold , un_autre-style , un_autre_style...;
    margin: 50% 25%;
    position: absolute;
    width: 400px;
    height: auto;
}

Tu peux filer plusieurs class à un même élément, du coup une solution évidente ce serait de faire ça côté html :

<div class="bg-rouge_p-bleu_bold boite_un"></div>
<div class="bg-rouge_p-bleu_bold boite_deux"></div>

Sinon, côté css, tu peux affecter plusieurs selecteurs en les séparant par des virgules

.bg-rouge_p-bleu_bold, .boite_un, .boite_deux {
    background-color: red;
    color: blue;
    font-weight: bold;
}

.boite_un{
*autre style*
}

A noter qu'avec le css, le dernier style déclaré à priorité, du coup si tu fous exemple "color:red" dans boite_un, alors le texte apparaîtra en rouge.

Si ces solutions ne te plaisent pas il te faudra te tourner vers quelque chose comme du sass, qui permet l'utilisation de variables, d'héritage, d'imbrications...

Tu peux utiliser des variables CSS, tout simplement. Mais sinon, simplement attribuer plusieurs classes à un même élément. C’est un peu le principe.

.button {
	display: inline-block;
	background: coral;
	color: #fff;
	border: 0;
	border-radius: .15em;
	outline: 0;
	padding: 1em 2em;
}

.button--success {
	background: mediumseagreen;
}

.button--small {
	font-size: .75rem;
}

.button--big {
	font-size: 1.5em;
}

<button class="button button--big">Bouton</button>

<button class="button button--small">Bouton</button>

<button class="button button--success button--big">Bouton</button>

Et rien n’empêche de combiner ça avec des variables.