Comment by Robert van der Elst on "What are the things that you consider while defining the name of class in CSS? How do you consider it to be the perfect name for that class?" | Hashnode

Robert van der Elst

Front End Designer

Mar 9, 2016

Hmmm, I usually name it depending on functionality and when necessary add a location in it (header, footer, aside etc.), just for convenience. I tend to work on a component level more than anything.

So I usually get something like this:

header { ... }
.header-logo { ... }

.article-list { ... }

footer { ... }
.footer-column { ... }

I'm not really following any CSS framework like BEM or OOCSS really, just following some basic rules, but then again, I'm on my own here, not part of big team or something ;)

Besides that I try to limit my specificity as much as I can. I'm usually at around a maximum of 3 levels deep, but there always exceptions to about 4 or 5 levels deep.

Nirmalya Ghosh

Developer

Mar 9, 2016

So, what do you do when you have something like elements and modifiers of BEM? Do you nest them inside your parent classes? Does your convention work well for a large app?

Well I don't have modifiers, so I basically go from component level and style from there. So say I've got a navigation in UL.nav > LI > A form, then I style .nav a { ... } if one of them needs to be different, I tend to pick the parent (the LI in this case) and give that a class. And then it's something like this: .nav .different a { ... } Not sure if this would scale properly, never encountered that.

Search Hashnode