Ich habe allgemeine CSS-Klassen für gemeinsame Rand- und Padding-Klassen in meiner CSS deklariert, damit ich sie verwenden kann, ohne andere CSS-Deklarationen zu spezifisch zu machen.
Zum Beispiel:
%Vor%Bitte führen Sie ... Vielen Dank im Voraus:)
Margin ist anders als Padding. Rand ist der Raum außerhalb der Box, Polsterung ist der Raum in der Box. Sowohl Rand als auch Padding sind Cross-Browser-kompatibel. Ihre Deklarationen sind korrekt, obwohl es nicht empfohlen wird, Klassen für Ränder oder Abstände zu erstellen. Ein guter Zweck ist es, eine Klasse für abgerundete Ecken oder Schatten zu erstellen, in der Sie schnell runde Ecken anwenden können, indem Sie die Klasse der runden Ecken angeben.
Dies ist eine schlechte Übung, da Klassen semantisch sein sollten - das heißt, sie sollten die Art von Dingen beschreiben, die Sie gestalten. Zum Beispiel "blog-header", "primary-this", "secondary-that" usw.
In der Praxis ist der Nachteil der Verwendung von Klassen, wie Sie beschreiben, dass wenn Sie Ihr visuelles Design ändern und Sie unterschiedlich große Ränder oder Abstände benötigen, müssen Sie auch die Klassennamen ändern - was sowohl Änderungen an den CSS und HTML. Oder wenn Sie nur das CSS ändern, dann beschreiben die Klassennamen nicht mehr, wofür sie sind. Dieser Ansatz ist nicht viel besser als die Verwendung von Inline-Stilen.
Margins und Padding sind verschiedene Dinge und verhalten sich unterschiedlich. Unter bestimmten Umständen können die Ränder kollabieren, während das Auffüllen nicht klappt. Das Auffüllen beinhaltet Hintergrundbilder oder Farben, während der Rand dies nicht tut. Ränder werden zwischen Padding und Rand angezeigt.
Das solltest du nicht tun. Benennungsklassen wie left oder margintop20 sind nicht vorgesehen. Sie sollten Klassen wie content oder sidebarBox verwenden, die den Inhalt beschreiben.
Nehmen wir an, Sie möchten den oberen Rand von 10px auf 1em ändern. Verwenden Sie Ihre Methode entweder
Nichts davon ist gut.
Siehe w3.org goodclassnames dazu.
Siehe auch w3.org über das Box-Modell für den Rand, Padding.
Meiner Meinung nach ist das nicht optimal, es sei denn, Sie machen es richtig.
In Ihrem Markup haben Sie jetzt so etwas:
%Vor%und Sie haben das überall auf Ihrer Site.
Was ist, wenn Sie Ihr CSS ändern möchten, um einen kleinen zusätzlichen Rand / Abstand zu haben?
%Vor%Oh. Diese Klassennamen sehen nicht mehr so vernünftig aus: Sie müssen entweder falsch benannte Selektoren in Kauf nehmen oder in all Ihre Dateien suchen und ersetzen.
Was ist, wenn Sie entscheiden, dass einige Elemente mit .pad10 roten Text haben müssen?
Jetzt macht der Klassenname noch weniger Sinn.
Es könnte in Ordnung sein, diese Art von Dingen zu tun, wenn Sie auch eine relevante (semantisch sinnvolle) Klasse / ID auf jedes Element in Ihrem HTML anwenden:
%Vor%weil du zumindest das tun kannst:
%Vor%