Organiser son code CSS

Version imprimable

14/10/2020, 18h40
arwin

Organiser son code CSS

Ma question est un peu générale. J'aimerais savoir comment vous faites pour utiliser un élément (pour mon cas un cœur animé donc deux images et une animation) dans des contextes différents : par exemple sur la page d'accueil le coeur est dans une div positionnée en haut et dans les pages intérieures on retrouve notre petit cœur dans différents paragraphes. En plus, pour corser l'affaire, kid des medias query ? Je me sen un peu perdu, j'ai lu qu'il fallait utiliser plusieurs classes mais je n'arrive pas à le faire correctement et proprement. Avez-vous une idée ou un petit tuto qui parle de se sujet ? Merci
15/10/2020, 08h00
NoSmoking
Bonjour,
tu mets tous tes éléments dans un conteneur et tu t'occupes de positionner ce conteneur et lui seul selon ton besoin.

En utilisant une classe cela te permet de mettre les différent positionnement dans le même fichier CSS.

Par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 #logo { width: 5em; height: 5em; background: #ABC; } .main-page #logo { position: absolute; left: 1em; top: 1em; }
et le HTML correspondant

Code:

<div id="logo"></div>

l'élément se placera dans le flux sauf si ton <body>, par exemple possède la classe main-page, <body class="main-page">.

Idem pour l'utilisation des média-queries, par exemple :
Code:

1 2 3 4 5 @media (max-width: 767px) { #logo { display: none; } }
15/10/2020, 20h46
arwin

Merci NoSmoking,
et si jamais je veux utiliser ce logo dans un autre endroit en lui modifiant une ou deux règles (par exemple les dimensions ou la couleur, par exemple pour une media-query > 932px la taille du logo change) je dois créer un autre logo ou comment ?
16/10/2020, 14h43
NoSmoking
Citation:

je dois créer un autre logo ou comment ?

tu peux te créer de nouvelles règles associées, ou non, à des média-queries :
Code:

1 2 3 4 5 @media (max-width: 968px) { #logo { background: #F00; } }
tu fais ce que tu veux en fonction des points de rupture que tu choisis.
17/10/2020, 21h55
arwin

Merci beaucoup NoSmoking, c'est clair et net. Bravo