update

README.md

@@ -52,3 +52,6 @@ FineUI 100个问题题,带你走进FineUI的世界
 - [29、BI.Layers.create参数详解原理](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/29.BI.Layers.create参数详解原理.md)
 - [30、上对齐的横向布局](./questions/27.上对齐的横向布局.md)
 - [31、tab选项卡组件的logic属性实现动态高度](./questions/26.tab选项卡组件的logic属性实现动态高度.md)
+- [32、为什么FineUI中采用display:none隐藏组件](./questions/26.tab选项卡组件的logic属性实现动态高度.md)
+- [33、选中、hover样式的通用处理规则](./questions/26.tab选项卡组件的logic属性实现动态高度.md)
+- [34、如何独立控制组件文字和图标颜色](./questions/34.独立控制组件文字和图标颜色.md)

questions/33.选中、hover样式的通用处理规则.md

@@ -0,0 +1,111 @@
+# 选中、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
+```

questions/34.独立控制组件文字和图标颜色.md

@@ -0,0 +1,38 @@
+# 如何独立控制组件文字和图标颜色
+
+[选中、hover样式的通用处理规则](./33.选中、hover样式的通用处理规则.md)中通用效果的实现中包含了`color`样式的设置.
+
+对于一些图标+文字的节点,很多时候不需要在节点选中时候图标颜色也随之改变.
+
+![示例](../images/36.png)
+
+而我们的图标是用icon-font实现的,本质上也是一个文本.那么其颜色属性就会向上继承.如果父节点设置了颜色,那么子节点颜色也会随之改变.
+
+问题的本质是是CSS继承与优先级问题.对应到FineUI中,如果对图标指定`color`属性,那么图标的颜色优先级高于外部`.bi-list-item`等节点效果控制颜色.
+
+如果未指定`color`属性,那么图标颜色继承自父级,会随着各种节点选中效果变化.
+
+如何为图标指定颜色呢,FineUI中定义字体图标的`.font()`less方法,可以指定颜色.
+
+```less
+.font(@class, @content, @color: @color-bi-font-native) {
+  @fc: "\@{content}";
+  .@{class} {
+    & .b-font:before {
+      content: @fc;
+      color: @color;
+    }
+    &.disabled .b-font:before {
+      content: @fc;
+      color: @color;
+    }
+  }
+}
+```
+
+定义字体时注意事项
+
+1. 一般情况下,如果一个字体图标类名并不是用在特例场景,那么不要对其设置颜色,例如`delete-font, edit-font`等.否则会失去可复用性.
+
+2. 避免对`.b-font`类名施加样式规则来控制字体图标样式.这样副作用比较明显,影响范围不可控.
+