web-dev-qa-db-fra.com

Styles en ligne vs classes

Dans ma tête, j'ai toujours su utiliser des classes sur des styles en ligne pour tout projet. Mais existe-t-il des articles/publications/blogs définissant les avantages/inconvénients de chacun? Je suis dans un débat à ce sujet et je n'arrive pas à trouver le blog que j'ai lu il y a longtemps à ce sujet.

csscss3inline-styles
31
Corey Hart

Il y a une raison simple. Le but de CSS est de séparer le contenu (HTML) de la présentation (CSS). Tout est une question d'accessibilité et de réutilisation du code . 

25
gblazex

Tout d'abord:

  • Si le code HTML est créé ou généré indépendamment de la conception globale du site (code de modèle partagé, par exemple), ajoutez des classes et des ID portant un nom raisonnable, liés exclusivement à une ou plusieurs feuilles de style externes. Utilisez suffisamment d'éléments pour permettre une manipulation CSS arbitraire. Par exemple, voir CSS Zen Garden . Ceci s'applique à TOUS les CMS, programmes, scripts et autres contenus de site générés dynamiquement. La sortie HTML ne doit contenir absolument aucun style ni aucune mise en page. Aucune exception.

En supposant que vous traitiez avec du contenu statique, alors:

  • Si vous pouvez réutiliser le style, faites-en une classe et créez un lien vers une feuille de style.

  • S'il n'y a aucun moyen de réutiliser le style (c'est un élément unique qui n'a pas de sens ailleurs), utilisez un bloc <style> qui fait référence à #id de l'élément.

  • Si l'attribut CSS n'a de sens que dans le contexte du code HTML environnant (par exemple, quelques utilisations de clear:), j'insère le style dans l'élément.

Beaucoup de gens appellent cela une hérésie, comme beaucoup dénoncent toute utilisation de goto dans les langages de programmation modernes. 

Cependant, plutôt que de souscrire à un dogme stylistique, j’estime que vous devriez choisir la méthode en fonction de votre situation qui réduit le plus votre charge de travail globale. Les feuilles de style ajoutent un niveau d'indirection facilitant les modifications au niveau du site et contribuant à la cohérence. Mais si vous avez plusieurs douzaines de classes sur chaque page qui ne sont utilisées qu’à un seul endroit, vous augmentez votre charge de travail au lieu de la diminuer.

En d'autres termes, ne faites pas quelque chose de stupide et de déroutant simplement parce que les gens vous disent que c'est la bonne façon de le faire}.

31
tylerl

Si le choix était là, ma première préférence sera les classes/autres sélecteurs. Cependant, il existe des situations où les styles en ligne sont la seule solution. Dans d'autres situations, une classe CSS à elle seule nécessite trop de travail et d'autres types de sélecteurs CSS ont plus de sens.

Supposons que vous deviez zébrer une liste ou une table donnée. Au lieu d'appliquer une classe particulière à chaque élément ou ligne alternatif, vous pouvez simplement utiliser des sélecteurs pour effectuer le travail. Cela gardera le code simple, mais n'utilisera pas de classes CSS. Pour illustrer les trois manières :

Utiliser seulement la classe

.alternate {
    background-color: #CCC;
}

<ul>
    <li>first</li>
    <li class="alternate">second</li>
    <li>third</li>
    <li class="alternate">fourth</li>
</ul>

Utilisation de sélecteurs de classe et de structure

.striped :nth-child(2n) {
    background-color: #CCC;
}

<ul class="striped">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

Utiliser des styles en ligne

<ul>
    <li>first</li>
    <li style="background-color: #CCC">second</li>
    <li>third</li>
    <li style="background-color: #CCC">fourth</li>
</ul>

La deuxième façon me semble la plus portable et la plus encapsulée. Pour ajouter ou supprimer des bandes d'un élément de conteneur donné, ajoutez ou supprimez simplement la classe striped.

Cependant, il existe des cas où les styles en ligne ont non seulement un sens, mais sont la seule voie à suivre. Lorsque l'ensemble des valeurs possibles est énorme, il sera stupide d'essayer de faire des classes à l'avance pour chaque état possible. Par exemple, une interface utilisateur qui permet à l'utilisateur de placer dynamiquement certains éléments n'importe où sur l'écran en les faisant glisser. L'élément devra être positionné absolument ou relativement avec des coordonnées réelles telles que:

<div style="position: absolute; top: 20px; left: 49px;">..</div>

Certes, nous pourrions utiliser des classes pour chaque position possible de la division, mais ce n'est pas recommandé. Et on peut facilement voir pourquoi:

.pos_20_49 {
    top: 20px;
    left: 49px;
}
.pos_20_50 {
    top: 20px;
    left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px

<div class="pos_20_49">..</div>
7
Anurag

Utiliser le bon sens.

Tout le monde sait que la présentation et le contenu doivent, dans un monde idéal, être séparés. Tout le monde sait aussi que cela ne fonctionne pas très bien la plupart du temps. Nous savons tous que vous êtes censé utiliser des divs plutôt que des tableaux pour la mise en page, mais nous savons également que, même dans les cas où vous n'avez pas le contrôle total sur le contenu, il ne fonctionne tout simplement pas correctement.

Le téléchargement d'une feuille de style de 500k pour le style d'un élément, car vous avez pris tous les styles possibles et que vous l'avez collé dans une feuille de style va tuer votre page. Le téléchargement de 500 feuilles de style plus petites pour le style de votre page, car vous en avez besoin, va également tuer votre page.

La réutilisation est un concept génial, mais la réalité est qu’elle n’est utile que dans certains contextes. Cela s'applique également à peu près partout où le concept existe. Si votre projet fait ce que vous voulez, dans tous les navigateurs raisonnables, de manière efficace et fiable, alors vous êtes prêt, il n’est pas beaucoup plus difficile de refactoriser les fichiers CSS que le code.

4
Chris

Je ne vois aucun avantage pour les styles inline.

CSS est tout au sujet de amélioration progressive , et ne pas se répéter (DRY) .

Avec les feuilles de style, modifier l'apparence devient aussi simple que de modifier une ligne du code HTML. Faire une erreur ou le client n'aime pas le changement? revenir à l'ancienne feuille de style.

Autres avantages:

  1. Votre site peut s’adapter automatiquement à différents supports, tels que l’impression ou les appareils portables.

  2. Les correctifs CSS inclus sous condition, pour ce gawd-awful browser-that-must-be-not-be-name [], deviennent un jeu d'enfant.

  3. Vos utilisateurs peuvent facilement personnaliser le site avec des plugins comme Stylish.

  4. Vous pouvez plus facilement réutiliser ou partager du code d'un site à l'autre.

3
Brock Adams

Je ne peux penser qu'à deux situations où les styles en ligne sont appropriés et/ou raisonnables. 

  1. Si les styles en ligne sont appliqués par programme. Par exemple, afficher et masquer des éléments avec JavaScript ou appliquer des styles spécifiques au contenu lors du rendu d'une page (voir n ° 2).

  2. Si les styles en ligne complètent la définition de classe d'un seul élément dans les cas où les identifiants ne sont ni appropriés ni raisonnables. Par exemple, définissez le background-image d'un élément pour une seule image dans une galerie:

HTML 

<div id="gallery">
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
</div>

CSS

#gallery .image {
    background: none center center;
}
2
Justin Johnson

Pour que ce fil de discussion soit complet, il convient de mentionner que les styles en ligne sont le seul moyen de naviguer dans GMail lorsque vous créez des courriers HTML + CSS.

Pour des informations détaillées, voir: http://www.email-standards.org/clients/gmail/

2
jakub.g

En supposant que vous utilisiez des feuilles de style externes, la mise en cache constitue un avantage supplémentaire par rapport à celles mentionnées précédemment. Le navigateur télécharge et met en cache votre feuille de style une fois, puis utilise la copie locale chaque fois qu'elle est référencée. Cela permet à votre balisage d'être plus compact. Moins de marge à transférer et à analyser signifie une sensation plus réactive et une meilleure expérience pour vos utilisateurs.

1
Jesse Squire

Les styles en ligne sont définitivement la voie à suivre. Il suffit de regarder http://www.csszengarden.com/ - cela n'aurait jamais été possible avec classes et feuilles de style externes... 

ou attendre...

1
Xeoncross

Les classes sont les styles réutilisables pouvant être ajoutés aux éléments HTML. par exemple-

<style> 
   .blue-text{color:Blue;}
</style>

vous pouvez utiliser et réutiliser cette classe de texte bleu pour n’importe quel élément HTML Notez que dans votre élément de style CSS, les classes doivent commencer par un point. Dans les déclarations de classe de vos éléments HTML, les classes ne doivent pas commencer par un point. tandis que le style en ligne sont comme par exemple

<p style="color:Blue;">---</p>

La différence entre les deux est donc que vous pouvez réutiliser des classes alors que vous ne pouvez pas réutiliser des styles en ligne.

0
lastnamearya

Avec l'ajout de propriétés personnalisées à CSS, il existe maintenant un autre cas d'utilisation. Vous pouvez utiliser un style en ligne pour définir des propriétés personnalisées. 

Par exemple ci-dessous, j'utilise une grille CSS pour aligner des listes HTML et des blocs Div et je souhaite une flexibilité dans le code HTML (à l'instar de BootStrap ou de tout autre framework) car ce code HTML est généré dynamiquement par l'application.

CSS:

:root{
--grid-col : 12;
--grid-col-gap:1em; 
--grid-row-gap:1em;
--grid-col-span:1;
--grid-row-span:1;
--grid-cell-bg:lightgray;
}

.grid{
    display: grid;
    grid-template-columns: repeat(var(--grid-col), 1fr);
    column-gap: var(--grid-col-gap);
    row-gap: var(--grid-row-gap);
}

.grid-item{
    grid-column-end: span var(--grid-col-span);
    grid-row-end: span var(--grid-row-span);
    background: var(--grid-cell-bg);
}

HTML:

    <ul class="grid" style="--grid-col:4">
        <li class="grid-item">Item 1</li>
        <li class="grid-item">Item 2</li>
        <li class="grid-item">Item 3</li>
        <li class="grid-item">Item 4</li>
        <li class="grid-item">Item 5</li>
        <li class="grid-item">Item 6</li>
        <li class="grid-item">Item 7</li>
        <li class="grid-item">Item 8</li>
    </ul>

Dans le code HTML ci-dessus pour modifier les quatre colonnes en 3, je modifie la propriété personnalisée à l'aide de l'attribut style:

    <ul class="grid" style="--grid-col:3">
        <li class="grid-item">Item 1</li>
        <li class="grid-item">Item 2</li>
        <li class="grid-item">Item 3</li>
        <li class="grid-item">Item 4</li>
        <li class="grid-item">Item 5</li>
        <li class="grid-item">Item 6</li>
        <li class="grid-item">Item 7</li>
        <li class="grid-item">Item 8</li>
    </ul>

Vous pouvez consulter l'exemple en direct étendu sur https://codepen.io/anon/pen/KJWoqw

0
Praveen Rai