Bonjour à vous tous,

J'ai un dilemme ! J'ai découvert la déclaration !important et je le trouve très utile dans les CSS pour échapper à la cascade des styles en appliquant la nouvelle valeur tout en ignorant les précédentes. Mais quelqu'un de chez vous dit qu'il ne faut l'utiliser qu'en cas d'extrême nécessité car son utilisation fréquente dénote un code délaissé et mal réfléchi (https://christophe-f.developpez.com/...ion-important/).

Pourtant, je suis confronté à un cas concret.

Voici le code HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="fr" >
     <head>
          <meta charset="utf-8">
          <link href="styles2.css" type="text/css" rel="stylesheet">
	  <link href="reset.css" type="text/css" rel="stylesheet">
          <title>Titre de la fenêtre</title>
     </head>
<body>
	<section>
		<div class="classDiv">
			<h1>Ceci est un titre</h1>
			<p>Le tramway jaune avance lentement dans le brouillard laiteux et surchauffé de cette fin d’après midi d’été. Le trafic s’écoule sous la canicule, se disperse et se répand dans les mille recoins de Budapest. La ville piétine et les enfants assiègent les marchands de glace. La voiture passe au loin, tourne sur les grands boulevards, longe une avenue et débouche sur le pont Elisabeth. Suspendu dans le vide, acrobate au fil des ans et de l’eau qui passent, le monument traverse le fleuve en une enjambée majestueuse, rétablissant le lien séculaire entre la ville bourgeoise de Pest et les collines royales de Buda. Sous le pont passe un hydroglisseur, il arrive de Vienne enrobé d’un cocon d’argent, milliards de gouttes d’eau qui brillent dans l’air surchauffé, d’où émergent en virevoltant les mouettes du Danube. Le Saint-Cloud de la Hongrie est plus haut, plus aride et plus difficile d’accès que celui de Paris. Bientôt la voiture est obligée de s’arrêter et on continue à pied pour arriver au point le plus culminant du mont Gellért, à cinq cents mètres d’altitude au cœur de la citadelle. On découvre alors la Ville, avec comme seul garde-fou les remparts de la fortification. Tout Budapest est là, séparée en deux par le large ruban argenté du Danube. Au nord, on devine l’île Marguerite, ses palaces et ses piscines.</p>
		</div>
	</section>
</body>
</html>
Et voici le
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.classDiv {
	width: 400px;
	background-color: green;
	padding: 35px;
}
 
h1 {
	text-align: center;
	background-color: yellow;
	text-transform: uppercase;
	font-size: 1.5em;
	padding: 15px !important;
	margin: -35px !important;
	margin-bottom: 35px !important;
}
 
p {
	font-size: 1.3em;
	color: white;
	line-height: 1.3em;
}

J'obtiens ce résultat :
Nom : Capture.PNG Affichages : 118 Taille : 97,6 Ko

J'ai utilisé 3 fois !important dans le titre h1. C'est parce qu'il a hérité des valeurs de padding et margin placées dans la classe "maDiv" de la div verte qui est son parent. Si je ne mets pas la déclaration !important, il n'y aucun changement étant donné que ces trois propriétés héritent des valeurs de leur parent.

Alors, voici ma question. S'il est effectivement important de ne pas utiliser la déclaration !important, comment faire alors dans ce cas concret ?

Merci pour votre aide.