New Perspectives On Web Design

(C. Jardin) #1
By Harry Roberts CHAPTER 1










How do the classes .img and .widget relate to each other? Do they
relate to each other at all? How about .media and .thumbnail? Well, if we
were to rewrite it with BEM:











Here we can instantly see how all these classes relate to one another.
If we wanted to remove all the styling associated with the widget, we can
quickly spot the related classes. BEM gives developers a really detailed
overview of an entire chunk of markup purely by taking a quick glance
over its classes.


BEM looks ugly, sure, and it is verbose, but the power it gives far out-
weighs any of the superficial cons. If you strive for pretty code over power-
ful code, I dare say you’re focusing on entirely the wrong things.

Free download pdf