Hinzufügen vieler CSS-Klassen zu HTML-Elementen

Question

Ich habe ein Message Board und einer meiner Benutzer hat ein Skript geschrieben, um verschiedene Elemente auf der Seite zu stilisieren. Er hat großartige Arbeit geleistet, aber um seine Arbeit zu erleichtern, besteht der erste Schritt in seinem Skript darin, die aktuelle Seite zu analysieren und mehrere CSS-Klassen zu fast allen HTML-Elementen auf der Seite hinzuzufügen. Die meisten von ihnen werden nicht verwendet, um die Seite überhaupt zu stylen, sondern um es ihm leichter zu machen, die paar Elemente pro Seite abzufragen, die er tatsächlich verändern wird. zum Beispiel class="thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345" etc usw.

ist dies eine Standardpraxis? Gibt es Nachteile beim Hinzufügen von vielen unnötigen CSS-Klassen, entweder in Javascript, oder auf dem Server, wenn ich sie auch zu den bereitgestellten Seiten hinzufügen würde.

Answer 1

Dies scheint Klassen zu verwenden, um beliebige Metadaten in Elemente einzubetten, was sicherlich nicht das ist, wofür das Klassenattribut entworfen wurde. Da seine Effekte mit einem GreaseMonkey-Skript beginnen und enden und somit auf dem Client lokalisiert sind, scheint es ein harmloser Hack zu sein, aber ich würde nicht raten, auf der Serverseite zu duplizieren.

HTML bietet leider nicht viele Alternativen, wenn es um andere Metadaten geht, als um ungültige Attribute beizubehalten. Es gibt also einen Mechanismus, der dem Attribut "Klasse" innerhalb bestehender Tags semantische Bedeutung hinzufügt microformats. Es gibt eine Menge atemlosen Schlagwort-Hype um Mikroformate, aber insgesamt drehen sie sich um eine Best Practice für Bereiche, in denen es nicht möglich ist, All-Xml zu verwenden.

Answer 2

In Bezug auf die Semantik, ja, es gibt Nachteile. Wenn Sie Klassen haben, die nicht beschreiben, was das Element eigentlich ist und nur für Styling-Zwecke da sind, kann dies Sie bei der Entscheidung, ein Redesign und/oder eine Neustrukturierung zu unternehmen, in Mitleidenschaft ziehen.

zum Beispiel BAD:

<div class="header red left-side"> 

GUT:

<div class="header main current-event"> 

Answer 3

Klassen sind nicht nur für CSS, sie sind für die Kategorisierung von Abschnitten Markup. Anwenden von Styling basierend auf dieser Kategorisierung ist nur eine Verwendung. Also, wenn die Klassen für andere Kategorisierungszwecke nützlich sind, dann ist das in Ordnung, und absolut gute Praxis.

Answer 4

Wenn es keinen zugeordneten Stil mit einer Klasse gibt, die Element zugewiesen ist, dann glaube ich, dass der Browser es einfach ignorieren wird. Es wird also Ihre Seitenverarbeitungszeit nicht stark erhöhen, wenn Sie sich darüber Sorgen machen.

Wenn es jedoch viele und viele Klassen für jedes Element gibt, dann müssen Sie erkennen, dass Sie wertvolle Bandbreite verwenden und die Zeit erhöhen, die es dauert, die gesamte Seite auf diese Weise zu laden. Sie können dieses Problem vermeiden, indem Sie das CSS externalisieren, damit der Browser es zwischenspeichern kann.

Verwenden Sie jquery, um die Elemente abzufragen, die Sie wirklich ändern möchten? Es könnte sich herausstellen, dass es einfacher ist, diese Elemente mit jQuery-Selektoren auszuwählen, die mit Standard-JavaScript schwierig oder unmöglich erscheinen, und daher können Sie all diese unnötigen Klassen vermeiden.

Fazit, es gibt kein Problem in der Verwendung von vielen Klassen, wenn sie benötigt werden, und das ist völlig in Ordnung für die Produktion, aber wenn Sie sie nicht brauchen, wie in Ihrem Fall, muss es eine bessere Lösung sein Sie können möglicherweise mit kommen.

Answer 5

Nur für einen Datenpunkt, guckte ich gestern GMail HTML (ihre Tasten sind sehr nett) und es ist voll von dieser Art von Sache.

Hier ist ein Beispiel:

class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"