How do you avoid class name collisions? [closed]


Tags: css,css-selectors

Problem :

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.



Solution :

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


    CSS Howto..

    How to use radio button checked or clicked property in my case

    How can I line up the two containers in view?

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    How to cut down HTTP request on js/css in laravel

    How do you make 2 YouTube videos automatically play one after the other?

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    How to change position of Semantic UI sidebar for different screen sizes?

    How to make a div snap to min or max size, without any sizes in-between?

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    How to add a style only to certain elements of a list via CSS

    Not floating on same line, how to fix css

    how can I add styles of structure to jquery plugin

    How to vertical align top in my case

    How to update the attribute while overriding a style defined in css?

    I want to apply an existing CSS style to all labels on a page. How?

    How to make a css navigation menu “selected” option still clickable

    How to set css class 'active' by using C#?

    How to draw a centered line with a rectangle to one side in CSS

    how to keep elements in one row in css

    How to make the content div scrollable without using javascript

    How to set width of DIV to span with text inside it (so not fixed)

    how I can set color of anything in css [closed]

    How can I fix this jumbotron/carousel to be the size of the image?

    How to visually indicate current page in ASP.NET MVC?

    How to dynamically create a css style rule that is overridable by earlier rules

    How to add space after border in css

    How to make CSS compatible with all browsers?

    How to center multiple inline-block elements with CSS?

    How to style jQuery UI's autocomplete list for mouse leave event?

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6