css - 带前缀的命名空间 Bootstrap 3 类

Question

我想知道使用前缀命名空间 Bootstrap 3 CSS 类的最佳方法是什么。

这个问题不仅仅是关于命名空间 Bootstrap ，因此它仅适用于特定容器(参见此处:How to namespace Twitter Bootstrap so styles don't conflict)，而是使用预定义的前缀随意更改所有生成的 CSS 类。

我开始添加前缀 pl-在几乎所有地方的 LESS 文件中，但我必须遗漏一些东西，因为我破坏了样式的某些部分。所以我正在寻找一个更聪明的解决方案......

例如，.alert类(class) alerts.less必须变成 .pl-alert .

这样做的目的是我正在编写一个可供其他人使用的插件(包含在他们的网站中)，我必须避免他们错误地覆盖我的样式(他们可能有一个 .alert 将被合并的类与我的并弄得一团糟)，所以我想通过使用特定的前缀来避免这种情况。

Answer 1

我一直有同样的问题并寻找一些建议......我发现对我来说最好的方法是在我的 Bootstrap 节点元素中有一个 namespace.less 文件。

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

在我的 Gruntfile 中，我会创建一个任务来编译另一个发行版。像这样的东西:

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'
      },** 
...

但是之后我需要做一些清理工作。特别是由 normalize.less 和 scaffolding.less 创建的所有样式。

我将使用 RegExp 创建 I grunt 任务来替换以 .namespace html 开头的样式只是 html以及以 .namespace body 开头的那些成为 body.namespace
然后在我的 HTML 标记中，我只需将命名空间类添加到 body 标记。