더 나은 CSS를 작성하는 3가지 방법

CSS는 작성하기 귀찮고 최적화하기 어려울 수 있지만 이 기사에서는 더 좋고 깔끔한 CSS를 작성하는 다양한 방법을 살펴보겠습니다.

1. CSS 컴포넌트 프레임워크(Bootstrap, Materialize CSS)

CSS 구성 요소 프레임워크는 버튼, 카드, 드롭다운 등을 처리하기 위해 미리 작성된 클래스 모음입니다. 예를 들어 Boostrap, MaterlizeCSS, Foundation 등이 있습니다. 이것의 주요 이점은 많은 구성 요소에 액세스할 수 있다는 것입니다. 맞춤 CSS가 거의 필요하지 않을 수 있습니다. 기능을 목적으로 하는 강력한 앱을 만들고 사용자 정의 CSS를 작성할 시간이 없는 사람들에게 유용합니다. 가장 큰 단점은 사용자 지정 CSS를 작성하는 유연성을 실제로 제공하지 않는다는 것입니다.

컴포넌트 프레임워크로 버튼 만들기

<button class='btn blue'>Click me</button>

2. CSS 유틸리티 프레임워크(tailwindcss)

CSS 유틸리티 프레임워크는 여러 하위 수준 클래스(예:

.text-2xl
) 버튼, 카드, 드롭다운 등과 같은 사용자 지정 구성 요소를 구축할 수 있게 해주는 인기 있는 예는 tailwindcss입니다. tailwindcss의 주요 장점은 저수준 클래스를 결합하여 사용자 지정 UI를 구축할 수 있고 디자인 사양이 있다는 것입니다. 당신을 도울 수 있는 vs 코드 확장이 있기 때문에 누가 그 클래스를 기억할 시간이 있는지 생각할 수 있습니다. tailwindcss의 주요 단점은 사용자 지정 구성 요소를 빌드하는 데 시간이 걸리고 tailwind 설정이 번거롭다는 것입니다.

유틸리티 프레임워크로 버튼 만들기

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Button
</button>

3. CSS 전처리기(Sass)

CSS Preprocessor는 스타일을 다른 언어로 작성하고 CSS로 변환할 수 있는 프로그램입니다. 이에 대한 인기 있는 예는 Sass/Scss입니다. sass를 사용하면 스타일을 중첩하여 함수, 루프 등을 수행할 수 있습니다. sass의 주요 이점은 보다 안정적이고 강력하며 견고한 CSS 상위 집합을 제공한다는 것입니다. 가장 큰 단점은 코드를 준수해야 하고 디버깅하기가 약간 어렵다는 것입니다.

CSS 전처리기로 버튼 만들기(Sass)

   /*mixins are like  functions*/
@mixin button-bg($bg) {
   /* takes and argument $bg*/
 background: $bg;

 color:white;
 text-decoration:none;
 padding:5px 10px;
 border-radius:3px;
 font-family: 'Poiret One', cursive;
 font-size:2em;
   /*hover state */
  &:hover {
    background:darken($bg,8%);
    transition: all 0.3s ease;
  }
  /* active state */
  &:active {
    background:darken($bg,25%);
  } 
}

.btn-green {
   @include button-bg(#2ecc71);

}

결론적으로

맞춤 CSS를 작성할 시간이 없는 사람들을 위해 구성 요소 프레임워크를 추천합니다. 맞춤형 UI와 디자인 사양을 구축하려는 사람에게는 유틸리티 프레임워크를 추천하고, CSS 작성을 좋아하지만 몇 가지 추가 기능을 원하는 사람에게는 전처리기를 추천합니다. 이것들은 CSS를 다루는 몇 가지 방법입니다. 다른 방법을 놓친 경우 댓글 섹션에서 알려주십시오. 읽어주셔서 감사합니다, 다음에 또 뵙겠습니다, 평화.