CSS Architecture & CSS Design Patterns

CSS Architecture & CSS Design Patterns

CSS Architecture & CSS Design Patterns

BEM

Block, Element, Modifier

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

OOCSS

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

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

SMACSS

Base（基础）

Layout（布局）

Modules（模块）

State（状态）

Theme（主题）

Enduring CSS

​​https://ecss.io/preface.html​​

---

React

1. CSS Modules

2. CSS in JS

3. 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>
);

SCSS

CSS 3

1. var

2. themes/ skins (dark mode)

---

CSS 选择器的性能优化

CSS选择器从右到左匹配的机制，只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或不匹配而退出;

把​​最右边选择符​​称为​​关键选择器​​

xgqfrms