《深刻react技術棧》之樣式處理

基本樣式設置

像素單位處理

對於樣式中的與大小相關的值，react進行了優化處理，咱們直接使用數字便可，不用寫px單位。

let style = {
	width: 18
}
複製代碼

classname庫

在咱們不使用庫以前，須要本身動態拼接classname的字符串。源文件也很是簡單，其下載量也說明其使用頻率比較高，參考源碼：連接

render(){
	const {isPressed, isActive} = this.state;
	let btnClass = 'btn';
  if(isPressed){btnClass +='pressed' };
  if(isActive){btnClass +='active' };
 
} 

// 有了以後 
import classNames from 'classNames';
render(){
	const {isPressed, isActive} = this.state;
	let btnClass = {
  	'btn':true,
    'pressed':isPressed,
    'isActive':isActive
  }
} 

複製代碼

基本api以下：

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// 數組的支持
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
複製代碼

css modules

能夠採起的方案

css模塊化的方案主要有兩種，分別爲行內樣式以及結合js收集依賴進行管理的css modules。

而行內樣式具備明顯的幾個痛點是不能解決的，好比僞元素、動畫、媒體查詢等，因此實際開發中，咱們只有一些簡單的樣式處理纔會使用行內樣式，總體的樣式方案並不會使用行內樣式。

結合js收集css依賴，能夠很方便的進行管理，並且webpack內置的css-loader能夠很好地將樣式以及js拆分出來。

面臨的主要問題

全局樣式污染

咱們默認的樣式選擇器是基於全局的，會形成全局樣式污染，爲了覆蓋樣式，咱們就須要使用！important這樣的語句來覆蓋。固然咱們也可使用組件內樣式，但這樣會致使外部沒法重寫樣式，損失了靈活性。

命令混亂

也是因爲全局命名的規則，因爲各個成員的命名規則不統一，致使樣式名稱混亂。

依賴管理不完全

大多數開發者對於依賴管理不夠完全，只是關心全局樣式是否可用，不可用則直接重寫或者覆蓋。

沒法共享變量

不一樣的樣式文件中，沒法共享一些變量。

代碼壓縮不完全

使用css-module

開啓模塊化

在webpack.config.js中設置css?modules&localIdentName=[name]_[local]-[hash-base64-5].加上以後，咱們在引入樣式時就能夠實現樣式的重命名，也能夠方便的引入和控制某部分樣式。好比：

// button.css
.normal{}
.disabled{}
複製代碼

import styles from './button.css';

render(){
	return <button className={styles.normal}/> } // 最終生成的css名稱 ，button-normal-abc456 複製代碼

經過這樣的模塊化，解決的問題：

• 樣式名衝突或者樣式名的全局污染
• 方便自定義樣式名規則，能夠簡化樣式名
• 只須要關心js，引入了js組件便引入了js以及樣式
• 不須要學習額外的css規則

默認局部樣式

在上面開啓模塊化以後，默認是局部樣式，也就是加了：local的，若是你但願定義的樣式是全局樣式，你須要手動的加：global

組合樣式 compose（不建議）

你可使用compose來組合也就是複用樣式。固然若是你使用的是其餘樣式預處理器，其自己具備很靈活的各類樣式處理規則，能夠忽略這點，另一半樣式預處理器也沒有這條語法，請不要使用。

// button.css
.base{}
.active{
	compose:base;
  
}
複製代碼

樣式命名規則基於BEM

結合react

• 若是你不想每次都加styles.,可使用react-css-modules,它使用高級組件的方式避免重複輸入styles
• 使用模塊化時，若是你想使用全局的這個樣式，能夠不用樣式里加，直接在使用的時候加global-css便可，若是是局部樣式，使用local-module.
• react使用className的方式與傳統方式的區別是，直接操做樣式仍是間接經過操做classname來操做樣式。實際上，在資深的css開發者都會認爲，爲了樣式更好的維護，咱們是建議直接操做樣式的，而不建議在js裏拼接維護較多的樣式代碼。

小結

本文主要想提醒給你們的幾個點：

• 與大小有關係的樣式屬性不用加單位
• 更建議直接經過classname去實現操做樣式，經過對象的方式去配置，而不是本身拼接或者使用原始的classlist去操做
• 若是你的項目存在較多的樣式污染或者管理樣式依賴的問題，那麼建議你能夠看下css module，也許能解決你的問題，使用也只是配置的問題，不須要額外的其餘學習