Namespacing Bootstrap 3 classes with prefix

Question

I'm wondering what's the best way to namespacing bootstrap 3 CSS classes using a prefix.

This question isn't just about namespacing bootstrap so it applies only in a specific container (see here: How to namespace Twitter Bootstrap so styles don't conflict), but to litterally change all generated CSS classes using a predefined prefix.

I started to add the prefix pl- in the LESS files almost everywhere, but I must be missing some things because I break some part of the styling. So I'm looking for a smarter solution...

For instance, the .alert class in alerts.less must become .pl-alert.

The point of doing this is that I'm writing a plugin which can be used by other people (included in their website) and I must avoid that they override my styles by mistake (they probably have a .alert class which would be merged with mine and making a mess), so I want to avoid that by using a specific prefix.

This approach is probably flawed in that Bootstrap applies some styles to generic selectors, such as `*`, `p`, etc. — isherwood, May 12 '15 at 16:49
Also, namespacing probably would prevent most overrides since a specific-class descendant selector has greater specificity. Only the most assertive of CSS statements (those containing `!important`, for example) would override. — isherwood, May 12 '15 at 16:51
@isherwood Yes, a specific-class descendant has a greater prority, but it would merge properties as well. I would override (I guess, if my script is loaded after or is more specific) if there are conflicts, but it would merge properties anyway, which is what I want to avoid, at least avoid it by mistake. Indeed Bootstrap applies styling to generic selectors, like `body`, `p` and so on, that's why I want to apply such prefix only to class names. — Vadorequest, May 12 '15 at 17:49

score 0 · Answer 1 · answered Dec 02 '15 at 20:35

I have been having the same issue and looking for some suggestions... I've found that the best way for me would be to have a namespace.less file in my bootstrap node project.

.namespace {
    @import (less) "../dist/css/bootstrap.css";
}

In my Gruntfile, I would create a task to compile another distribution. Something like this:

less: {
      compileCore: {
        options: {
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        src: 'less/bootstrap.less',
        dest: 'dist/css/<%= pkg.name %>.css'
      },
      compileTheme: {
        options: {
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>-theme.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
        },
        src: 'less/theme.less',
        dest: 'dist/css/<%= pkg.name %>-theme.css'
      },
      **compileNamespace: {
        options: {
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        src: 'less/namespace.less',
        dest: 'dist/css/ml.<%= pkg.name %>.css'
      },** 
...

But there is some cleaning up I'd need to do afterwards. Specifically all the styles created by normalize.less and scaffolding.less.

I would create I grunt task using RegExp to replace the styles that start with .namespace html to be just html and the ones that start with .namespace body to be body.namespace

Then in my HTML markup, I'd just add the namespace class to the body tag.

What I did in the end was to load all Bootstrap Less files using @import inside the namespace indeed. But not the same way, I did it like this: `.ns- {@import 'bootstrap-file1.less' ...}` I believe I changed all imported files as well, adding a `&` , maybe not, i don't recall exactly, but the idea was not to have twice the same CSS class, all my bootstrap classes were prefixed with .ns- — Vadorequest, Dec 03 '15 at 09:04

Namespacing Bootstrap 3 classes with prefix

1 Answers1