Est-il considéré comme une mauvaise pratique d'écrire le style d'un élément directement en PHP ?

Question

Je sais qu'il est généralement considéré comme une mauvaise pratique de mélanger CSS et HTML et que les sélecteurs CSS (ids, classes, etc.) doivent généralement être utilisés pour styliser les éléments dans des feuilles de style externes. Mais cela peut être assez gênant lorsqu'on écrit une page dynamique en PHP. Il est beaucoup plus facile d'afficher le style de l'élément directement en PHP en écrivant dans l'attribut style de l'élément. Cela serait-il considéré comme une mauvaise pratique, même si l'utilisation de classes rendrait la gestion encore plus difficile du côté du développeur ?

Par exemple, le style de couleur d'un élément est stocké dans une base de données et cet élément a une couleur différente en fonction des paramètres fournis dans la page PHP dynamique. Dans ce scénario, je pourrais écrire dans la feuille de style css avec php une classe avec la variable de couleur que j'obtiens de la base de données

echo '.custom-color {';
echo   'color: ' . $colorFromDatabase . ';';
echo '}';

et ensuite ajouter la classe à l'élément :

<div class="custom-color"></div>

ou je pourrais simplement faire écho du style directement à l'élément.

echo '<div style="color:' . $colorFromDatabase . ';" >';

Quelle est la meilleure façon de procéder ?

Answer 1

Écrire le style en ligne est généralement considéré comme mauvais, que ce soit avec PHP ou à la main. C'est plus simple mais plus difficile à maintenir et vous n'avez pas la possibilité de mettre en cache votre contenu CSS. Si vous souhaitez que le CSS soit plus dynamique, vous pouvez expérimenter avec les méthodes suivantes http://sass-lang.com/

Notez que custom-color n'est pas un très bon nom de classe, il devrait être quelque chose comme main-header , blog-post , last-modified puisqu'ils vous renseignent sur le contenu et non sur son style.

SASS vous permet de définir une variable pour une couleur et de la réutiliser dans vos fichiers CSS. Il vous suffit ensuite de changer le nom des variables et de régénérer vos fichiers CSS.

L'avantage de ce que vous faites est que vous n'avez pas besoin d'apprendre de nouvelles choses. PHP s'en chargera. Vous devez écrire quelque chose dans votre build si vous voulez utiliser SASS avec du contenu provenant d'une base de données et trouver un schéma pour le CSS à utiliser.

Notez qu'il existe quelques cas où il serait judicieux d'écrire l'attribut directement, mais il est difficile d'expliquer quand exactement. C'est généralement lorsqu'il ne sera utilisé qu'une seule fois.

Exemple tiré de leur page

// Variable Definitions

$page-width:    800px;
$sidebar-width: 200px;
$primary-color: #eeeeee;

// Global Attributes

body {
  font: {
    family: sans-serif;
    size: 30em;
    weight: bold;
  }
}

// Scoped Styles

#contents {
  width: $page-width;
  #sidebar {
    float: right;
    width: $sidebar-width;
  }
  #main {
    width: $page-width - $sidebar-width;
    background: $primary-color;
    h2 { color: blue; }
  }
}

#footer {
  height: 200px;
}

Answer 2

Pourquoi pas les deux ? Séparer le CSS du HTML et du PHP dans votre fichier CSS ?

Vous pouvez également consulter le site CSS-preprocessors. MOINS est le plus courant, mais il existe aussi SASS, Stylus et d'autres encore.

Answer 3

Pour une utilisation sémantique optimale, j'utiliserais ceci :

div.colored {
    color: attr(data-color)
}

Ensuite, utilisez PHP comme :

<div class="colored" data-color="<?= $color ?>"></div>

Et vous pouvez toujours étayer cela avec un simple Javascript.