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 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---