As far as I know there are two types of CSS namespacing: Prefix one:.myapp-alert {...}and class one:.myapp .alert {...}Which one is preferable? Does one has benefits over the other one? Are there any other?
How to namespace your CSS?
css
There are no namespaces in CSS. All you do in CSS ends up in global scope. This is by design.This leads to two problems:What happens to the apps using my library if, in the library, I introduce a given style?What happens to other parts of my 100M-LOC app if I introduce a given style in the part I'm working on?Those are two distinct situations, which can be handled with two distinct techniques you described in your question.Prefixes work well for libraries and frameworks. If a framework has an alert icon, this icon may appear anywhere in the page. Thus, you can't just scope the style to a particular element (through class/id selector). This leads, indeed, to the selectors such as:.my-awesome-framework-icons-alert { ... }The choice of the prefix is, by the way, important in order to avoid collisions. Popular libraries and frameworks can use small prefixes, knowing that websites that use them will adapt themselves. For instance, a website which uses AngularJS will probably not use ng- prefix for its custom elements. Small libraries, on the other hand, would be better using more esoteric names if they want to be easily integrated within existent projects.Containers, on the other hand, work well for app components. I don't want all the styles on my About page to be prefixed by about-page-. I would rather create an element <div id=about> and use that as a scope for the styles which are used on About page only.Using CSS preprocessors such as LESS, such code avoids much of the duplication compared to prefixes. I simply do:#about {    .contact { ... }    .map { ... }    ...}and let the preprocessor duplicate #about for every relevant style.