본문 바로가기
CSS

[CSS] Rethinking CSS

by F.E.D 2019. 1. 31.

[CSS] Rethinking CSS

1. Atomic CSS

Atomic CSS의 생각은 간단합니다.
일반적으로 사용되는 라인에 대한 CSS 클래스를 만들면 수백만 개의 클래스가 생기고 HTML 마크업이 조금 더 길어집니다.

<p class="padding-small margin-big color-red">I am a p tag! How cool is that? :)</p>
1
2
3
.padding-small { padding: 10px; }
.margin-big { margin: 20px; }
.color-red { color: red }

cs


2. Object-Oriented(객체지향) CSS

SASS와 LESS 같은 객체지향적으로 접근하는 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.card {
  {
    color: #333;
    padding: 20px;
    background-color: white;
  }
  .title {
    font-size: 24px;
    margin: 10px;
  }
  .body {
    ...
  }
}
cs

3. OOCSS + Atomic

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.padding-big { padding: 20px; }
.margin-small { margin: 10px; }
.card {
  {
    padding-big;
    color: #333;
    background-color: white;
  }
  .title {
    margin-small;
    font-size: 24px;
  }
  .body {
    ...
  }
}
 
cs


4. Web components + CSS

1
2
3
4
<card>
  <title>I am an awesome CARD! :)</title>
  <body>...</body>
</card>
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
card {
  {
    color: #333;
    padding: 20px;
    background-color: white;
  }
  title {
    font-size: 24px;
    margin: 10px;
  }
  body {
    ...
  }
}
cs


출처 : https://dev.to/leonorader/rethinking-css-3508

저작자표시

'CSS' 카테고리의 다른 글

Css 선택자. 어떤 걸 써야 더 성능이 좋을까?  (0) 2020.02.15
Bootstrap5 새소식(큰 변화 4가지)  (6) 2019.12.22
[Canvas] 버튼 Particle 이펙트  (0) 2019.01.30
[Reflow] Reflow 최소화  (0) 2019.01.29
Will-Change  (0) 2019.01.22

관련글

댓글

티스토리툴바