【訳】reactスタイルツールの紹介

reactスタイルワークは多くのものを持っており、本文はそれを4種類に分けてそれぞれ紹介し、日常プロジェクトの開発過程で選択と組み合わせて使用するのに便利である.
四種類のツール
類型一:方法論

BEM

SMACSS

OOCSS

SUITCSS

Atomic

方法論タイプのツールはcssの使用方法を指導し、標準規範に従うことで、よくある間違いを避けることができます.名前付きファイルやclassのアドバイスも提供されています.
例えばBEM BEMは、特殊なフォーマットのclass name:'block,element,modifier'を使用することを推奨します.BEMでは、ネストされたセレクタは使用しないことを推奨します.

// BEM says bad 
.form .button {
  background-color: blue;
}
 
// BEM says good! 
.form__button {
  background-color: blue;
}

タイプ2:前処理

SASS/SCSS

Less

Stylus

Myth

JSS

Pleeease

React-easy-style

cssプリプロセッサは、非css言語をcss言語に変換します.ほとんどのcssプリプロセッサの構文はcssと似ています.あるいは、その拡張です.プリプロセッサの目的は、より多くの特性の言語サポート、またはより読み取り可能、またはコードがより簡潔であることです.
例えばSCSS

/* input: scss */
$fur: orange;
.cat {
  background-color: $fur;
 
  .paws {
    color: white;
  }
}
 
/* output: css */
.cat {
  background-color: orange;
}
.cat .paws {
  color: white;
}

タイプ3:ポストプロセッサ
例えばAutoprefixer

/* input: no vendor prefixes */
.box {
  display: flex;
}

/* output: vendor prefixes added */
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

タイプ4:インラインスタイル補助

Radium

react-look

react-free-style

jsxstyle

reactcss

インラインスタイルの利点:

セレクタ

は不要

衝突回避

無依存順序

不要コード除去

表現力が強い

例えばradium

// import React from 'react';
// import ReactDOM from 'react-dom';
// import Radium from 'radium';

class Alert extends React.Component {
  getStyles() {
    const status = {
      notification: "#0074D9",
      success: "#27AE60",
      error: "#E74C3C"
    }

    return {
      alert: {
        position: "relative",
        width: "100%",
        padding: "5px",
        borderRadius: "3px",
        backgroundColor: status.notification,
        color: "white",
        textAlign: "center",
        fontFamily: "'Helvetica Neue', sans-serif",
        success: {
          backgroundColor: status.success
        },
        error: {
          backgroundColor: status.error
        }
      },
      closeButton: {
        position: "absolute",
        right: "10px",
        color: color(status[this.props.type]).lighten(0.2).hexString(),
        ":hover": {
          color: color(status[this.props.type]).lighten(0.5).hexString(),
          cursor: "pointer"
        }
      }
    };
  }
  render() {
    const styles = this.getStyles();
    const { type, message } = this.props;
    return (
      

        { message }
        ✕
      
    );
  }
}

Alert.defaultProps = { type: "notification" };

const Component = Radium(Alert);

ReactDOM.render(, mountNode);

参照リンク:how-to-style-react