CSS - classes communes

Question

Dans mon application Web, j'utilise plusieurs classes CSS pour écrire moins de code. Je les utilise assez souvent dans le balisage pour ajouter une ou deux propriétés dans certains cas.

Ceux-ci sont les suivantes

.clear { float: none; clear: both; } 
.fl_l{ float: left; } 
.fl_r{ float: right; } 
.ta_l{ text-align: left; } 
.ta_r{ text-align: right; } 
.no_td:hover { text-decoration: none; } 

Quelles classes similaires utilisez-vous? Avez-vous déjà vu cette technique dans d'autres projets?

Answer 1

ouais, si vous n'utilisez des classes communes comme vous le faites alors vos fichiers CSS obtenez très grandes et toutes les classes devient extrêmement spécifique

quelques autres classes communes ...

.split { float: left; width: 50%; } 
.center { text-align: center: margin: auto; display: block; } 
.bold { font-weight: bold; } 
.top { vertical-align: top; } 
.bottom { vertical-align: bottom; } 

Answer 2

Restauration l'écoulement après un élément flottant:

.clearfix:after 
{ 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    line-height:0; 
    visibility:hidden; 
} 

Answer 3

Chacun a ses propres préférences et cela dépend aussi de la nature de votre demande. Cela dit, j'ai personnellement tendance à réutiliser un fichier base.css que je transfère de l'application à l'application en tant que composant de type starter. En son sein, j'implémente également les instructions de réinitialisation css d'Eric Meyers qui facilitent grandement le développement sur les navigateurs.

Si vous êtes vraiment intéressé à savoir comment les cadres css professionnels sont formés alors qu'il ya probablement une valeur de votre temps de télécharger et consulter les documents suivants:

960 grid css framework

Blueprint css framework

Answer 4

J'aime rester loin de ce que vous décrivez comme des noms de classe communs, en gardant autant d'informations liées au style que possible à partir du HTML. Comme mentionné par le chasseur, cela signifie que les listes de sélection peuvent parfois être longues, mais je ne trouve pas cela un problème. Si je devais utiliser un nom de classe commun pour effacer les flottants (le seul exemple donné étant donné que je le devrais habituellement), j'utiliserais plus souvent que quelque chose comme .group - le groupe de mots a au moins quelques petite quantité de sémantique attachée à lui (un groupe de choses qui probablement appartiennent ensemble). Cela a été suggéré par Dan Cederholm.

Il y a parfois d'autres considérations qui peuvent signifier qu'il est acceptable ou non d'utiliser des noms de classe comme celui-ci. Par exemple, si votre mise en page change en fonction de la taille du viewport via des requêtes média, vous ne voudrez peut-être pas que votre nom soit toujours le même, ce qui signifie que le nom de classe perd son utilité car vous devez être spécifique à vos sélecteurs. Un autre exemple serait si le HTML est géré par un client non-techie qui ne peut pas garder vos classes intactes.

Answer 5

Désolé de poster une réponse à une question aussi ancienne, mais je pense que c'est une mauvaise idée. Peut-être que pour un ensemble précis de problèmes, cela correspond à la facture. Ma pensée est que CSS est où l'information de style devrait être. En faisant ce que vous suggérez, vous n'utilisez essentiellement que l'attribut style en html et donc mélangez le contenu avec les informations de style. C'est une mauvaise idée car si un jour vous décidez de changer complètement le style, vous devrez entrer et mettre à jour le HTML en supprimant la plupart des classes.

Par exemple, si vous avez HTML comme ceci (disons pour un résumé qui est utilisé plusieurs fois dans la page):

<p class="abstract ta_l mb10"> 
    Lorem ipsum dolor set. 
</p> 

Et un jour vous décidez de changer la façon dont abstraite semble: par exemple, vous ne voulez plus que ce soit "text-aligned: left" plus et pas de marge en bas (c'est probablement ce que mb10 serait ... j'ai déjà vu ça être utilisé), vous devriez entrer et changer le HTML .

Maintenant multipliez cela par 10 éléments que vous devez changer. Et si c'était 50? Et si vous faisiez une refonte complète? frémir. CSS fournit un moyen de sélectionner plusieurs éléments avec une requête simple et leur donne un style approprié qui est facilement modifié à partir d'un emplacement centralisé. En utilisant ces classes "helper", vous faites de la maintenance de ce projet un cauchemar pour le développeur suivant.

Au lieu de cela, si vous avez HTML comme ceci:

<p class="abstract"> 
    You should sign in or something! 
</p> 

et CSS comme ceci:

.abstract { 
    margin-bottom: 10px; 
    text-align: left; 
} 

vous pouvez simplement changer qu'une règle à ceci:

.abstract { 
    text-align: right; 
    margin-bottom: 0; 
} 

et être fait w/it! Pour les 50 éléments!

juste mes 2 cents - de quelqu'un qui vient d'être brûlé par cela.