실용 우선 CSS가 유행이에요.

스타일 소개
웹 사이트를 만들 때 HTML을 디자인하려고 합니다.HTML 요소에서 인라인 스타일을 사용할 수 있습니다.

<article style="background-color: purple; text-align:center; width: 750px;">
    <h1 style="color: red; font-weight: bold; font-size: 72px;">Inline Style Header</h1>
    <p style="color: green;">I am styling this html with inline styles.</p>
    <a href="#" style="color: blue;">I am styling this html with inline styles.</p>
</article>

다행이다. 지금 우리 HTML에 스타일이 좀 생겼어.내연 양식은 이 정도는 할 수 있지만 곧 관리하기 어려운 것으로 발전할 것이다.아직 몇 가지 문제가 있다.750px 미만의 장치에서 이 사이트를 열면, 웹 페이지가 너무 넓습니다.앵커 태그에 대해 다른 서스펜스 스타일을 생성할 수도 없습니다.

구출 작전
CSS(Cascading Style Sheet)는 더 많은 기능을 추가하고 스타일을 단순화합니다.그것은 하나의 클래스 이름 아래 스타일 목록을 조합하는 능력을 가져왔다.

<style>
  .article-container {
    background-color: purple;
    text-align:center;
    width: 750px;
  }
  .article-header {
    color: red;
    font-weight: bold;
    font-size: 72px;
  }
  .article-body {
    color: green;
  }
  .article-link {
    color: blue;
  }
  .article-link:hover {
    color: grey;
  }
  @media only screen and (max-width: 500px) {
  /* For mobile phones: */
  .article-container {
    width: 100%;
  }
}
</style>
<article class="article-container">
    <h1 class="article-header">Inline Style Header</h1>
    <p class="article-body">I am styling this html with inline styles.</p>
    <a href="#" class="article-link">I am styling this html with inline styles.</p>
</article>

CSS 클래스의 장점 중 하나는 여러 요소에 걸쳐 스타일을 공유할 수 있다는 것입니다.클래스 아래의 스타일을 변경하면 클래스를 사용하는 모든 엔티티에 영향을 줍니다.위류:hover,focus,active 등 요소의 스타일을 설정하는 새로운 방법도 추가했습니다.위조류는 원소의 상태에 따라 원소에 서로 다른 스타일을 사용할 수 있다.CSS는 미디어 쿼리를 사용하는 응답식 디자인도 도입해 여러 장치에서 더 좋은 디자인 체험을 할 수 있도록 했다.

CSS의 공통 트랩
CSS는 좋은 점이 많지만 문제가 있습니다.프로젝트가 끊임없이 증가함에 따라, 당신은 점점 더 많은 양식을 추가하기 시작합니다.스타일시트는 여러 요소나 구성 요소 공유 클래스에 걸쳐 빠르게 복잡해질 수 있습니다.클래스를 변경했다면, 변경이 얼마나 많은 구성 요소에 영향을 미칠지 말하기 어려울 것입니다.이런 상황이 발생할 때, 당신은 비교적 적은 종류와 더 전문적인 종류를 공유하기 시작합니다.현재, 당신은 불필요한 양식이 양식표의 증가를 초래할 수 있다는 문제에 부딪혔습니다.이것은 불러오는 시간을 증가시키고 스타일시트의 모든 코드를 이해하기 어려울 것입니다.

유틸리티 우선 CSS 소개
좀 더 깨끗한 내연 스타일은 CSS의 모든 기능을 가지고 있다고 상상해 보세요.이것이 바로 실용 제1 CSS의 본질이다.당신의 CSS 프레임워크는 원자 CSS 클래스로 만들어졌습니다.생성된 모든 클래스는 하나의 스타일을 추가하고, 당신이 필요로 하는 모든 종류는 하나의 클래스를 가지고 있습니다.

<style>
  .bg-purple {
    background-color: purple;
  }
  .text-center {
    text-align:center;
  }
  .w-50 {
    width: 50%;
  }
  .text-red {
    color: red;
  }
  .font-bold {
    font-weight: bold;
  }
  .font-large {
    font-size: 72px;
  }
  .text-green {
    color: green;
  }
  .text-blue {
    color: blue;
  }
  .hover-text-grey:hover {
    color: grey;
  }
  @media only screen and (max-width: 500px) {
  /* For mobile phones: */
  .mobile-w-100 {
    width: 100%;
  }
}
</style>
<article class="bg-purple text-center w-50 mobile-w-100">
    <h1 class="text-red font-bold font-large">Inline Style Header</h1>
    <p class="text-green">I am styling this html with inline styles.</p>
    <a href="#" class="text-blue hover-text-grey">I am styling this html with inline styles.</p>
</article>

예제에서 보듯이 모든 CSS 클래스는 스타일을 담당합니다.일단 유틸리티 우선 프레임워크가 생기면 맞춤형 CSS를 작성할 필요가 거의 없다.이것은 당신의 CSS가 더 이상 성장하지 않을 것이며, 당신은 CSS를 고려하지 않고 디자인 요소의 스타일에 전념할 수 있다는 것을 의미한다.HTML 유지 관리는 CSS 클래스 유지 관리보다 훨씬 쉽습니다.

제안된 프레임
유틸리티 우선 CSS 프레임워크를 찾고 있는 경우 두 가지 옵션이 있습니다.Bootstrap 상당히 많은 실용 프로그램 종류가 있지만 주로 미리 정의된 구성 요소에 주목한다.추천합니다Tailwind CSS.순풍은 먼저 전체 기능으로 발전하여 끊임없이 개선되고 있다.그들의 문서는 쉽게 이해할 수 있고 창작자는tailwind를 이용하여 웹 사이트full tutorial를 만들었다.

Tailwind CSS 설치
tailwind를 설치하려면 documentation를 보시는 것을 권장합니다.NPM 프로젝트 설정이 필요합니다. 그러면 NPM 패키지를 사용할 수 있습니다.

# Using npm
npm install tailwindcss

Tailwind 명령을 CSS에 추가해야 합니다.

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

만약tailwind 프레임워크에 맞춤형 설정을 추가하려면 사용해야 합니다

npx tailwindcss init

이것은 사용자 정의 스타일을 수정하고 확장하며 설정할 수 있는 tailwind.config.js 파일을 생성합니다.
이제 CSS를 컴파일할 때 Tailwind CLI 또는 postss CLI를 사용할 수 있습니다.Tailwind CLI 명령은 간단하지만 postss의 몇 가지 추가 이점이 없습니다.

# CLI
npx tailwindcss build styles.css -o output.css

POSTSS의 경우 설치autoprefixer 및 postcss-cli

npm i postcss-cli autoprefixer

다음으로 생성postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ],
};

HTML에서 사용할 수 있도록postss를 실행하여 CSS를 컴파일할 수 있습니다

postcss styles.css -o styles.compiled.css

결론
나는 유틸리티 우선 CSS를 사용하는 것을 매우 좋아한다.나는 지금까지 CSS를 쓰는 것을 좋아하지 않았다.유명은 관리하기 어려울 뿐만 아니라, 그것들을 어떻게 불러야 할지 고민하는 데 시간이 걸린다.나는 어떤 스타일이 나의 HTML 요소에 적용되는지 똑똑히 볼 수 있으며, 그것들은 하나의 클래스 이름 뒤에 숨겨지지 않는다.순풍 CSS가 이렇게 빠르게 유행하는 데는 이유가 있다고 생각합니다.당신은 먼저 실용 프로그램을 사용할 줄 압니까?

파일 Tailwind CSS

기술, 프로그래밍, 재택근무에 관한 댓글을 랜덤으로 올려주세요.