순풍css: 경외감과 괴로움의

"오, 다행이다. 또 하나의 CSS 프레임워크다. 내가 처음부터 모든 CSS를 쓰기 시작했을 때 누가 하나를 더 필요로 하겠는가?"
한 동료가 나에게 순풍에 따라 계산하라고 건의했을 때, 이것은 내 머릿속에 번쩍이는 첫 번째 생각이었다.
어쨌든, 나는 줄곧 자신의 CSS를 작성하고 있기 때문에, 격자를 유도할 필요가 없고, 게다가 나는 이미 Styled Components를 장악했다.그러나 나는 새로운 항목에서 그것을 보기로 결정했는데, 결과적으로 나는 그것을 매우 좋아했다.
내가 순풍기를 사용하기 시작한 지 이미 3개월이 되었다.css는 제 프로젝트에 있습니다.분명히, 만약 내가 이렇게 오래 견지한다면, 나는 틀림없이 그것의 가치를 보았을 것이다. 그러나 약간의 통증도 있다.
다음은 아주 좋은 부분들, 그리고 내가 그것을 사용할 때 발견한 단점들입니다.

좋은 소스. - 뭐가 좋아.

애매모호한 유명을 줄이다
Tailwind는 애매모호한 클래스에 대한 수요를 없애는 데 도움이 된다. 예를 들어 paragraph-container.Tailwind는 클래스를 위해 명확한 성명 생명명을 사용하기 때문에 당신이 본 것은 당신이 얻은 것입니다.나의 css를 돌이켜보면 css가 실제 클래스에 응용된 내용을 이해하기 위해 시간이 많이 걸릴 것이다.반면 Tailwind는 유사border-2 border-blue rounded-lg bg-green 시스템을 사용했습니다.2픽셀의 파란색 테두리는 원형이고 배경은 녹색인 것을 거의 볼 수 있다.
어떤 사람들은 장류명의 생각을 비웃으며 html을 엉망진창으로 만들 것이라고 생각한다.또한 JS 군중의 무CSS로부터 시작하지 마세요.그러나 나는 그것이 실제로는 나에게 더 좋은 개발 체험을 주었기 때문에 파일 사이를 왔다갔다 볼 필요가 없다는 것을 발견했다.나는 라벨에 이미 존재하는 스타일을 볼 수 있다.나는 내가 신청한 과정과 현재 진행 중인 조형을 쉽게 볼 수 있으며 responsive-paragraph-container와paragraph-container 사이의 차이를 추측할 필요가 없다.
긴 이름이 정말 싫으면css 파일의 모든 스타일을 구식으로 적용할 수 있습니다.paragraph-container:

.paragraph-container {
  @apply border-2 border-blue rounded-lg bg-green;
}

이것도 구성 요소를 위해 다시 사용할 수 있는 스타일 종류를 구축하는 방법이다.
두 가지 명명 방법은 모두 당신이 좋아하는 모든 스타일에 적용됩니다.좋은 코드의 특징 중 하나는 그 의미가 명확하고 표현력이 풍부하다는 것이다.순풍은 너로 하여금 어떤 방법을 취해서 이 점을 실현하게 할 수 있다.

표준화 및 주제화
디자이너와 합작하여 디자인 시스템을 구축하는 것은 내가 가장 좋아하는 응용 프로그램 구축 부분 중의 하나이다.그러나 표준을 만들고 변수를 만드는 것은 중요하지 않다.다행히도 순풍이 그것을 쉽게 만들었다.기본값p-4 lg:p-32을 사용하거나 사용자 정의 변수를 사용하면 p-mobile lg:p-desktop을 만들 수 있습니다.
착색은 자신의 팔레트를 만들고 모든 색 요소를 사용할 수 있기 때문에 꿈이다.너는 그것들의 색깔을 덮어쓰거나, 너 자신의 색깔로 그것을 확장할 수 있다.
만약 백분율을 사용한다면, 사용 폭은 2, 3, 4, 5, 6, 12 기반의 분자/분모 시스템을 사용하기 때문에 매우 좋다.그래서 너는 입력할 수 있다w-8/12.고정 너비에 대해 나는 사용자 정의 변수를 사용하는 경향이 있다. 왜냐하면 순풍 변수는 REM 단위를 바탕으로 하기 때문이다. 이것은 내가 잠시 후에 토론한 내용이다.

더 나은 CSS 및 클래스 작성
Tailwind를 사용하여 더 좋은 클래스와 더 좋은 CSS를 작성할 수 있습니다.나는 bootstrap을 처음 배웠을 때 왜 btn와btn-red를 포함해야 하는지 알고 싶었다.그러나 Tailwind를 사용하면 왜 React의 구성 요소처럼 CSS를 구축하는 것이 중요한지 깨닫게 됩니다.다음 예제를 참조하십시오.

.btn {
  @apply px-8 py-2 text-lg rounded-lg shadow-sm;
}

.btn:hover {
  @apply shadow-lg;
}

.btn-orange {
  @apply text-black bg-orange;
}

.btn-orange:hover {
  @apply bg-orange-700;
}

.btn-green {
  @apply text-white bg-green-300;
}

.btn-green:hover {
  @apply bg-green-700;
}

이것은 나로 하여금 진정으로 그들이 말한 실용성을 우선시하는 디자인 모델을 채택하게 했다.위의 코드를 보십시오. my.btn류가 단추의 모양과 크기를 정의했습니다.그리고 색깔류는 이렇게 해서 색깔만 적용합니다.이것은 나로 하여금 그것을 두 가지 독립된 방면으로 주목할 수 있게 했다.이런 패턴을 따라 내가 쓴 CSS는 더욱 간결하고 표현력이 있다.'순풍'을 사용하든'바닐라'CSS만 사용하든 나는 이 모델을 따르려고 한다.
이 모든 것은 이런 모델이 결코 순풍에 의해 발명된 것이 아니지만, 그들의 뛰어난 문서는 왜 네가 그것을 실천해야 하는지를 명확하게 설명하기 위해서이다.

이동 응답 우선
만약 네가 나처럼 있다면, 나는 어떻게 미디어 조회를 정확하게 작성하는지 영원히 기억하지 못할 것이다.최대 너비입니까, 최소 너비입니까?돌파점이 뭐예요?다행히도, 순풍이 그것을 매우 쉽게 만들었다.먼저 휴대전화 스타일을 바탕으로 조회를 추가해 더 큰 화면에 적응한다.
그래서 flex flex-col lg:grid lg:grid-cols-3 부터 시작하면, 현재 모바일 장치에는 flexbox 열이 있고, 데스크톱 보기에는 격자가 있습니다.솔직히 말해서, 나는 내가 지난번에 매체 조회를 쓴 것이 언제였는지 너에게 말할 수 없다.지금까지 이것은 아마도 내가 Tailwind에서 판매한 주요 포인트일 것이다.모든 종류를 단점에 추가할 수 있습니다.

커뮤니티
Tailwind 커뮤니티가 정말 성장하고 있어요. 제가 정말 좋아하는 거예요.예쁜 구성 요소를 구축하는 데 도움을 줄 수 있는 자원이 많습니다.
이 재구매 협의는 대량의 자원을 가지고 있다.
Awesome TailwindCSS

조금 아프다
모든 것이 완벽한 것은 아니다.다음은 내가 겪은 몇 가지 통증이다.나는 이 모든 것이 해결 방법이 있다는 것을 깨달았지만, 그것들은 내가 완벽한 세계에서 해결할 문제였다.

유닛
나는 이전에 이것을 언급한 적이 있다. 왜냐하면 순풍에 REM 단위를 사용하기 때문이다.나는 그것들이 하나의 단위/4=rem 크기에 기초한 수학 공식이라는 것을 알고 있지만, 이것은 내 머릿속에서 자주 기억해야 할 계산이다.만약 당신이 화소 단위의 디자인 팀과 합작하고 있다면, 그것도 사람을 낙담하게 할 것이다.마지막으로 수학 문제가 많이 나올 거예요.
또한 고정된 폭의 항목은 최대 16렘에 달할 수 있습니다. 256픽셀입니다.나는 Tailwind가 모든 픽셀의 폭을 포함할 수 없다는 것을 깨달았다. 대부분의 용례만 덮어쓰는 것은 의미가 있지만, 만약 고정된 폭의 항목이 있다면, 사용자 정의 폭을 정의해야 한다는 것은 고통스러운 일이다.
다행히도 현재의 대다수 디자인은 이러한 생각을 회피하고 호응적인 디자인에 전념하기 때문에 과거처럼 큰 문제가 되지 않는다.

일부 CSS 옵션은 제한적임
나는 통상적으로 높이가 너비처럼 자주 정의되지 않는다는 것을 깨달았지만, 이 옵션이 있었으면 좋겠다.고정 REM 높이, 자동, 100% 및 100vh 높이만 있습니다.이 비율을 거기에 두면 너비처럼 필요할 때 선택할 수 있다.
이것도 격자에 적용된다.폭과 같은 격자 열이나 격자 줄만 있을 수 있습니다.사용자 정의 격자가 필요하다면, 그것을 정의해야 한다.나는 필요한 것과 정의된 모든 내용을 다시 추가하는 것은 불가능하다는 것을 깨달았지만, 이것은 내가 겪은 문제였다.다행히도, 나는 지금 Grid를 적게 쓰고, flexbox를 많이 쓴다.

Webkit 및 비인기 CSS
최근 프로젝트에서 필요한 특정 SVG CSS 속성은 Tailwind에서 사용할 수 없습니다. 이것은 최종적으로 사용자 정의 CSS 파일에 들어간다는 것을 의미합니다.이것은 -webkit 지정할 수 없는 내용에도 적용된다.만약 당신이 iOS Safari를 위해 개발해야 한다면, 이것은 결국 매우 큰 고통이 될 것이다.하지만 순풍 여행의 문제일 수도 있다.
이것도 모든 개발자가 사용하는 속성은 아니지만, 이것은 내가 직면한 문제이며, 다른 사람들이 일부 개발 사례에서 주의하기를 원할 수도 있는 문제이다.

결론
나는 정말 내가 이 일을 계획할 때, 나는 이익과 폐단을 공평하게 따지는 균형 잡힌 문장을 한 편 쓸 것이라고 생각한다.내가 끝까지 말했을 때, 나는 나의 모든 부정이 큰 문제가 아니라는 것을 깨달았다.그것들은 실제로는 상대적으로 작은 물건으로 그것들을 확장해서 나의 특정한 디자인 수요를 만족시킬 수 있다.
전반적으로 말하자면'순풍'은 나의 CSS를 더욱 조리 있고 표현력이 있으며 속도가 더욱 빨라지게 한다.나는 이것이 절대로 하나의 방법이라고 생각한다. 만약 네가 아직 이렇게 하지 않았다면, 나는 테스트해 낼 것이다.