Mauvais utilisation CSS et HTML
Voici une liste de mauvaise utilisation du CSS en comparaison au meilleur pratique CSSErreur #1 : Feuille de style avec class et identifiant uniquement :
#header {... }.title { ...}
.big_title{ ...}
#content { ...}
.box { ...}
#topNav { ...}
#menu { ...}
Problème: pour chaque élément web que l'on veux styliser en CSS il faut spécifier la class ou l'attribut voulu ce qui est plus long et complexe que d'utiliser tout simplement les balise HTML existant et faire l'habillage a partir des balise de base. En plus dans l'utilisation de wisiwig ça devient impossible d'ajuster le style avec toutes les classe nésessaire.
Solution : Toujour commencer les fichier CSS par la liste des balise de Base pour par la suite rajouter des classe et identifiant au besoin.
body{ ...}
h1,h2,h3,h4,h5,h6 { ...}
p { ...}
strong { ...}
a, a:active, a:hover, a:visited { ...}
.box { ...}
#menu { ...}
Erreur #2 Utilisation de class sans en avoir de besoin
Par exemple si on veux mettre un style spécial au titre principal de nos page
HTML: <h1 class'titre'>Mon titre</h1>
CSS: h1.titre { ...}
Si tout les titre <h1> on le même style pas besoin d'inscrire class='titre' juste <h1>Mon titre</h1> avec le CSSà: H1 { ...}
Erreur #3 Ne pas utilisé l'héritage des class
Par exemple si vous avez une liste spécial dans votre code a mettre un affichage différent sur les lien de cette liste :<ul>
<li><a href='#' class='special'>Lien special</a></li>
<li><a href='#' class='special'>Lien special</a></li>
<li><a href='#' class='special'>Lien special</a></li>
<li><a href='#' class='special'>Lien special</a></li>
<li><a href='#' class='special'>Lien special</a></li>
</ul>
CSS: .special { ...}
Ceci n'est pas bon et ajout du code HTML inutile, pour ajouter un style différent a une liste il suffit de mettre la class special dirrectement sur la liste <ul class='special'> et pas sur chaque element de cette liste :
<ul class='special'>
<li><a href='#'>Lien special</a></li>
<li><a href='#'>Lien special</a></li>
<li><a href='#'>Lien special</a></li>
<li><a href='#'>Lien special</a></li>
<li><a href='#'>Lien special</a></li>
</ul>
CSS: .special li a { ...}
Erreur 4 Utilisation injustifiée des identifiant id
Il faut savoir que les identifiants sont utilie uniquement si on a besoin rapidement de manipuler via javascript un élément. Ceci est une erreur très répendue sur le web :CSS: #content, #Header, #footer { ...}
C'est inutile il faut plutôt utilisé des classe CSS : .content, .Header, .footer { ...} . le fait d'utilisé des classe au lieu des identifiant nous permet de les réutilisés dans le code ce qui n'est pas permi avec les id. Par exemple on pourrais ajouter un deuxiéme footer au site en gardant le même style : <div class='footer'>Footer 1</div><div class='footer'>Footer 2</div> ce qui n'est pas possible avec les identifiant <div id='footer'>
Erreur #5 Être trop spécifique dans nos style CSS
Avec un site web il arrive souvent que l'on doit utiliser beaucoup de style CSS pour ce faire certain utilise une façon de procédé qui est trop restrictive exemple :.main .content .box .news{ ..}
.main .content .box .news .title { ..}
.main .content .box .news .paragraph{... }
.main .content .box .news .paragraph .big {... }
Ceci est un exemple pour ajouter du style a des Nouvelles. (en plus dans cette exemple j'ai mis l'erreur #1, utilisation de <div class='paragraph'> au lieu de <p>
Ce type d'utilisation de CSS empêche tout utilisation par la suite
dans un autre context du style disponible.
Meilleur façon de procédé :
.news{ ..}
.news .title { ..}
.news .paragraph{... }
.news .paragraph .big {... }
Ceci nous permet d'utilisé la class .news sans avoir besoin d'être dans un emplacement très restrint
Erreur #6 Utilisation de class Clear all
La majorité des intégrateur utilise a profusion des class 'clear' pour finalisé leur différent contenu flotant.
<div class'clear'></div>
CSS: .clear { clear:both;}
Ceci est unitile et doit être remplacement par la balise HTML qui sert justement a le faire <br /> juste besoin de le spécifier dans le html : <br clear='all'/>
Erreur #7 Utilisation d'un CSS reset
Plusieur site utilise leur code CSS par un reset de toutes les valeur par defaut de toute les balise HTML.
Ceci est très mauvais car cela vous oblige par la suite de redéfinir chacun des éléments HTML. Et dans la plupart des cas on doit ajouter plein de code CSS pour remettre les option CSS qui ont été enlevé lors du reset. J'ai même vu dans différents site que le <strong> n'était plus bold après le reset.
Meilleur pratique resetter les quelque balise HTML nécessaire pas toutes la gang. Exemple:
img { border:0px;}
table {border-collapse: collapse;}