PHPascal.com

PHPAscal rouge2 (Version bleu)


Programmation web CSS HTML PHP Jquery Javascript Wordpresse RSS SQL SSH, serveur linux Outils
  PHPascal a 144 articles


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

Programmation web / CSS / Mauvaise utilisation CSS

Mauvais utilisation CSS et HTML

Voici une liste de mauvaise utilisation du CSS en comparaison au meilleur pratique CSS

Erreur #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.

Exemple de reset CSS

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;}

 



 



Article écrit le 6 décembre 2012
Article modifié le 6 décembre 2012

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2017
Temps d'exécution : 0.0102 sec
Imprimer le 16 August 2017 - 23:42:19
par Pascal Dubreuil organisateur du Marathon de Laval