만약에 Tailwind CSS와 자신의 CSS를 섞어서 지옥을 봤다면.

개시하다

안녕하세요.나는 앞부분을 축으로 하는 엔지니어로 석환이라고 부른다.
최근에는 유틸리티 클래스인'Tailwind CSS(이하 Tailwind)'를 많이 준비해 왔다는 말을 자주 듣는다.
이 실용 프로그램 우선 프레임워크의 등장으로 개발이 쉬워졌다.
하지만 "CSS 디자인 안 해도 된다"는 말은 드물어요. 정말인가요...
(어쩌면 내가 위아래 문장을 날려버렸을지도 몰라)
확실히 이름 때문에 골치 아픈 부분도 있지만 어느 정도 규칙화가 필요하다.
이 기사에서 "Tailwind를 사용하면 CSS 디자인을 하지 않아도 좋아지지 않는다"는 말이 전해졌으면 좋겠습니다.😇
CSS 디자인이 중요하구나, (개인적인 의견)
※ CSS 디자인과 기법은 이 글에서 언급하지 않습니다.

보는 지옥1: 맞힌 선택기의 호출원은 알기 어렵다

Tailwind를 사용할 때'어떤 규칙으로 Tailwind를 사용합니까'를 정의하지 않고 발차 전에 인코딩합니다
어떤 곳은 템플릿 옆에 Tailwind 반이 있어요.
자기 스타일에 맞는 곳이 있어요.
어느 곳이 talilwind 반인 줄 알았는데 자기가 쓴 CSS라니...상당히 혼란스럽다.
이 같은 문제는 디버깅을 할 때도 혼란스러울 수 있는데 도대체 어떤 스타일을 고쳐야 하는지.

※ 패딩은tailwind의class, 나머지는 자신
https://codepen.io/thugumi-ishimaru/pen/ZEBGLxq

<template>
  <button class="c-button px-6 py-2 text-white">Button</button>
</template>

----略----

<style lang="scss" scoped>
.c-button {
  background: #1D4Ed8;
  border-radius: 8px;
  line-height: 1.5;
  @apply font-bold;
}
</style>

@apply에 기술된 부분도 있고tailwind를 추가한 반도 있고 자신의 css를 사용한 곳도 있어 혼돈감을 느낀다.

반성점

아래와 같이 "tailwind를 사용하는 선택기는 바로 이것이다", "구성 요소에 class명을 부여한 다음에 선택기는 @apply문법으로 정리된다"등 잘 규칙화하면 된다.
구성 요소 이름을 파일 이름에 의뢰하고tailwind에class 모드만 추가합니다

// CButton.vue

<template>
  <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>
</template>

----略----
<style lang="scss" scoped>
</style>

class명은 자기가 지었고 모든 @apply 문법 총결 유형

// CButton.vue

<template>
  <button class="c-button">Button</button>
</template>

----略----
<style lang="scss" scoped>
.c-button {
  @apply mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg;
}
</style>

다른 방법이 있을 것 같은데 잘 설계해 주세요.

보이는 지옥의 2: 디자인이 바뀌었을 때 HTML 쪽으로 변경된 것은 지옥이다

tailwind는 실용성을 우선시하는 사상이 있기 때문에class명의 이름을 위해 고민하는 시간이 줄었다!
그러나 위에서 설명한 대로 HTML에 기술된 class의 양은 매우 많다.
따라서 설계가 변경된 상황에서 HTML 면으로의 변경이 많아졌습니다.
예를 들어 다음과 같이 정의margin-right: 20px.mr-512px로 변경해 주십시오. .mr-5 를 모두 .mr-3 로 변경해야 합니다.
또 .mr-5는 다른 곳에서도 사용될 수 있기 때문에 간단하게 한꺼번에 교체하면 번거롭다.

  <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>
    <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>
    <button class="mr-5 bg-blue-700 text-white border border-blue-700 font-bold py-2 px-6 rounded-lg">
  Button
  </button>

상술한 것은 단추의 예일 뿐이지만 이것이 상당히 큰 템플릿이라면 영향 범위가 넓고 지옥이다.

반성점

상기 처리 방법으로 반복되지만 각 구성 요소에 클래스 이름@apply을 붙여 한데 모인다
전체 디자인을 보고 나는 공통된 부분이 모범화되어야 한다고 반성하고 있다.
다음부터 틀을 짜자~ 나~~~~

끝말

쉽게 말하면'규칙을 제대로 지키지 않으면 혼란이 된다'는 것이다.
tailwind 자체가 매우 편리하고 좋은 프레임입니다.
지금까지 없던 실용성 우선 사상으로'정리와 공통화는 미룰 수 있다'는 목표도 좋았다.
상술한 사상에 의하면 공동화해야 하는가, 아니면 여기서만 사용하는 구성 요소로 미리 정의해야 하는가...구성 요소 이름을 지을 때마다 고민하는 시간을 줄일 수 있을 것 같아.
이 기사는 Tailwind CSS를 부정하지는 않았고, 사용하더라도 CSS 디자인과 규칙화가 어느 정도 이뤄지지 않으면 난장판이 되고 이후 활용이 어려워질 수 있다는 메시지를 전달할 수 있다면 좋겠다.
나 자신도 부족한 점이 많지만, 현재의 나 자신은'이렇게 생각한다'고 썼다.
테일윈드와 사이가 좋아졌다면 이런 지옥을 보지 못했겠지.
이상!