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 發布文章使用：只允許注冊用戶才可以訪問！

---