CSS - allgemeine Klassen

Question

In meiner Webanwendung verwende ich mehrere CSS-Klassen, um weniger Code zu schreiben. Ich benutze sie oft im Markup, um in einigen Fällen einzelne Eigenschaften hinzuzufügen.

verwenden Sie diese sind die folgenden

.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; } 

Welche ähnliche Klassen? Hast du diese Technik schon mal in anderen Projekten gesehen?

Answer 1

ja, wenn Sie nicht gemeinsame Klassen verwenden Sie, wie Sie Ihre CSS-Dateien sehr groß Sie dann erhalten und jede Klasse wird extrem spezifischen

einige andere allgemeine Klassen ...

.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

wiederherstellen der Fluss nach einem schwebenden Element:

Answer 3

Jeder hat seine eigenen Präferenzen und es hängt auch von der Art Ihrer Anwendung ab. Das heißt, ich persönlich tendiere dazu, eine base.css wiederzuverwenden, die ich von der Anwendung zur Anwendung als Starter-Stil-Komponente portiere. Darin implementiere ich auch Eric Meyers CSS-Reset-Anweisungen, die die Entwicklung über Browser viel einfacher machen.

Wenn Sie wirklich daran interessiert sind, herauszufinden, wie professionelle CSS-Frameworks entstehen dann ist es wahrscheinlich lohnt sich, das Herunterladen und die Überprüfung der folgende:

960 grid css framework

Blueprint css framework

Answer 4

Ich mag fern bleiben was du als allgemeine Klassennamen beschreibst, indem du so viele stilbezogene Informationen wie möglich vom HTML fernhältst. Wie von Jäger erwähnt, bedeutet dies, dass Selektorlisten manchmal lang werden können, aber ich finde es kein Problem.

Wenn ich einen gemeinsamen Klassennamen zum Löschen von Gleitkommazahlen verwenden würde (das einzige der Beispiele, die ich normalerweise verwenden könnte), würde ich häufig etwas wie .group verwenden - die Wortgruppe hat zumindest einige eine kleine Menge an Semantik, die an sie gebunden ist (eine Gruppe von Dingen, die wahrscheinlich zusammengehören). Dies wurde von Dan Cederholm vorgeschlagen.

Es gibt manchmal andere Überlegungen, die bedeuten, dass es okay oder nicht okay ist, Klassennamen wie diesen zu verwenden. Wenn sich beispielsweise Ihr Layout abhängig von der Größe des Darstellungsbereichs über Medienabfragen ändert, möchten Sie möglicherweise nicht, dass ein Stil immer gleich formatiert wird, was bedeutet, dass der Klassenname seine Nützlichkeit verliert, da Sie ohnehin mit Ihren Selektoren spezifisch sein müssen. Ein anderes Beispiel wäre, wenn der HTML-Inhalt von einem Nicht-Techie-Client verwaltet wird, der Ihre Klassen möglicherweise nicht intakt hält.

Answer 5

Es tut mir leid, eine Antwort auf solch eine alte Frage zu posten, aber ich denke, das ist eine schlechte Idee. Vielleicht für eine bestimmte Reihe von Problemen, es passt die Rechnung. Ich denke, dass CSS die Stilinformationen sein sollte. Indem Sie das tun, was Sie vorschlagen, verwenden Sie im Wesentlichen nur das Stilattribut in HTML und mischen daher Inhalte mit Stilinformationen. Dies ist eine schlechte Idee, denn wenn Sie eines Tages entscheiden, den Stil vollständig zu ändern, müssen Sie den HTML-Code aktualisieren, indem Sie die meisten Klassen entfernen.

Zum Beispiel, wenn Sie HTML wie folgt aus (für ein abstraktes sagen, dass viele Male innerhalb der Seite verwendet wird):

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

Und eines Tages werden Sie entscheiden, zu ändern, wie das abstrakte aussieht: zum Beispiel, du willst nicht, dass es "text-aligned: left" mehr und kein margin bottom ist (das ist vermutlich das was mb10 wäre ... ich habe gesehen, dass das schon mal benutzt wurde), du müsstest hineingehen und den HTML ändern .

Jetzt multiplizieren Sie dies mit 10 Elementen, die Sie ändern müssen. Was wenn es 50 war? Was wäre, wenn Sie ein komplettes Redesign durchführen würden? Schauer.

CSS bietet eine Möglichkeit, mehrere Elemente mit einer einfachen Abfrage auszuwählen und ihnen einen geeigneten Stil zu geben, der leicht von einem zentralen Ort aus geändert werden kann. Durch die Verwendung dieser "Helfer" -Klassen machen Sie die Wartung dieses Projekts zu einem Albtraum für den nächsten Entwickler.

Stattdessen, wenn Sie HTML wie folgt aus:

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

und CSS wie folgt aus:

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

Sie könnten nur ändern, dass eine Regel dazu:

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

und fertig sein! Für alle 50 Elemente!

nur meine 2 Cent - von jemandem, der gerade dadurch verbrannt wurde.