Liebe Mitlesende,

aus Interesse habe ich mal ins Markup der Tabelle beim "Bewertungsverlauf" der eigenen Profilseite geschaut:

<h2>Bewertungsverlauf</h2>
<table class="score-table">
    <tr>
        <td class="score">
            <span class="score-up">10</span>
        </td>
        <td>
            <article class="threadlist thread">
                <header class="message " id="m1646532">
                    <h3><a href="/self/2015/jul/26/unerklaerliches-problem-mit-verarbeiten-eingelesener-textdatei/1646532#m1646532">Sicherheit...?</a></h3>
                    <div class="details">
                        <span class="author">
                            <span class="registered-user">
                                <a title="Benutzer Felix Riesterer" class="user-link" href="/users/243"><img class="avatar" src="/images/thumb/missing.png" alt="Missing" /></a>
                                <a href="/self/2015/jul/26/unerklaerliches-problem-mit-verarbeiten-eingelesener-textdatei/1646532#m1646532">Felix Riesterer</a></span></span>
                                <a href="/self/2015/jul/26/unerklaerliches-problem-mit-verarbeiten-eingelesener-textdatei/1646532#m1646532"><time datetime="2015-07-26T10:24:41+02:00">26.07.2015 10:24</time></a>
                                <ul class="cf-tags-list">
                                    <li class="cf-tag">
                                        <a href="/self/tags/php">php</a>
                                    </li>
                                </ul>
                                <span class="votes" title="Bewertung: +1, 1 Stimme">Bewertung: +1</span>
                    </div>
                </header>
            </article>
        </td>
    </tr>
...
</table>

Aus boshafter Neugier habe ich den Quelltext auch gleich dem Validator gefüttert... der kam mit ein paar Fehlern und Warnungen. Wenn ich die nicht geschlossenen <span>-Elemente sehe (class="author" und class="registered-user"), dann ist mir gleich klar, dass das nicht ohne Meckern durchgeht. Das mehrfache Verwenden derselben ID ebenfalls.

Was mich aber viel mehr wundert ist die Notwendigkeit aller dieser Klassennamen. Genügt nicht beispielsweise die Klasse "score-up" ohne "score" darüber? Mit den neueren Nachfahrenselektoren (z.B. ".score-table td:first-child" anstelle von ".score") sollte doch manches eingespart werden können. Und <article class="threadlist thread"> wäre dann vielleicht auch anders selektierbar, ohne dass es hier die Klassen "threadlist" und "thread" bräuchte. Auch wenn das Ganze modular aufgebaut wird, so könnte man doch den Selektor für ".threadlist" um ".score-table td:last-child article" erweitern.

Oder plärre ich gerade von einem Elfenbeinturm herab, ohne CSS-Präprozessoren in Erwägung zu ziehen, die das Markup mehr oder weniger bedingen?

Trotzdem gefällt mir das <div>-Element in <article><header><div /></head></article> nicht, da es nur inline-Elemente enthält und semantisch auch als <p>-Element umgesetzt werden könnte. Wieso eigentlich die Verschachtelung von <article> und <header> und <div>? Damit eine identische Umgebung wie auf einer Forenseite erreicht wird und das ohnehin schon vorhandene CSS greift?

Oder hätte es einen Sinn das anders zu machen?

Liebe Grüße,

Felix Riesterer.