Expliquez quelle div vous fermez
La plupart du temps, lorsque je consulte une source de site Web, je vois, tout en bas de la page, une liste presque infinie de balises de fermeture. En fait, de nombreux débutants pensent qu’ils ont juste à utiliser des divs au lieu de tables pour produire du code de qualité. Divs sont des nettoyeurs que les tables, mais sans organisation de code appropriée, il peut être aussi (ou même parfois plus) désordonné que le code basé sur la table.
L’utilisation de l’indentation est un bon début. Mais un conseil qui peut certainement vous faire gagner beaucoup de temps est de commenter chaque balise div que vous fermez, comme indiqué dans l’exemple ci-dessous:
<div id="header"> <div id="sub">... </div><!-- #sub.first.left --> </div><!-- #header -->
Utiliser une réinitialisation CSS
Sauf si vous êtes un débutant ou si vous étiez en vacances sur une île déserte pour les 6 dernières années, vous savez peut-être déjà à quel point un CSS le réinitialiser. Parce que par défaut, les navigateurs n’appliquent pas le même style par défaut aux éléments HTML, une réinitialisation CSS garantira que tous les éléments n’ont pas de style particulier afin que vous puissiez définir le vôtre sans risque de nombreux problèmes de rendu cross-browser.
html, corps, div, span, applet, objet, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronyme, adresse, grand, citer, code,
del, dfn, em, police, img, ins, kbd, q, s, samp,
petite, grève, forte, sub, sup, tt, var,
b, u, i, au centre,
dl, dt, dd, ol, ul, li,
fieldset, forme, étiquette, légende,
table, légende, tbody, tfoot, thead, tr, e, td {
marge: 0;
rembourrage: 0;
frontière: 0;
contour: 0;
taille de police: 100%;
alignement vertical : ligne de base;
contexte : transparent;
}
corps {
hauteur de la ligne: 1;
}
ol, ul {
liste de style: aucun;
}
blockquote, q {
citations: aucun;
}
blockquote:avant, blockquote:after,
q:before, q:after {
contenu: '';
contenu: aucun;
}
/* n’oubliez pas de définir les styles de mise au point! */
:focus {
contour: 0;
}
/* n’oubliez pas de mettre en surbrillance inserts en quelque sorte! */
ins {
texte-décoration: aucun;
}
del {
texte-décoration: line-through;
}
/* les tables ont encore besoin de 'cellspacing="0"' dans le balisage */
tableau {
effondrement de la frontière : effondrement;
espacement des frontières : 0;
}
Source:http://meyerweb.com/eric/tools/css/reset/index.html
Ne t’en @import
Les fichiers CSS peuvent être inclus à l’aide de la directive @import’utilisation. Cela peut être utile lorsque, par exemple, vous souhaitez inclure une feuille de style dans une autre. Une autre pratique courante est d’inclure le fichier CSS dans les documents html en utilisant les éléments suivants :
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>
Bien qu’elle fonctionne, @import directive est beaucoup plus lente que l’autre façon d’inclure des feuilles de style dans un document html :
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
Il ne fera pas de différence sur les sites Web à faible trafic, mais si vous avez la chance de posséder un site web populaire, ne perdez pas le temps de votre visiteur en utilisant @import.
Source:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
« Smush » vos images
En tant que développeur, j’ai toujours trouvé que l’optimisation de mes images pour le web n’était pas facile. J’ai essayé le bon vieux « Enregistrer pour le web » commande Photoshop, mais la plupart du temps, je me suis retrouvé avec des images qui étaient soit trop grand ou sans une qualité suffisante.
En conséquence, j’ai eu la mauvaise habitude d’utiliser des images non optimales sur mes sites Web. Ce n’est pas un problème quand vous n’avez pas à vous soucier de la bande passante de votre site, mais après mon récent commutateur sur mon serveur privé virtuel vps.net, j’ai dû être prudent avec la taille de l’image.
En ce moment, j’ai trouvé un outil très cool nommé Smush It: Vous entrez votre url d’image non optimisée, et Smush Il va créer une image parfaitement optimisée pour vous. Vous pouvez économiser jusqu’à 70% de la taille du fichier, tout en conservant la qualité d’origine. À titre d’exemple, toutes les images de ma liste d’éditeurs de code en ligne ont été « smushed ».
Ne mélangez pas CSS avec HTML
En tant que langage de balisage, la bonne utilisation du HTML est d’organiser les documents en définissant un en-tête, un pied, des listes, des blockquotes, etc. Il ya quelque temps, les développeurs web front-end souvent utilisé maintenant déprécié attributs HTML pour le style d’un élément particulier.
Aujourd’hui, l’attribut de style permet aux développeurs d’insérer CSS directement dans un document html. Ceci est très utile pour les tests ou lorsque vous êtes pressé. Mais l’attribut de style est une mauvaise pratique, qui va complètement à l’encontre de la philosophie CSS.
L’exemple suivant illustre comment sale et difficile à lire une simple ligne de code peut devenir, avec l’attribut de style:
<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Chats qui codent</a>
Ne mélangez pas Javascript avec HTML
Tout comme le mélange de votre code html avec css est une mauvaise pratique, vous ne devriez pas utiliser n’importe quel Javascript dans vos documents html. La mauvaise pratique suivante illustre un événement onclick:
<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Chats qui codent</a>
Le même résultat peut être obtenu à l’aide de Javascript non obstrué. Dans cet exemple, j’utilise le cadre jQuery populaire:
$(document).ready(fonction){
$('#cwc').click(function){
alerte (« J’adore ce site »);
});
});
Cela peut sembler un peu plus difficile au début, surtout pour les débutants; mais ce n’est certainement pas le cas, et il gardera votre document html propre.
Utiliser des commentaires conditionnels
Vous le savez, IE suce, et certains clients sucent encore plus en vous obligeant à créer des pages Web qui sont compatibles avec ce navigateur obsolète. Pour cibler des versions spécifiques d’IE, vous pouvez utiliser les hacks IE bien connus, comme indiqué ci-dessous:
hauteur: 200px; /* navigateurs normaux */ _height: 300px; /* IE6 */ .hauteur: 250px; /* IE7 */ *hauteur: 350px; /* Tous les IE */
Ces hacks sont extrêmement utiles parfois, mais ils ne sont pas la meilleure façon de cibler une version spécifique de l’IE, et il provoquera votre validation CSS à l’échec.
Au lieu de cela, vous devriez utiliser le commentaire conditionnel indiqué ci-dessous pour cibler IE6.
<link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Placer le fichier Javascript en bas
Une pratique populaire de la fin des années 90 /début des années 2000 était de placer des fichiers Javascript dans le<head>Et</head>étiquettes. Le problème est que vos fichiers javascript seront chargés en premier, et par conséquent votre contenu sera chargé après.
En plaçant des fichiers Javascript au bas de vos documents, vous vous assurerez que les fichiers JS ne seront chargés que lorsque le contenu a été correctement affiché.
... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
Utiliser HTML sémantiquement
HTML n’est pas un langage de programmation. Il s’agit d’un langage de balisage, utilisé pour créer des documents structurés en désignant la sémantique structurelle pour les textes tels que les titres, paragraphes, listes, et plus encore.
Si vous avez commencé à créer des sites Web dans le bon vieux 90 ou au début du siècle, vous savez comment sale le balisage était à l’époque. Mais avec bonheur, il a évolué.
Entre autres choses, il est important d’utiliser l’élément html sémantiquement. Par exemple, un menu de navigation doit toujours être une liste non ordonnée :
<ul> <li><a href="#">Accueil</a></li> <li><a href="#">Sur</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul>
Testez pendant que vous construisez pour éviter les problèmes de navigateur croisé
Une des plus grandes erreurs que j’ai jamais fait lors du développement html, CSS, et javascript, a été de ne pas tester mes pages sur plusieurs navigateurs pendant que je les écrivais. Au lieu de cela, j’avais l’habitude d’écrire tout mon code et il suffit de voir dans Firefox pour voir comment il a été rendu.
