css 命名：BEM, scoped css, css modules 与 css-in-js详解

当我们构建网站或应用程序时，CSS样式通常是一个必不可少的部分，而CSS命名则让样式代码更有条理和易于维护。本文将会介绍三种常见的CSS命名方式：BEM，Scoped CSS，CSS Modules和CSS-in-JS。让我们一一介绍它们之间的不同。

BEM 命名

BEM （块、元素、修饰符）是命名约定的一种流行方式，向一起工作的开发人员提供可维护的、可重用的和具有意义的类名称。BEM将CSS类名分为块、元素和修饰器三个概念。它利用嵌套，CSS选择器和修饰符来降低选择器特异性，从而使样式更具灵活性。

例如，我们可以用BEM命名规范编写以下代码：

<div class="card card--featured">
  <div class="card__title">Featured Card</div>
</div>

在此示例中，card表示块名，title表示元素名，而修饰符是featured。我们可以使用card块的样式作为title元素的样式的基础样式，而在需要加一些修饰符时，我们只需要在card块中添加对应的修饰符即可。

Scoped CSS 命名

Scoped CSS是一种通过为每个组件添加唯一的类名或ID来解决CSS样式冲突的方法。这种方法通过在组件的“外壳”中定义CSS样式，并将其限制在组件的范围内，可以避免全局CSS样式与其他组件之间发生冲突和影响。

例如，在Vue.js或React中，我们可以使用以下方式定义组件：

<template>
  <div class="container">
    <p class="text">Hello, world!</p>
  </div>
</template>

<style scoped>
.container {
  background-color: #ededed;
  padding: 20px;
}

.text {
  font-size: 18px;
}
</style>

在此示例中，scoped属性指定该组件内部所有CSS样式仅适用于该组件，并且容器和文本元素将被限制为Hello, world的范围。

CSS Modules 命名

CSS模块是一种使用Webpack等构建工具的方式，它将CSS文件编译为本地模块，为每个模块分配唯一的类名，并且只可供模块内部使用。CSS模块避免了全局命名空间的污染，使得每个模块的CSS感觉更独立。

例如，在React中，我们可以使用以下方式定义CSS Module的样式：

/* style.module.css */
.container {
  background-color: #ededed;
  padding: 20px;
}

.text {
  font-size: 18px;
}

import styles from './style.module.css';

function MyComponent() {
  return (
    <div className={styles.container}>
      <p className={styles.text}>Hello, world!</p>
    </div>
  );
}

在此示例中，我们使用import关键字导入CSS模块并使用styles对象，该对象包含分配给.container和.text选择器的唯一类名。

CSS-in-JS 命名

CSS-in-JS是一种将CSS作为JavaScript模块处理的技术，它使用JSX语法和JavaScript对象来表示CSS样式，这使得样式的定义更具声明性和可重用性。它是一种直接在JavaScript中定义CSS的非常不同的思路，一提到CSS-in-JS，第一个想到的库当然是styled-components。

例如，在React组件中，我们可以使用以下方式定义CSS：

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'red' : 'white'};
  color: ${props => props.primary ? 'white' : 'red'};
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 4px;
`;

function MyComponent() {
  return (
    <div>
      <Button primary>Primary button</Button>
      <Button>Secondary button</Button>
    </div>
  );
}

在此示例中，我们使用了styled-components库，通过JSX定义了Button组件的样式，而且可以根据组件的的props来动态改变样式。

以上就是本文介绍的CSS命名方式的详细说明。需要注意的是，每种命名方式都有其自身的优缺点，根据具体的场景选择适当的命名方式，可以使我们更好的管理CSS代码，提高开发效率。