Utilty Classes In CSS

Utilty Classes란 무엇인가?
2013
Basscss
Tachyons
2014
Beard
2015
turretcss
2017
Tailwind CSS
2018
stemCSS

다양한 현대 CSS Framework에서 추구하고 지향하는 CSS 개념이다.

더 좁은 의미로 해석하자면
Utility classes are self-descriptive, single-purpose CSS classes:

.flex {
  display: flex;
}

Developers use these functional classes to build without writing additional CSS because if the style is in the library, you can use it over and over and over…

<aside class="`flex` flex-column bg-black">
  <div class="`flex` align-center justify-center">
    <img src="#" />
  </div>

  <div class="`flex` flex-column">
    <h1>Jamie Thrift</h1>
    <p class="`flex` align-center"> //look at the 'flex'
      <svg>…</svg>
      Head of HR
    </p>
  </div>
</aside>

The classes tell us exactly what they do, so developers can visualize how these elements will be laid out instead of needing to scan through the underlying CSS.

위 모든 비슷한 Framework들이 위와 같은 컨셉을 지니고 있다. 직관적이고, 자기 설명적이고, 한글자혹은 한줄로 하나의 기능을 하는 아주 간단 명료한 utlity classes 들을 만들고 사용하며 이것을 fundemental concept으로 가지고 만든 framework들이 Tailwind같은 위 FrameWork 들이다.

참고: https://blog.logrocket.com/css-utility-classes-library-extendable-styles/
https://tailwindcss.com/docs/utility-first
https://tailwindcss.com/docs/functions-and-directives#apply
Chat GPT