Hinzufügen vieler CSS-Klassen zu HTML-Elementen

Question

Ich habe ein Messageboard und einer meiner Benutzer geschrieben hat einen Greasemonkey-Skript verschiedene Elemente innerhalb der Seite stilisieren. Er hat einen tollen Job mit ihm aber, um seine Arbeit zu erleichtern, ist der erste Schritt in seinem Skript zu machen, die aktuelle Seite zu analysieren und zu fast alle HTML-Elemente auf der Seite mehr CSS-Klassen hinzuzufügen. die meisten von ihnen sind nicht auf Stil die Seite überhaupt, sondern machen es einfacher für ihn fragen Sie die paar Elemente pro Seite verwendet, die er tatsächlich ä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 etc

ist dies eine gängige Praxis? gibt es viele unnötige CSS-Klassen, entweder in JavaScript oder auf dem Server, wenn ich zu ihnen gedient Seiten hinzufügen waren.

, um das Hinzufügen irgendwelche Nachteile

Answer 1

Das sieht Klassen werden mit beliebigen Metadaten in Elemente eingebettet werden, was sicherlich nicht das, was Attribut der Klasse wurde konzipiert. Da ihre Auswirkungen beginnen und mit einem Greasemonkey-Skript beenden und werden somit an den Client lokalisieren, so scheint es, ein harmlos genug hacken, aber nicht, den ich auf der Server-Seite zu duplizieren raten würde.

HTML leider nicht viel bietet in der Art von Alternativen, wenn es darum geht, andere Metadaten als in einem ungültigen Attribute kleben, so gibt es einen Mechanismus, der im Rahmen der vorhandenen Tags semantische Bedeutung des „Klasse“ Attribut fügt - nämlich < a href = "http://microformats.org" rel = "nofollow noreferrer"> Mikroformate. Es gibt eine Menge von atem buzzwordy Hype um Mikroformate, aber insgesamt haben sie um eine bewährte Methode für Bereiche drehen, wo geht all-xml indiskutabel ist.

Answer 2

In Bezug auf die Semantik, ja, es gibt Schattenseiten. Wenn Sie Klassen, die nicht beschreibend sind, was das Element tatsächlich ist und sind für Styling dient nur, dies kann weh tun die Straße hinunter sollten Sie neu zu gestalten und / oder Umstrukturierung entscheiden.

zum Beispiel BAD:

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

GOOD:

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

Answer 3

Wenn es keine zugehörigen Stil mit einer Klasse, die dem Element zugeordnet ist, dann glaube ich, wird der Browser einfach ignorieren. So wird es nicht Ihrer Seite Bearbeitungszeit eine Menge zu erhöhen, wenn das ist, was Sie besorgt sind.

Wenn es jedoch viele, viele Klassen für jedes Element sind, dann müssen Sie erkennen, dass Sie wertvolle Bandbreite und die Erhöhung der Zeit es braucht, verwenden die gesamte Seite auf diese Weise zu laden. Sie können dieses Problem vermeiden, indem Sie die CSS-Externalisierung, so dass der Browser-Cache kann.

Sind Sie mit jQuery die Elemente abzufragen, die Sie wirklich ändern möchten? Es könnte sich herausstellen, dass seine mehr leicht, diese Elemente mit Jquery Selektoren zu holen, die mit Standard-JavaScript schwierig oder unmöglich erscheinen, und daher kann man möglicherweise alle diese zusätzlichen unnötigen Klassen vermeiden.

Unterm Strich gibt es kein Problem viele Klassen in zu verwenden, wenn sie benötigt werden, und das ist völlig in Ordnung für die Produktion, aber wenn Sie sie nicht benötigen, wie in Ihrem Fall hat es eine bessere Lösung sein, dass Sie möglicherweise kann kommen mit.

Answer 4

Nur für einen Datenpunkt, nahm ich einen Blick auf GMail HTML gestern (ihre Tasten sind sehr schön) und es ist voll von solchen Dingen.

Hier ist ein Beispiel:

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

Answer 5

Die Klassen sind nicht nur für CSS, sie sind für die Kategorisierung von Abschnitten Markup. Die Anwendung Styling auf der Grundlage dieser Kategorisierung ist nur eine Verwendung. Wenn also die Klassen, die für andere Zwecke Kategorisierung sind, dann ist das in Ordnung, und ganz gute Praxis.