Class for repeating elements

[ssougnez]

Hi,

I'm using a table and I'd like all "td" to have a padding of "10px" and I don't want to use the "cellpadding" attribute of the table. In "normal" CSS, I would do something like :

td { padding:10px; }

But I'd like to use BEM. What I did so far is :

.my-table__col { padding:10px; }

It works, but it means that I have to put this class on every "td" element of my array, which produce a HTML bigger than wanted. Is it the only solution or can I use "tag" selector in BEM (I think I read that I shouldn't...).

[garrypolley]

I'm no expert but I think cell-padding attribute will get the most consistent experience cross browser. If the desire is to keep using CSS I'd make this selector:

.my_table--special-case td {
    padding: 10px;
}

[ssougnez]

Hi,

isn't against the BEM principle to use "td" selector?

[garrypolley]

In my opinion it's not "against" BEM to use an HTML tag in a selector.

I think table is an example of where it makes sense to do it. Tables have a specific markup pattern that is almost always required in order to get a proper table. Therefore, I don't think that the selector specificity issues that BEM generally helps avoid matters in this particular case.

That's why I favored a block--modifier tag approach for the selector. I'm sure others have thoughts on this topic as well. I'm not an "expert" at BEM, I've been using it at just about a year and I think there are cases where using tags makes sense, and tables is the cleanest case in my opinion. The key being that it's still based off a block--modifier and not only styling the tag.

[adi518]

I'd say it falls around the same context portrayed here: http://getbem.com/faq/#block-modifier-affects-elements

However, If you are writing your table dynamically, I'd use .table__td--modifier. This way you adhere to convention and avoid issues later on, when you want to elaborate your td design.