Réapprendre le CSS de la bonne façon

Question

Je suis un programmeur de faire du développement web depuis plus de deux ans maintenant. Même si j'ai été faire front end engineering pour les deux dernières années, je ne pense pas que j'ai fait de la bonne façon
Par exemple:

• Je continue de faire de mise en page avec des tableaux et non seulement avec les CSS. Je n'ai pas encore trouvé un moyen de présenter correctement les données alignées et de tableaux.
• Je ne sais pas la différence entre display: none et visibility: hidden (bien, je le sais maintenant. mais il y a beaucoup de cas comme le rembourrage, les marges, les débordements etc)
• Je n'ai pas vraiment suivi l'héritage moyen de l'écriture CSS. Presque chaque style commence avec un # , et non une classe.
• Chaque fois qu'une page se charge lentement les éléments html sont hors de l'endroit et à l'automne dans l'ordre, seulement lorsqu'il est complètement chargé.
• Je ne sais pas ce que cette image dans firebug est de convoyage (en passant, firebug est mon sauveur. La vie aurait été impossible sans Firebug)

• Chaque fois que la disposition en désordre, je suis tenté d'utiliser position:absolute. Invariablement, il se retrouve dans un désordre plus grand.

Je sais que je fais beaucoup de choses de mal(et j'ai besoin d'obtenir ce droit) ici, mais j'ai réussi à faire les choses en place et en quelque sorte de l'afficher, de le voir foiré dans un autre navigateur.

Je ne veux pas faire une couche d'apprêt sur le CSS ou CSS pour les nuls. Je sais plus de qui. Je veux apprendre le CSS de la bonne façon. Se concentrer sur des problèmes comme les exemples que j'ai montré ci-dessus et de corriger ces failles.

Pouvez-vous m'indiquer à des ressources ou à ajouter de la commune de suggestions et astuces utilisés par les développeurs pour obtenir ce droit.

Answer 1

Découvrez Concevoir avec les normes Web par Jeffrey Zeldman.

Answer 2

Voici quelques règles à suivre:

• Les Tables sont bonnes pour des données tabulaires. Si les données que vous avez présenté appartient à une table, ne pas sortir de votre chemin en essayant de faire une grille à la sortie de l' <div>s. Ne fait pas de sens.
• Aussi loin que la mise en page est concerné, utilisez <div> tags, rester à l'écart de tables. Apprendre à connaître le flotteur de la propriété du bien. Avec CSS3, il va y avoir de nouvelles, d'améliorer les normes de l' affichage de la propriété. Les apprendre.
• display: none supprime complètement l'élément à partir de la fenêtre d'affichage. À l'inverse, visibility: hidden conserve les espaces que l'élément aurait pris place. Dans les deux cas, l'élément reste dans les dom.
• Règle générale, les classes et les Id. Les éléments de la Page et les Id doivent avoir un one-to-one relation par page. Par exemple, #Colonne1, #Colonne2, #Pied de page, en-Tête#. Les éléments de la Page et de classes, d'autre part, devraient être plusieurs-à-une relation, comme: .conteneur ou .navLink. L'utilisation de classes lorsque vous savez que vous allez être en utilisant un élément tout à fait un peu.
• Penser en termes d'efficience. Le moins des règles de style que vous avez, le plus rapidement le chargement de la page et le plus facile, le style va être pour déboguer.

J'ai environ un million d'autres choses à dire, mais qui devrait vous obtenir a commencé.

Answer 3

Pour la mise en-driven CSS, assurez-vous de vérifier Tout ce que Vous Savez à Propos de CSS Est Mal. C'est un peu en pointe, depuis IE 7 ne prend pas en charge display: table (pitié, je sais), mais il couvre disposition traditionnelle des techniques CSS comme le flottement et positionnement absolu, et fournit une bonne transition entre la table de base de mises en page en CSS ceux. Je le recommande fortement.

Je ne sais pas si vous êtes la construction de toute la dynamique de la langue ou si vous êtes juste de codage HTML brut, mais vous devriez aussi regarder à l'aide de SASS dans vos projets, car je pense que cela aide à vous forcer à payer plus d'attention à l'héritage. Sinon, en examinant plus "rudimentaire" tutoriels (comme CSS pour les Nuls) pourrait en fait être utiles, car ils passent plus de beaucoup de CSS, les principes fondamentaux en détail.

Enfin, CSS fonctionne mieux lorsque vous avez sémantiquement correct (x)html sous le capot. À mon avis, il est plus facile de voir et d'apprendre les "bonnes" CSS lorsque vous avez beaucoup de, sémantiquement correct html dessous. Voici un bon aperçu de quand utiliser quoi les balises. En général, je trouve qu'il est préférable d'écrire le contenu de mon avec pas en ce qui concerne ce que-si-jamais à quoi il ressemblera plus tard, puis utiliser des CSS plus tard pour le rendre magnifique.

Comme toujours, vous pouvez ramasser beaucoup de chouettes trucs et astuces à CSS Tricks, qui m'ont toujours aidé en savoir plus sur l'utilisation correcte de la langue (comme quand je l'ai appris au sujet de l' overflow: auto le contenu des éléments flottants! Le génie!).

Espérons que ça aide!

Answer 4

1. Visite de CSS Zen Garden pour voir ce que vous pouvez le faire uniquement avec du CSS.

2. Visite W3 écoles et suivre le tutoriel. Il peut sembler simple pour vous, mais vous apprendrez les trucs de base.

3. Visite de certains sites, comme Une liste à Part à voir comment faire les choses et apprendre des trucs.

4. Voir si un framework CSS adapté à vos besoins (comme le 960 de la Grille).

Answer 5

Je suppose que vous avez installé Firebug ?

En outre, http://www.doctype.com pourrait obtenir des résultats plus pertinents.