CSS Architecture & CSS Design Patterns

Block, Element, Modifier

https://en.bem.info/methodology/quick-start/

Separate structure and skin（分离结构和主题）

Separate container and content（分离容器和内容）

Base（基础）

Layout（布局）

Modules（模块）

State（状态）

Theme（主题）

https://ecss.io/preface.html

React

CSS Modules
CSS in JS
styled-components

demo

https://codepen.io/xgqfrms/pen/LYGeYGo?editors=0010

https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.2.1/styled-components.js

https://styled-components.com/

import styled from 'styled-components';

const Button = styled.button``;

// This Button variable here is now a React component that you can use like any other React component!


const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;
const Container = styled.div`
  text-align: center;
`
render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);