Felix Riesterer: Markup für score-table

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.

akzeptierte Antworten

  1. Hallo,

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

    hab ich jetzt nicht gemacht, sondern beziehe mich auf den von dir geposteten Quelltext.

    </span></span>
    

    Wenn ich die nicht geschlossenen <span>-Elemente sehe (class="author" und class="registered-user")

    die sehen für mich ordentlich geschlossen aus.

    Das mehrfache Verwenden derselben ID ebenfalls.

    Ich habe eine einzige ID entdeckt. Das ist nicht mehrfach.

    Gruß
    Kalk

    1. Lieber Tabellenkalk,

      </span></span>
      

      UI, die habe ich tatsächlich übersehen.

      Das mehrfache Verwenden derselben ID ebenfalls.

      Ich habe eine einzige ID entdeckt. Das ist nicht mehrfach.

      In dieser Hinsicht hatte ich den Code stark gekürzt. Aber Du darfst in Deiner Profilseite gerne selbst nachschauen.

      Liebe Grüße,

      Felix Riesterer.

  2. @@Felix Riesterer

    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?

    Ein CSS-Präprozessor bedingt kein bestimmtes Markup. Jedenfalls nicht mehr als es CSS tut. Schließlich macht der CSS-Präprozessor nicht anderes als CSS zu generieren.

    LLAP 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
  3. Hallo Felix,

    Aus boshafter Neugier habe ich den Quelltext auch gleich dem Validator gefüttert... der kam mit ein paar Fehlern und Warnungen.

    Die Fehler beziehen sich aber nur auf die <link rel="top"> und <link rel="bookmark"> sowie die doppelten IDs. Letztere sind ein Bug, den habe ich gerade gefixed (da sollten gar keine IDs generiert werden).

    Die <link>-Elemente habe ich auch mal raus genommen, ich glaube nicht, dass die noch irgendwo ernsthaft benutzt wurden.

    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.

    Bitte poste mal den kompletten Quelltext, hier bei mir gibt es keine span-Elemente, die nicht geschlossen wurden.

    Was mich aber viel mehr wundert ist die Notwendigkeit aller dieser Klassennamen.

    Die sind nicht notwendig, die sind eine Erleichterung für den User, der sich eventuell ein eigenes User-Stylesheet schreiben möchte. Klar käme ich mit deutlich weniger Klassen aus, aber mehr Klassen geben dem User mehr Möglichkeiten der einfachen Selektion.

    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.

    Klar, kann man machen - aber das erhöht einerseits die Komplexität des CSS (das eh schon ziemlich komplex ist) und erfordert andererseits, dass man zusätzliches CSS schreibt - was mit eimen mehr generischen Selektor über die Klassen halt einfach global überall abgedeckt ist. Das ist ja nicht der einzige Punkt, wo ich Nachrichten-Header genriere. Es gibt die augeblendeten Threads, die interessant markierten Nachrichten, die Suchergebnisse, etc, pp. - für diese Fälle müsste man überall eigene Selektoren dann schreiben.

    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?

    Die haben damit nichts zu tun.

    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.

    Das war ursprünglich ein details-Element. Das hat aber durch die unterschiedliche Umsetzung im Shadow-DOM starke Probleme im Styling mit sich gebracht, gerade über verschiedene Browser hinweg. Deshalb habe ich das dann durch ein div ersetzt.

    Wieso eigentlich die Verschachtelung von <article> und <header> und <div>?

    <article> leitet den Beitrag ein, in der Einzel- und Nested-Ansicht enthält das auch den Beitrags-Text und so weiter. <header> enthält die Header-Informationen zu dem Beitrag und <div class="details"> enthält die Detail-Informationen zu dem Beitrag, die mit der Headline nichts mehr zu tun haben.

    Damit eine identische Umgebung wie auf einer Forenseite erreicht wird und das ohnehin schon vorhandene CSS greift?

    Die Nachrichten-Header werden alle mit der gleichen Funktion gerendert. Deshalb haben sie auch überall immer das gleiche Markup. DRY.

    LG,
    CK

    1. Lieber Christian,

      danke für die umfangreichen Klarstellungen! Darf ich aus dem Umfang ableiten, dass Du Dich gesundheitlich mitten auf dem Weg der Besserung bist?

      Liebe Grüße,

      Felix Riesterer.

      1. Hallo Felix,

        danke für die umfangreichen Klarstellungen! Darf ich aus dem Umfang ableiten, dass Du Dich gesundheitlich mitten auf dem Weg der Besserung bist?

        Ja, danke, mir geht es wesentlich besser.

        LG,
        CK