How do you avoid class name collisions?

Question

Let's say I'm building a blog and add a class named "post" for the timeline posts. Then another developer comes in and creates a highlights section which also has a "post" class. All of a sudden we have a collision.

I usually solve this by nesting classes and not keeping anything "global" but from what I've understood it's not best practice:

.main .post {
    background-color: red;
}

.highlights .post {
    background-color: green;
}

When I inspect big sites CSS files I see loads of global class names for seemingly specific parts of the page so I'm really wondering how they solve it. Do they search and scan the whole project for a class name before adding it? What do they do if they want to add something which already exists? Renaming it just for the sake of it seems like a really bad practice if anything.

My oppinion and experience is that you SHOULD define global styles. Other developers should be able to use your definitions like a toolkit and without knowlege of special wrapping-classes. Just think of it like writing a new framework. Which names would be obvious for certain controls? Could i use my classes/partials in other projects with just copy and paste? — Nico O, Feb 17 '14 at 12:23

score 5 · Accepted Answer · answered Feb 17 '14 at 12:21

5

The secret is to use some sort of framework/methodology that enforces discipline e.g. OOCSS or BEM.

answered Feb 17 '14 at 12:21

anddoutoi

9,973
4
29
28

3

BEM has the most disgusting syntax I've ever seen – Stefano Borini Nov 14 '16 at 09:42
Totally agree and that one. – anddoutoi Nov 15 '16 at 07:43

score 2 · Answer 2 · answered Feb 17 '14 at 12:20

2

There are several CSS classes naming conventions around and one of the most used is BEM (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). Take a look :)

answered Feb 17 '14 at 12:20

Maksim Gladkov

3,051
1
14
16

How do you avoid class name collisions?

2 Answers2

Linked