Während einige der CSS-Dateien einiger Websites und anderer weit verbreiteter Plugins und Frameworks durchlaufen wurden, wurde festgestellt, dass sie häufig Bindestrich-getrennte Wörter als Klassennamen verwenden. Was ist eigentlich der Vorteil der Verwendung solcher Klassennamen?
Zum Beispiel: In jquery UI CSS,
%Vor% ui-helper-reset lesbar,
uiHelperReset unlesbar.
Bei Verwendung von Attributselektoren wie [class^="md-"], [class*=" md-"] um spezifisch und sicher auf die spezifischen Klassennamen-Stile zu zielen, die verhindern, dass zB: .mdSomething als Ziel ausgewählt wird.
Wenn Sie in jedem anständigen Texteditor - verwenden, um kombinierter Klassenname zu trennen, können Sie einfach einen gewünschten Abschnitt markieren Mit doppelklicke wie folgt: col- md -3 und ersetze (oder dokumentiere ihn sogar global) in col- sm -3 Auf der anderen Seite, wenn Sie Unterstrich _ like Klassenname_hier verwenden, markieren Sie beim Doppelklick den gesamten Klassennamen wie folgt: class_name_here . Dadurch werden Sie gezwungen, stattdessen manuell den gewünschten Bereich auszuwählen.
Sie können ein CSS-Benennungskonzept wie folgt verwenden:
Sie alle helfen einem Team, "die selbe Sprache" zu sprechen, indem sie eine striktere "Benennung von Dingen" wie:
übernehmenoder
Wenn Ihr .chat Teil der Seite ist, die Sie sehen, können Sie allgemeine Block-Klassen wie .btn und Modifier .btn--big wie <a class="btn btn--big">Post</a> verwenden, anderenfalls, wenn Ihre Schaltflächen ein strengeres Styling für Ihren Chat benötigen Anwendung als Sie .chat__btn und .chat__btn--big Klassen verwenden würden. Solche Klassennamen können auch vorverarbeitet werden.
Dh: Mit Sass , einem Supersatz von CSS3 sintax kannst du Sachen wie:
machen(Beispiel mit SUIT CSS)
%Vor% Es ist wichtig, ein strengeres Benennungsformat in einem Team zu verwenden . Verhindert und minimiert tote Legacy-Klassen, die Ihren HTML-Code aufgebläht haben, hilft bei der Wiederverwendbarkeit, Lesbarkeit und beschleunigt Ihren Workflow. Außerdem zwingt es Sie, viel modularer über Ihre HTML-Struktur nachzudenken - als Komponenten oder Atome .
Was immer Sie sich aussuchen, bleibt Ihnen überlassen - nur, seien Sie konsequent .
Zusätzlich zu ihrer Lesbarkeit können sie auch vorschlagen, welche Klassen mit anderen verknüpft sind. Twitter-Bootstrap-Schaltflächen haben beispielsweise Klassen wie
%Vor%usw.
Die zweiten beiden sind verwandt mit dem ersten
Es ist nur eine Übung für Lesbarkeit . Im Allgemeinen können Sie solche Variablen in JavaScript nicht für Trennzeichen verwenden, da - ein Operator ist. Wenn Sie in JavaScript ein Trennzeichen benötigen, verwenden Sie entweder Folgendes:
Auf diese Weise können Sie unterscheiden, dass eines für CSS und ein anderes für JavaScript verwendet wird. Dies ist mein Standpunkt, aber kann auch für Ihre Antwort angewendet werden! :)
Es ist nur eine Lesbarkeit . Sie können beliebige Namen gemäß der Konvention verwenden.