기능적인 CSS로 스타일을 단순화하십시오.(Simplify Styling with Functional CSS)

이 글은 Harry Nicholls Simplify Styling with Functional CSS 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

앱 스타일일이 두려운가요? 변경으로 인해 오랜 시간동안 당신이 만든 스타일이 망가질 까봐 두렵습니까? 저는 다른 방법이 있다고 말씀드리려고 왔습니다. 기능적 CSS를 소개합니다.

presentation
이 글에서 기능적 CSS가 무엇인지 설명하고, 기존 CSS와 비교하여, 기능적 CSS를 사용하여 스타일을 단순화할 수 있는 방법에 대해 설명하겠습니다!
저는 CSS 쓰는 것을 싫어했었습니다. 저는 head나 tail도 전혀 만들 수 없었습니다. CSS 파일을 어떻게 구조화 합니까? 언제 Class를 만들어야 하나요? Div를 세로로 중앙에 위치시키는 방법은 뭐죠?
이것들은 정기적으로 제기된 질문들 중 일부에 지나지 않습니다. 저는 제가 만든 스타일을 조금이라도 바꾸기가 두려웠습니다. 왜냐하면 제가 원하는 상태로 만드는 데 너무 오래 걸리기 때문입니다! 모든게 이해가 안 됐어요.
저는 Angular Material, Ionic, Bootstrap과 같은 컴포넌트 라이브러리를 발견했을 때 안도감을 느꼈습니다. 저는 레이아웃, 버튼 스타일, div 정렬에 대해 걱정하기 보다는 기능 개발에 집중할 수 있었습니다.
한동안 모든 것이 장밋빛이었지만, 꺼림직한 느낌이 서서히 들기 시작했습니다. 저는 컴포넌트 라이브러리가 매우 제한적이라는 것을 발견하기 시작했습니다. 라이브러리 개발자들은 당신의 앱이 어떻게 보여야 할지를 결정하는데, 당신은 그 이후에 그것에 대해 거의 할 수 있는 말이 없습니다.
또한 최고의 구성 요소 라이브러리가 가장 인기가 많아 대부분의 앱이 동일한 모양과 느낌을 갖습니다. 모든 것이 일반화됩니다.
오해하지는 마세요. 컴포넌트 라이브러리는 MVP를 작성하는 데 적합합니다. 왜냐하면 컴포넌트 라이브러리는 제품에 실제로 추가되지 않는 많은 것을 처리하기 때문입니다. 그러나 MVP를 벗어나면 어떻게 될까요? 부트 스트랩을 추출하여 사용자 정의 CSS로 대체하는 자신을 볼 수 있습니까?
아니요.
기능적 CSS는 스타일링 문제에 대한 완전히 새로운 시각을 제시합니다. 앱의 멋지게 보이기를 원하지만, 앞으로 3주 동안 div의 중심을 잡으려고 노력하기를 원하지는 않습니다 (제가 너무 div 중심잡기에 매달렸나요?).

어쨌든, 기능적 CSS 란 무엇입니까?

"기능적"의 정의는 다음과 같습니다.
특별한 활동, 목적 또는 업무를 수행하거나 가지고있는 사람; 무언가가 작동하거나 작동하는 방식과 관련이 있습니다.
Functions should do one thing, and, given the same input, should produce the same output.
기능은 한 가지를 작업을 수행해야 하며, 동일한 입력으로 동일한 출력을 생성해야 합니다.
Every.
Single.
Time.
CSS를 사용하면 Class가 하나의 시각적 효과(예: 밑줄 없음)를 적용하고 매번 이를 적용해야 합니다. 따라서 당신의 CSS는 여러 가지 작은 부분으로 이루어져, 특정한 시각 효과를 주기 위해 구성될 수 있습니다.
기능적 CSS를 시연하기 위해 Trello 클론인 Frello (원본,저도 알고 있습니다 ...)를 만들고, 기존 CSS 스타일로 한 브런치를 만들고 기능적 CSS 스타일로 다른 브런치를 작성했습니다..
(만약 당신이 미리 확인하고 싶다면, Frello를 확인하고 여기에서 source code here를 얻으십시오)
다음은 앱에서 제공하는 카드 프레젠테이션 컴포넌트로, 두 가지 유형의 CSS를 모두 조합한 것입니다. 다른 CSS 파일을 보면 다음과 같은 차이를 금방 알 수 있습니다.
Frello card component
제가 가장 먼저 지적하고 싶은 것은 기능적 스타일 파일에 전통적인 스타일 CSS 파일보다 훨씬 더 많은 클래스가 포함되어 있다는 것입니다. 그리고 이것은 아마도 지금 너무 지나친 것 같습니다.
이제 두 번째 구성 요소를 생성하려고 합니다.
Frello list component
이 두 구성 요소의 전통적인 CSS에는 몇 가지 중복이 있지만 기능적 CSS는 일부 클래스를 재사용한다는 것을 알 수 있습니다.
  • flex
  • items-center
  • h Odark-gray
  • helvetica
  • w5
  • ph2
  • bn
  • bg-transparent
이것은 완전한 목록은 아닙니다. 여기에는 많은 재사용이 이루어지고 있으며 두 가지 구성 요소만 있습니다. 전체 앱에서 얼마나 많은 재사용이 이루어지고 있는지 상상해 보십시오!

Tachyons

여러분은 아마도 이렇게 생각할지도 몰라요, 어떻게 이 모든 기능적 css 블록을 쓸 수 있죠? 어떤게 필요한지 어떻게 알 수 있나요???
좋은 소식은, 당신은 그럴 필요가 없다는 것입니다! 다른 누군가가 당신을 위해 그것을 했습니다! 여러분이 필요로 할 대부분의 classes가 들어 있는 라이브러리가 몇 개 있습니다. 네, 물론, 그것들은 완벽하지 않고, 여러분이 적용하고자 하는 모든 가능한 스타일을 포괄하지 않지만, 대부분의 유용한 효과들이 거기에 있습니다.
Tachyons은 그런 라이브러리 중 하나입니다. 저는 이것을 몇 가지 프로젝트에서 사용했는데, 믿을 수 없을 정도로 매우 유용하다는 것을 알았습니다.
Tachyons가 워크플로우 속도를 높이는 데 얼마나 효과적인지 보여주기 위해 Freello 앱의 각 측면에 얼마나 많은 시간을 할애했는지 시간을 기록했습니다.
  • 기능성
  • 스타일링 - Tachyons을 사용한 기존 CSS 및 기능적 CSS
결과는 다음과 같습니다.
  • 기능성 — 3시간 10분
  • 기존 CSS — 3시간 44분
  • Tachyon을 사용한 기능적 CSS — 1시간 59분
지금까지, 전통적인 CSS가 가장 오랜 시간이 걸렸습니다. 심지어 앱의 기능을 구축하는 것보다도 더 많은 시간이 걸렸습니다! 아마도 이것은 다른 어떤 것보다 평범한 CSS를 쓸 수 있는 능력에 대해 더 많은 것을 말해주는 것일 수도 있지만, 기능적 CSS를 가지고 Frello를 스타일링하는 것이 훨씬 더 빠른 과정이었다는 것은 분명합니다.
저는 전통적인 CSS를 작성하는 데 Tachyons 클래스를 컴포넌트에 추가하는 것에 비해 거의 두 배의 시간을 보냈습니다. 여기서 눈에 띄는 차이점은 Tachyons를 사용할 때 실제로 CSS를 많이 쓸 필요가 없었다는 것입니다. 모든 기능적 CSS classes를 처음부터 작성했다면 시간이 더 걸릴 것 같습니다.

왜 신경 써야하나요?

제가 주장하고 싶은 것은 다른 사람들이 기능적 CSS 라이브러리를 만드는 작업을 이용하는 것입니다. 그들은 디자인의 탄탄한 기초 위에 지어졌습니다. 사람들은 이 라이브러리을 어떻게 건설해야 하는지, 그리고 가장 유용한 class가 무엇일지에 대해 생각하는데 많은 시간을 보냈습니다.
유용 할뿐만 아니라 Tachyons의 기본 설계 원리입니다. 모든 Tachyons 간격 및 크기 조정 클래스 (여백, 패딩 및 글꼴 크기)는 스케일을 기준으로 합니다.
정확히 말하자면, Tachyon은 앱의 루트 글꼴 크기에 비례하여 'rem'을 모든 크기와 공간에 사용합니다. 기본 루트 글꼴 크기는 16px이므로 변경하지 않으면 4가지 기본 척도를 사용할 수 있습니다. 즉, 모든 공간과 크기가 4의 배수입니다.
애플과 구글은 그들의 제품에 4가지 척도를 사용하고 있고 그들은 디자인에 대해 한가지 또는 두가지를 알고 있습니다!
"일관된 간격 눈금을 사용하면 레이아웃을 보다 예측 가능하고 적합하고 잘 정렬함으로써 비율을 통한 유지 관리 가능성을 높일 수 있습니다." - Jina Anne, DesignBetter.Co
이것은 당신의 디자인과 레이아웃에 리듬과 균형을 주기 때문에 중요합니다.
presentation
Tachyons font-size scale
스케일을 사용하면 마법의 숫자를 피할 수 있습니다. 당신의 CSS에 매달려있는 일정한 숫자로 일을 "일"하게 만듭니다.
presentation
Tachyons padding-left scale
기능적 CSS를 사용할 때의 또 다른 장점은 탭 전환을 줄여 개발 워크플로우를 가속화할 수 있다는 점입니다. 이 기능은 템플릿이 JS 파일 내에 있는 React와 같은 프레임워크를 사용할 때 특히 유용합니다.
기능적 CSS를 사용하면 기능을 작성하고, 템플릿을 작성하고 컴포넌트의 스타일을 단일 파일로 지정할 수 있습니다! 앞서 설명했듯이, 이를 통해 고품질 출력을 유지하면서 컴포넌트를 구축하는 데 드는 시간을 크게 줄일 수 있습니다.

Tachyons Schmachyons

"하지만 기능적 CSS는 확장되지 않습니다... 앱 전체에서 사용되는 버튼을 업데이트해야 할 경우 해당 버튼의 모든 인스턴스에서 클래스를 변경해야 합니다!" — 내 개발자 친구
이것은 매우 타당한 우려입니다. 하지만 이렇게 말하고 싶네요. 당신이 앱을 만드는 방법을 다시 한번 보세요. 앱 전체에 동일한 버튼이 있으면 구성 요소로 만듭니다. 필요한 곳에 구성 요소를 삽입하고 구성 요소의 스타일을 업데이트하려면 구성 요소의 클래스를 변경하십시오!
Tachyons에는 많은 classes가 있으며, 처음 적용할 필요가있는 것을 아는 것은 어려울 수 있습니다. 그리고 class가 무엇인지를 아는 것은 어려울 수 있습니다.
"bn"은 무엇을 합니까? 아니면 "fw7"이 그 문제에 해당합니까?
Tachyons documentation 는 유용하지만, 탐색하기가 어려울 수 있습니다. 특히 특정 class의 기능을 찾으려는 경우 특히 그렇습니다.
다행히도, 매우 유용한 도구인 Tachyons TLDR이 있습니다. 이 도구는 여러분이 class 이름과 스케일 등 Tachyons의 많은 측면을 극복하도록 도와줍니다. 개인적으로, 저는 이것이 매우 유용하다고 생각했습니다.
기능적 CSS 라이브러리에 대한 또 다른 일반적인 불만 사항은 매우 고집이 세고 제한된 classes만 제공한다는 것입니다.
이걸로 고생했다면 좋은 소식이 있습니다! Tachyons를 사용자 정의하고, tachyons-generator를 사용하여 자신의 구성에 따라 스타일시트를 생성할 수 있습니다!
다른 기능을 제공하는 CSS 라이브러리도 있으며, 그 중 일부는 고도의 사용자 정의를 할 수 있습니다 :
  • Tailwind
  • Basscss
  • BuzzFeed’s Solid
필요에 따라 기능적 CSS 라이브러리를 구하는 데 사용할 수 있는 옵션이 있습니다.

기능적 CSS에 "예"라고 말하십시오.

왜 굳이 그럴 필요가 없는 거죠? 일부 다른 프로젝트에서 작성한 다른 CSS 클래스와 거의 비슷한 CSS 클래스를 쓰지 않고 구축 기능을 당신의 앱에서 사용하십시오.
탭 전환을 줄여 워크플로우에서 시간을 절약하고 디자인 원칙을 취득하는 데 4년을 소비하지 않고도 견고한 디자인 원칙을 적용할 수 있습니다.
Tachyons나 다른 기능적 CSS 라이브러리를 가지고 와서 스타일을 단순화하십시오!
원래 Rangle.io에 게시되었습니다.

Resources

  • Frello app
  • Frello app source code
  • Tachyons documentation
  • Tachyons TLD

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp