web-dev-qa-db-fra.com

Est-il nécessaire de préfixer chaque classe css dans un framework de thème?

Je travaille sur un cadre de thème, tout préfixe inclut les classes CSS, donc 'contenu-principal' est 'cadre-principal-contenu', 'en-tête' est 'cadre-en-tête', etc.

Récemment, j’ai jeté un coup d’œil au fameux framework Genesis, et je ne vois aucun préfixe pour les classes css, le balisage HTML qui a l’air propre, ainsi que le code CSS.

Il ne fait aucun doute que nous devrions tout préfixer dans PHP code, mais est-il nécessaire pour les classes CSS d'un thème ou d'un framework de thème?

theme-developmentcss
1
Edward

Les préfixes sont utilisés pour éviter les conflits. Si votre framework est utilisé pour créer un thème, il y a de fortes chances qu'il n'y ait pas de second framework de thème utilisé en même temps. Donc, il n'y a pas de conflit, et donc pas besoin d'un préfixe.

Les exceptions sont les classes CSS générées par le noyau WordPress, par exemple dans le formulaire de commentaire. Si vous utilisez les mêmes noms de classe dans un but totalement différent, vous avez besoin d'un préfixe ou de meilleurs noms de classe pour votre cas d'utilisation.

3
fuxia

NON!!! Ne préfixez pas tout, ce sera dingue pour qui que ce soit. Ce que vous devez faire est d’ajouter un body_class à l’espace de nommage du thème spécial CSS. .

Si j’écrivais un thème aujourd’hui, je ferais quelque chose dans mon fichier function.php:

add_filter( 'body_class', function( $classes ){
   $classes[] = 'my-bad-ass-theme';
   return $classes;
 });

Puis, tout ce dont j'ai besoin est accessible, tout en étant facile à lire et spécifique. Par exemple, j'aime bien que les en-têtes soient des polices différentes du reste du site, je mettrais ceci dans le fichier CSS:

.my-bad-ass-theme{
  font-family: Verdana;
}
.my-bad-ass-theme h1,
.my-bad-ass-theme h2,
.my-bad-ass-theme h3,
.my-bad-ass-theme h4,
.my-bad-ass-theme h5,
.my-bad-ass-theme h6 {
  font-family: Lucida-Grande;
}

Je peux toujours avoir un style agréable avec ma police d'origine, mais pour des paragraphes tels que:

p {
 color: #333;
}

Cela laisse les paragraphes ouverts pour être stylés par plugins ou thèmes enfants, sans se gêner.

Ne vous laissez pas emporter par la namespace, mais examinez également les préprocesseurs CSS tels que SAAS et LESS (je suggère SASS ), afin de tirer parti de emboîtement et autres fonctions.

2
Nathan Powell