# 选中、hover样式的通用处理规则

FineUI中内置了许多常用的样式规则 `.bi-border .bi-background .bi-list-item-active`等等.

充分践行了[Atomic CSS-in-JS](https://juejin.cn/post/6917073600474415117)原子化js原则,及每个CSS类都对应一个唯一的样式规则.

## 原子CSS有什么好处

1. 以约定的形式使编写代码更加方便快捷
2. 避免样式文件过度臃肿,重复书写无尽的重复样式规则
3. 利于统一风格切换,例如我们仅需修改`.bi-list-item-active`规则即可将产品中所有应用了节点选中效果的节点同步切换

## 如何利用FineUI在不同业务线中创建自己的原子CSS,实现统一的节点选中效果

我们先看一下预定义的`.bi-list-item-active`是如何实现的

```less
.bi-list-item-active {
  &:hover, &.hover {
    color: @color-bi-text-black;
    & .bi-input {
      color: @color-bi-text-black;
    }
    & .bi-textarea {
      color: @color-bi-text-black;
    }
    .background-color(@color-bi-background-highlight, 10%);
  }
  &.active {
    color: @color-bi-text-highlight;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
  }
  &.disabled {
    &, &:hover, &:active {
      background-color: transparent !important;
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}
```

FineUI中BasicButton的通用特性,其被选中时候会在相应DOM节点上添加`.active`类名,所以采用用`&.active`方式控制选中效果
采用`&:hover`处理鼠标悬浮效果.

同理,FineUI中组件被禁用的时候会在相应DOM上添加`.disabled`类名.

也许有人会好奇,为什么要刻意对`.bi-input`和`.bi-textarea`添加了样式规则呢,这是因为input和textarea标签的样式是不继承的.只有将样式规则设定到对应DOM上才生效

动手实践一个效果. 鼠标悬浮时背景和边框高亮,选中时背景和文字高亮

```less
.bi-list-item-select2 {
  &:hover {
    
    &.bi-border {
      border-color: @color-bi-border-highlight;
    }

    background-color: @color-bi-background-highlight;
  }

  &.active {
    color: @color-bi-text;

    & .bi-input {
      color: @color-bi-text;
    }

    & .bi-textarea {
      color: @color-bi-text;
    }

    background-color: @color-bi-background-highlight;
  }
  //  disabled 省略
}
```

## 什么情况下我需要自定义原子CSS类名呢
在开发实践中,如果某个样式效果是产品层面通用的,不止一个地方使用,或此样式效果要支持动态主题变化的时候,
我们需要定义一个通用的CSS类名,例如FineBI中定义了若干种样式规则
```text
// 文字颜色
bi-primary-text
bi-secondary-text

// 分割线
bi-split
bi-dark-split

//  节点
bi-list-item-text
bi-list-item-text2
bi-list-item-text-transparent
bi-list-item-text-transparent2
bi-list-item-text-light
```