Die Namen von CSS Klassen sollten einem Schema folgen, welchen in einem Naming-Style festgelegt ist.

Eindeutigkeit

Da CSS-Klassen unterschiedlichster Herkunft auf einer HTML-Seite eingesetzt werden können ist ein Punkt die Eindeutigkeit.
Eindeutgkeit wird durch einen Präfix des Klasennamens hergestellt.
Diese Eindeutigkeit ist auf mehreren Ebenen nötig.

Organistation oder Projekt

Zum einen auf der Ebene der Organisation oder des Projektes aus dem der Name stammt. Dieser wird dem Klassennamen vorangestellt. Dies sieht gut aus und hilft bei der Eingabe wenn der Editor eine Verfollständigung unterstützt.
So würde ich alle Klassennamen für "Naturalborncoders" Projekte auf der ersten Ebene mit dem Präfix "nbc" beginnen lassen:
Bsp.:

• "nbcHTMLPageTitleArea"

Komponente

Da die meisten Anwendungen aus wiederverwertbaren Komponenten bestehen die auf den Seiten eingesetzt werden sollte auf der zweiten Ebene der Komponentenname verwendet werden, so das Überschneidungen bei Verwendung von mehreren Komponenten auf einer Seite unterbunden werden.
Im oben stehenden Beispiel wird die Rendering-Komponente der Seite als "HTMLPage" bezeichnet.
Bsp.:

• "nbcHTMLPageTitleArea"

Komponenten die auf der Seite eingesetzt werden haben durch das verwendete Framework oder die Applikation selber in der verwendeten Programmiersprache meist schon einen eindeutigen Namen den wir benutzen können.
So würde ich die Editier-Komponente für den Login "LoginEditComp" nennen.
Bsp.:

• "nbcLoginEditCompTitleArea"

Elemente

Eine Komponente besteht aus vielen HTML-Elementen die eine eindeutige Bezeichnung erfordern.
Diese Elemente haben oft innerhalb der Komponente einen eindeutigen Namen den wir verwenden können. Jedes Eingabefeld benötigt einen eindeutigen Namen, aber auch abstrakte Ausgabelemente wie in den Beispielen der "Title" müssen eindeutig benannt sein.
Bsp.:

• "nbcLoginEditCompTitleArea"
• "nbcLoginEditCompUserNameInput"

Element Gliederung

Da ein Element in der HTML Darstellung oft in mehrere HTML-Fragmente geglieder ist müssen diese Eindeutig benannt werden.
Es bietet sich an hierfür wiederkehrende Namen zu vereinbaren die im Style festgelegt sind. So würde ich für einen das Element umschließenden DIV immer den Namen "Area" verwenden. Für ein HTML-Eingabelement den Namen "Input". Für die Beschriftung den Namen "Label", usw.:
Bsp.:

• "nbcLoginEditCompTitleArea" für den DIV-Bereich des Titels der Seite
• "nbcLoginEditCompTitleAreaText" für den Text des Seitentitels innerhalb der Area
• "nbcLoginEditCompUserNameArea" für den DIV-Bereich des Benutzernamens in der Login-Komponente
• "nbcLoginEditCompUserNameInput" für das Texteingabefeld des Benutzernamens in der Login-Komponente
• "nbcLoginEditCompUserNameLabelArea" für den DIV-Bereich der Beschriftung des Benutzernamens in der Login-Komponente
• "nbcLoginEditCompUserNameLabelText" für den Text der Beschriftung in der Area des Benutzernamens in der Login-Komponente

Da die HTML-Elemente oft Geschachtelt auftreten können diese Schachtelungen im Namen ausgedrückt werden.
"UserNameArea" ist das umgebende DIV, "UserNameInput" des Eingabefeld, "UserNameLabelArea" ein die Feldbezeichnung umgebende DIV, "UserNameLabelText" der Text des Labels selber.
Hier ist ein wenig Kreativität gefordert, wichtig sind immer wiederkehrende Bezeichnungen für die HTML-Fragmente, so das man bei Änderungen 'weiss', was gemeint ist.

Zur Bildung von eindeutigen Komponenten-Namen sie Bennung von Komponenten.