Est-ce que je souffre de "divitis"? (CSS especialist nécessaire)

Question

J'ai lu beaucoup d'articles qui condamne l'usage excessif de divs. J'ai le sentiment que je pourrais le faire dans la marque suivante:

HTML:

<div id="header">
    <div class="container">
        <div id="banner">
            <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
            <ul id="lang">
                <li><a href="index.php">English</a></li>
                <li><a href="es/index.php">Español</a></li>
                <li><a href="tw/index.php">中文(繁體)</a></li>
                <li><a href="cn/index.php">中文(简体)</a></li>
            </ul>
        </div>
        <div id="intro">
            <div id="tagline">
                <h2>Nulla vitae tortor mauris</h2>
                <p>Pellentesque faucibus est eu tellus varius in susc...</p>
            </div>
            <div id="about">
                <h2>right</h2>
                <p>Pellentesque faucibus est eu tellus varius in susc...</p>
            </div>
        </div><!-- #intro -->
    </div><!-- .container -->
</div><!-- #header -->

CSS:

.container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}

/* header */
#header {
    background: #EEE;
}
#header h1 {
    float: left;
}
#header h2, #header a, #header p {
    color: #999;
}
#header h1 a {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    float: left;
    height: 30px;
    text-indent: -9999px;
    width: 500px;
}
#banner {
    border-bottom: 1px solid #DDD;
    padding: 0 0 15px 0;
    margin: 30px 0 30px 0;
    overflow: hidden;
    width: 960px;
}
#lang {
    float: right;
    padding: 9px 0 0 0;
}
#lang li {
    float: left;
    margin: 0 0 0 20px;
}
#lang li a {
    font-size: 10px;
}

/* intro */
#intro {
    overflow: hidden;
    padding: 0 0 30px 0;
}
#tagline {
    float: left;
    margin: 0 40px 0 0;
    width: 540px; /* 560 */
}
#tagline h2 {
    font-size: 24px;
}
#about {
    float: right;
    width: 380px;
}

Explication de l'utilisation de ces divs:

en-tête: Définit la couleur d'arrière-plan qui s'étend jusqu'à la fin de la fenêtre (en dehors de l' div .container).

conteneur: centre le contenu (mais pas l'arrière-plan).

bannière: pour définir l'arrière-plan ou la couleur de la bordure autour de ul#lang et h1.

intro: même que ci-dessus mais pour l' #tagline et #about (sinon, je dois définir dire de remplissage ou de marge pour le slogan et le sujet individuel).

Suis-je trop de divs?

Cela peut-il être simplifié?

Answer 1

Ça a l'air parfait. Cela devrait être pris comme exemple!

Un symptôme de "divitis" est lorsque vous voyez une liste de <div>'s au lieu d’utiliser un <ul> .

Answer 2

Pour la plupart de vos balisage est très bien. Chaque site présente légèrement différents problèmes. Je dirais que votre code pourrait être améliorée en supprimant #intro et que l'application de la CSS pour les deux colonnes.

Selon le reste de votre page, vous pourriez être en mesure de le faire sans l' #header div.

En outre, vous pouvez définir le style html ET body si nécessaire pour aider avec des arrière-plans multiples ou des conteneurs. Juste rappelez-vous que body commence à agir comme un div (ne pas étendre vers le bas du navigateur) dès que vous commencez à appliquer des styles à des html.

À l'aide de divs ou le HTML 5 éléments de bloc, est tout au sujet de faire sens sémantique d'abord, et qui donne à un endroit pour accrocher votre CSS seconde.

Depuis chacun de vos div éléments sert un but précis où ils fournissent une sémantique groupement d'éléments qui vont ensemble, je dirais que votre code est tout simplement parfait.

Pour le record, c'est divitis:

<div class='image'>
  <div class='shadow'>
    <div class='bottom-shadow'>
       <img src="..." alt="" />
    </div>
  </div>
  <div class="clear"></div>
</div>

Answer 3

Vous utilisez <ul> s pour la navigation et <h1><h2> pour les titres - cela me suffit. Je ne pouvais pas penser à un élément plus approprié pour aucun des div s que vous utilisez. Passerait mon contrôle de qualité sans plus tarder.

Answer 4

Vous utilisez <p> , <h*> lorsque vous en avez besoin, c'est donc correct.

Ce qui est mauvais, c'est d'utiliser div au lieu d'un élément approprié. Il n'y a pas une telle chose ici.

Answer 5

Tout le monde peut avoir une opinion différente sur ce sujet, mais voici mon avis:

Vous êtes pas plus à l'aide d' <div>.

Si vous ont été à l'aide de <div> lorsque vous devez utiliser <h2>, <p>,, etc, alors vous serait certainement de faire le mal. En d'autres termes, si vous êtes à la flexion <div> pour s'adapter à tous vos fins, vous avez un problème.

Malheureusement, lors de la CSS a commencé à devenir populaire, il y avait beaucoup d'articles rédigés pour la promotion de cette pratique avec des titres/des thèmes à la suite d'une "Utilisation <div> au lieu de <tagX>!" patron de.