模块化 css

[Riunshow]

模块化 css

规范

• 以一个典型的导航栏为例描述下应该如何使用 BEM 规范

  <nav role="navigation" aria-label="primary">
  <ul class="nav__list">
    <li class="nav__list__item">
      <a href="" class="nav__link"></a>
    </li>
    <li class="nav__list__item">
      <a href="" class="nav__link--active"></a>
    </li>
    <li class="nav__list__item">
      <a href="" class="nav__link"></a>
    </li>
  </ul>
  </nav>

• 我们编写的 CSS 样式如下所示：

  nav[role="navigation"] {
  }
  .nav {
  &__list {
    &__item {
    }
  }
  &__link {
    &--active {
    }
  }
  }

• 最后的输出结果

  nav[role="navigation"] {
  }
  .nav {
  }
  .nav__list {
  }
  .nav__list__item {
  }
  .nav__link {
  }
  .nav__link--active {
  }

预处理器

• 先上一段代码 less

  .opacity(@opacity: 100) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
  }
  
  .sidebar {
  .opacity(50);
  }

• 将上面代码编译成 css

  .sidebar {
  opacity: 0.5;
  filter: alpha(opacity=50);
  }

webpack 配合插件

• 用预处理器把less、sass转为css，然后再通过Autoprefixer给编译好的css加前缀。

  var autoprefixer = require('autoprefixer');
  
  module.exports = {
  module: {
    loaders: [
        {
            test:   /\.less$/,
            loader: "style-loader!css-loader!postcss-loader!less-loader"
        }
    ]
  },
  postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
  }