J'ai un grand site qui fonctionne en ASP.NET MVC avec le moteur de vue Razor.
J'ai une feuille de style de base qui contient tous les styles génériques pour l'ensemble du site. Cependant, il m'arrive d'avoir des styles spécifiques à une page qui, dans la feuille de style de base, contiennent les styles génériques pour l'ensemble du site. <head> de la page - il s'agit généralement d'une ou deux lignes.
Je n'aime pas particulièrement mettre le CSS dans <head> comme il ne s'agit pas strictement de séparation des préoccupations, mais pour une ou deux lignes, qui sont vraiment spécifiques à cette page, je préfère ne pas avoir à joindre un autre fichier et ajouter à la bande passante.
J'ai cependant un cas où j'aimerais placer une requête média spécifique à une page dans le champ <head> mais comme une requête média utilise le symbole @ et les parenthèses {}, elle entre en conflit avec la syntaxe du rasoir :
@section cphPageHead{
<style>
/* PAGE SPECIFIC CSS */
...
@media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
{
... }
}
</style>
} Y a-t-il un moyen de contourner ce problème ?
3 votes
Je le pense toujours,
css stylesdevrait se trouver dans le fichier CSS, surtout pour un "grand site". Le css linéaire sur la page n'est pas la meilleure pratique. PS : Mon opinion1 votes
Je suis d'accord avec @AlexC, mais pour ceux qui sont curieux de connaître un cas d'utilisation valide, les CSS critiques se chargent plus rapidement en ligne qu'en externe. C'est une astuce plutôt pratique pour les sites qui dépendent d'une première peinture significative super rapide.
8 votes
Un autre cas d'utilisation est le rendu des e-mails
0 votes
Pour les personnes qui utilisent un outil d'analyse de code comme sonar, le double @ peut être marqué comme un bogue majeur par l'outil. Si vous avez la possibilité de changer ou de désactiver la règle, c'est ok, sinon vous devez trouver un autre moyen d'échapper à @.
0 votes
Lorsque vous utilisez @media avec la grille, il se peut que vous vouliez que la feuille de style soit dans la page, car chaque mise en page peut être différente, vous voulez juste contrôler CETTE page spécifique et emballer le css dans un fichier est de l'ingénierie excessive et n'a pas de sens. Dans ce cas, gardez le code qui va ensemble près l'un de l'autre. Ainsi, dans tous les cas où les css sont ABSOLUMENT destinés à une seule page, il est préférable de les placer dans cette page. Sinon, il faut TOUJOURS le faire dans un fichier css séparé.