Titel CSS: Ein einfacher Ansatz bei der Namensschreiber -Klasse -Klasse

Key Takeaways

• Titel CSS ist eine Methodik, die die Benennung der CSS -Klasse durch die Verwendung von Akkordnamen für globale Klassen und Kleinbuchstaben für Modifikator- oder Nachkommenklassen vereinfacht. Dieser Ansatz bietet die Vorteile von BEM, ohne Klassennamen Präfixe oder Sonderzeichen hinzuzufügen.
• Titel CSS hilft beim Schreiben von CSS -Klassen auf natürlichere Weise und ähnelt der schriftlichen Sprache. Es ermöglicht auch kürzere Klassennamen, die schneller eingeben und einfacher zu scannen können. Die kapitalisierten Klassen sind im Markup leicht zu erkennen und erleichtern das Verständnis, was eine Nachkommenklasse für Kleinbuchstaben gehört.
• Ein potenzielles Problem mit dem Titel CSS entsteht, wenn ein Titelblock andere Blöcke mit derselben Nachkommenswahlklasse enthält. Um Stilkonflikte zu vermeiden, kann der Kinderkombinator (>) in Titelblöcken verwendet werden, die als Container fungieren, um sicherzustellen, dass die Stile nur für direkte Kinder gelten und nicht weiter verschachtelt sind und dieselben Klassennamen weiter verschachtelt haben.

Wenn Sie wie ich sind, verbringen Sie viel zu viel Zeit mit dem perfekten Klassennamen für ein Element. Sie können für Synonyme googeln oder sich vorstellen, was dieses Element wäre, wenn es ein reales Objekt wäre. Sie wissen, dass jeder semantische Name funktionieren wird, aber irgendwie versucht zu versuchen, sich den perfekten Namen zu überlegen, scheint es wert zu sein.

Um ehrlich zu sein, hilft der perfekte Name Ihrem Stylesheet nicht so sehr, aber die Verwendung einer CSS -Methodik könnte einen großen Unterschied machen.

Beispiele für CSS -Methoden

oocss ist umweltfreundliche Ratschläge, die Ihnen helfen, nachhaltige Klassen durch Recyclingstile zu schreiben.

SMACSS ist ein umfassender CSS-Spielplan, der Sie durch alle richtigen Techniken trainiert.

idiomatisches CSS ist ein analytischer Hausreiniger, der alles in Uniform für einfache Anerkennung und Seelenfrieden organisiert.

und Bem? Nun, BEM ist der Goldstandard der CSS -Klasse -Benennung, gegen die alle CSS -Klasse -Benennungsschemata gemessen werden.

Warum sollten Sie mehr über Klassen benennen?

Der BEM -Ansatz geht es darum, skalierbare CSS mit Schwerpunkt auf Lesbarkeit und Vermeidung von Kollisionen zu schreiben. Kurz gesagt, BEM steht für Block__Element -Modifier. Der Block ist ein Element, das ein kleines Stück verwandter Elemente umfasst (in SMACSS wird er als Modul bezeichnet). Das Element ist ein Nachkomme des Blocks und würde normalerweise nicht ohne die Anwesenheit des Blocks existieren. Der Modifikator steuert den Status des Blocks.

In BEM schreiben Sie einen normalen Klassennamen für den Block und für jedes Element den Blocknamen und fügen den Elementnamen hinzu.

herkömmlicher BEM sieht so aus:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Das ist gut, weil jeder verstehen wird, dass sich „block__eelement“ auf „Block“ bezieht und die Klasse „Block__Element“ kaum überall im Projekt verwendet wurde.

Aber es gibt ein Problem mit diesem Ansatz. Sie schreiben den ganzen Tag CSS und möchten keine langen Klassennamen schreiben, die Ihr sauberes Markup verjüngen.

Bei

Titel CSS geht es darum, Ihnen die Vorteile von BEM zu geben, ohne Präfixe oder Sonderzeichen zu Ihren Klassennamen hinzuzufügen.

Der Trick zum Titel CSS ist einfach

Mit dem Titel CSS werden Sie Folgendes ausführen: Verwenden Sie für jede globale CSS -Klasse einen kapitalisierten Namen (Titelfall). Verwenden Sie für einen Modifikator oder eine Nachkommenklasse einen Kleinbuchstabenbuchstaben für den Beginn des Namens.

Dies bedeutet mit dem Titel CSS Sie nutzen jeden Klassennamen, auf den im Stylesheet ohne übergeordnete Klasse verwiesen wird. Dies bedeutet, dass sogar die Objekte in OOCSs aktiviert werden. Die Unterscheidung ist einfach; Alles, was im Stylesheet aktiviert wird, darf nicht erneut verwendet werden.

Hier ist ein Beispiel dafür, wie das Markup bei der Verwendung von Titel CSS aussehen würde:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Und hier ist, wie das entsprechende CSS aussehen würde:

<span><span><span><div</span> class<span>="Title isModified"</span>></span>
</span>    <span><span><span><p</span> class<span>="descendant"</span>></span>
</span><span><span><span></div</span>></span></span>

Warum Titel CSS funktioniert

Block -Kenner oder „Titel“ -Krassen erstellen einen Umfang für alle Desc. -Klassen innerhalb des Blocks. Nachkommensklassen können in anderen Titelblöcken ohne Style -Kollision wiederholt werden.

Dies ist nicht von entscheidender Bedeutung für die Arbeit der Methodik, aber da der HTML-Klassenname von Fall sensitiv ist, können auch „Titel“ -Kurse als Nachkommenklassen wiederholt werden.

Wie hilft Titel CSS?

Mit der Titel -CSS -Methodik sehen Sie die folgenden Vorteile:

• CSS -Klassen auf natürliche Weise schreiben.
• CSS -Selektoren ähneln der schriftlichen Sprache, wie englische Sätze, die mit einem Großbuchstaben beginnen.
• kürzere Klassennamen sind schneller zu tippen und leichter zu scannen.
• Titelkofferklassen sind im Markup leicht zu erkennen. Um zu sehen, was eine Nachkommenklasse für Kleinbuchstaben gehört, durchqueren Sie einfach die Knoten für eine Titelklasse.

Eine Fallstrick und Problemumgehung

Titel -CSS kann Probleme haben, wenn Sie einen Titelblock verwenden, um andere Blöcke zu enthalten. Wenn ein enthaltender Titelblock die gleiche Nachkommensauswahlklasse hat wie eine, die er umhüllt, als ein Konflikt. In diesem Fall sollten Sie Kinderkombinator in Titelblöcken verwenden, die als Container fungieren.

Um das Problem zu demonstrieren, finden Sie unten ein Beispiel für ein Beispiel mit dem vorhandenen Problem:

<span><span>.Title</span> {}
</span>    <span><span>.Title.isModified</span> {}
</span>    <span><span>.Title .descendant</span> {}</span>

und das dazugehörige CSS:

<span><span><span><div</span> class<span>="Container"</span>></span>
</span>    <span><span><span><header</span> class<span>="header"</span>></span><span><span></header</span>></span>
</span>    <span><span><span><main</span> class<span>="body"</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>    <span><span><span></main</span>></span>
</span><span><span><span></div</span>></span></span>

Beachten Sie, dass die Stile, die sich auf den .header- und .körperelemente innerhalb von .Container angewendet haben, auch für die anderen .header- und .körperelemente weiter gelten. Um dies zu vermeiden, finden Sie hier die Lösung:

<span><span>.Container</span> {}
</span>    <span><span>.Container .header</span> {}
</span>    <span><span>.Container .body</span> {}
</span><span><span>.Title</span> {}
</span>    <span><span>.Title .header</span> {}
</span>    <span><span>.Title .body</span> {}</span>

Mit einem Selektor, der den Child Combinator (>) verwendet, gelten die Stile nur für die direkten Kinder und nicht für die weiteren verschachtelten Elemente, die die gleichen Klassennamen haben.

Ein Wort über Sass

Pre-Processoren bieten eine hervorragende Möglichkeit, Titel CSS zu schreiben. Mit der Verschachtelungsfähigkeit können Sie die Titelblöcke im Stylesheet leicht identifizieren.

Hier ist ein Titel CSS -Beispiel in SCSS:

<span><span><span><div</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

Feedback?

Wie BEM, SMACSS und OOCSS vermuten lassen, ist es wichtig, die Blöcke oder Module klein zu halten. Es gibt Leistung und Wartbarkeitsvorteile, die nur Elemente enthalten, die eng mit der Titelklasse zusammenhängen.

Wenn Sie Beobachtungen oder Feedback zu Titel CSS haben, würde ich sie gerne in den Kommentaren hören. Und wenn Sie weitere Informationen erhalten oder zusammenarbeiten möchten, lesen Sie unbedingt das GitHub -Repo für Titel CSS.

häufig gestellte Fragen (FAQs) zu CSS -Titel und Klasse -Namen

Welche Bedeutung hat die Bedeutung des CSS -Titels und der Klasse für Klasse? Es hilft bei der Organisation Ihres CSS -Codes und erleichtert das Lesen, Verständnis und Aufrechterhalten. Richtige Namenskonventionen können auch die Effizienz Ihrer CSS -Selektoren verbessern und Ihre Webseiten schneller laden. Darüber hinaus hilft es bei der Zusammenarbeit, da es anderen Entwicklern ein klares Verständnis des Code bietet.

Wie kann ich ein Titelattribut aus CSS hinzufügen? Sie können jedoch JavaScript oder JQuery verwenden, um einem Element ein Titelattribut dynamisch hinzuzufügen. Alternativ können Sie die CSS -Inhaltseigenschaft mit der Funktion attr () verwenden, um den Titel -Attributwert anzuzeigen, aber das Titelsattribut nicht zum Element hinzugefügt. Sie können verwendet werden, um Elemente mit bestimmten Attributen oder Attributwerten zu stylen. Beispielsweise wählt und style input [type = ”» text ”alle Texteingangsfelder. Es wird häufig als Tooltip angezeigt, wenn der Benutzer über das Element schwebt. Sie können es fast jedem HTML -Element hinzufügen. Zum Beispiel schweben

über mich

.

Was ist die beste Praxis für die Benennung von CSS -Klassen? Vermeiden Sie die Verwendung von Präsentationen oder ortsspezifischen Wörtern. Verwenden Sie stattdessen Namen, die den Zweck oder den Inhalt des Elements widerspiegeln. Verwenden Sie auch Bindestriche, um Wörter in einem Klassennamen zu trennen und die Namen so kurz wie möglich zu halten. Es wird jedoch im Allgemeinen empfohlen, Sonderzeichen zu vermeiden, da Sie Ihren Code schwerer zu lesen und zu verstehen können.

Wie kann ich ein Element mit einem bestimmten Titelsattribut in CSS auswählen? Zum Beispiel wählt Div [title = ”Beispiel”] alle Div -Elemente mit einem Titel -Attributwert von „Beispiel“ aus.

Kann ich Zahlen in CSS -Klassennamen verwenden? Das erste Zeichen muss ein Buchstaben, ein Bindestrich oder ein Unterstrich sein.

Wie kann ich einem HTML -Element mehrere Klassen hinzufügen? Zum Beispiel kann ich

.

CSS verwenden, um das Titelattribut eines HTML -Elements zu ändern? Sie müssten JavaScript oder JQuery verwenden, um das Titelattribut eines HTML -Elements zu ändern.

Das obige ist der detaillierte Inhalt vonTitel CSS: Ein einfacher Ansatz bei der Namensschreiber -Klasse -Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!