Comment stylisé des elements

Julieen42
Les bases HTML/CSS

Bonjour,

je voulais savoir, qu'est ce qui est plus rapide entre mettre une classe à chaque balises et ensuite de faire .nom dans le fichier css ou bien ne mettre aucun classe et stylisé la balise en faisant par exemple nav a { code ... }

Exemple d'un morceau de HTML

<nav class="nav">
    <ul class="nav-list">
        <li class="nav-item current-nav-item">
            <a class="nav-link" href="#">
                Lorem ipsum
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                Lorem ipsum
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                Lorem ipsum
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                Lorem ipsum
            </a>
        </li>
    </ul>
</nav>

et dans mon css je fais :

.nav {}
.nav-list {}
etc

Merci d'avance de vos réponses, cordialement, Julien.

5 réponses

Olmek

C'est tout aussi rapide mais quand tu joues sur l'héritabilité (ta deuxième solution) tu gagnes de la lisibilé au niveau du html, tu mets moi de class ou id.

ferdikam

Je te propose aussi le tutoriel qui te permettra de bien organiser ton css et ta manière d'utiliser les classes et ID dans ton html
[http://www.grafikart.fr/tutoriels/html-css/css-organiser-smacss-500]()

Guklam

tu peux aussi jouer sur les nth-child() ^^

malgrès que ce soit très très sale. ^^

Inspirat

Les deux solutions sont valables, l'intérêt d'utiliser des classes permet une meilleure maintenabilité du code. En revanche, ça complique le partage du CSS lorsqu'il n'y n'a pas de documentation associée. Moins il y aura de classe à utiliser (et donc plus tu joueras sur l'héritage et la stylisation direct des éléments), plus l'utilisation du CSS par un inconnu sera facile.

Je pense notamment à Foundation qui utilise la stylisation des éléments directe pour facilité l'utilisation du framework CSS tandis que Bootstrap utilise des classes pour chacun des éléments stylisés.

hachbe

Pour moi, le plus propre et le mieux étant d'avoir une classe sur ton element qui englobe ton module navigation et de joure ensuite avec des selecteurs CSS sur base des balises HTML.

Ca t'évites des 'ovrewrites' involontaires. te permet de garder ton code clean coté HTML et qui soit bien lisibles.
Maintenant pour les états (statut particulier) des éléments contenus dans ta navigation (je pense par exemple au fait d'appliquer un style sur un element du menu pour indiquer qu'on est sur la page de ce lien) tu peux bien entendu ajouter une classe (dynamiquement?) style "isActive".

Comme dit ferdikam; la méthode SMACSS est parfait si tu te pose de bonnes questions comme tu l'as fait :)