Best Practice: Einstellung HTML-Klassen in einer Webapp

Question

In jeder Webapp ich bauen, stoße ich auf diese Frage. Ich möchte bedingt Klassen auf HTML-Elemente setzen. Zum Beispiel manchmal die <div> für einen Beitrag wie folgt aussehen:

<div class="post">...</div>

Und manchmal sieht es wie folgt aus:

<div class="post even recent replied_to author_is_admin">...</div>

Jede Klasse nach post gibt es da eine gewisse Logik entschieden, sollte es sein. Was ist der beste Weg, um dies? In Rails + HAML, ich habe zu tun Sachen schuldig gemacht wie:

-classes = []
-classes << cycle('even', 'odd')
-classes << 'recent' if post.recent?
-classes << 'replied_to' if post.replied_to?
-classes << 'author_is_admin' if post.author_is_admin?
.post{:class => classes.join(' ')}
    ...

Es ist nicht schön, und ich habe verkürzt es einen Helfer zu verwenden, so kann ich dies tun:

.post{:class => "#{cycle('even', 'odd')} #{post_classes}"}

Es scheint immer noch wie es leichter zu lesen sein soll, weil es etwas ist, wir die ganze Zeit tun. Hat Sie Methoden, mit denen Sie dieses Verfahren kurz und lesbar machen?

Answer 1

Ich denke, was Sie getan haben, ist in Ordnung. Ich würde nur ein paar kleineren Verbesserungen vorschlagen. Man würde den Zyklus-Aufruf in post_classes zu setzen. Zur besseren Lesbarkeit, würde ich post_classes akzeptiert Beitrag Argument machen. Dies schafft ein wenig Redundanz, aber man kann es leicht durch die Definition dieser Hilfsmethode vermeiden:

def classes(object)
  case object
  when Post then post_classes(object)
  end
end

Auf diese Weise Ihre Template-Code wird wie folgt aussehen:

.post{:class => classes(Post)}