ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [CSS] Rethinking CSS
      CSS 2019. 1. 31. 22:33

      [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

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바