Rescale.com의 재설계를 위한 Tachyons 사용에 대한 생각

타키온스케네스
한 달 남짓 전에 우리는 홈페이지의 새 디자인 버전을 출시했습니다. https://rescale.com. 개발 과정에서 우리는 CSS 작성 방식을 재평가할 좋은 기회라고 생각했습니다.
당시 우리의 기본 CSS 파일은 길이가 2000줄이 넘었고 고전적인 의미 클래스 이름 스타일로 작성되었습니다(예: 뉴스 섹션은 .news 클래스) 여기 저기에 몇 가지 유틸리티 클래스가 있습니다.
CSS 코드를 훑어보면서 우리는 이 재설계에 약간 불안함을 느꼈습니다. 왜냐하면 1) 우리가 작성한 많은 CSS 클래스가 아마도 새 디자인에서 재사용이 불가능할 것이므로 결국 훨씬 더 많은 CSS를 추가하게 될 것이고, 2 ) 훨씬 더 많은 반응형 구성 요소가 있을 예정이었고, 반응형 CSS를 작성하는 방식을 따르고 변경하기가 어려웠습니다.
이전 CSS의 주요 문제점 중 하나는 소스 코드를 읽는 것만으로는 특정 CSS 클래스가 있는 요소가 다양한 화면 크기에서 어떻게 작동하는지 시각화하기가 매우 어렵다는 것입니다. 이는 미디어 쿼리 섹션이 수백 줄의 CSS로 구분되었기 때문에 발생했습니다. 예를 들어 다음 CSS를 사용하면 다음과 같습니다.

.footer { 색상: #999; 디스플레이: 블록; 왼쪽으로 뜨다; 줄 높이: 20px; 패딩: 0 0 0 5px; 텍스트 정렬: 왼쪽; 너비: 120px; } /* 수백 줄 이후 */ @media only screen and (min-width: 768px) { /* 수백 줄 이후 */ .footer { padding: 0 0 0 30px; 너비: 15%; } } /* 수백 줄 이후 */ @media only screen and (min-width: 1024px) { /* 수백 줄 이후 */ .footer { padding: 0 0 0 40px; } }

우리가 그 글을 읽고 있었다면 .footer 클래스를 미디어 쿼리 중 하나 아래에 추가하면 기본 클래스에 무엇이 있는지, 어떤 기본 속성이 재정의되고 있는지, 어떤 미디어 쿼리 블록에 있는지 기억하기가 매우 어렵습니다. 더 많은 클래스를 추가하면 문제가 더욱 악화될 뿐입니다.
그 무렵 우리는 우연히 타키온 CSS 도서관과 그 창시자인 Adam Morse가 쓴 기사 CSS와 확장성.
여기에서 Adam은 CSS 확장성과 재사용성 문제의 핵심은 의미 클래스 이름의 사용이며 이러한 시스템을 사용하면 CSS 작성을 결코 멈추지 않을 것이라고 주장합니다.
해당 기사에서 가장 흥미로운 점은 다음과 같습니다.

  • 새로운 구성요소를 구축하거나 앱의 UI 일부를 변경하려는 경우 어떻게 해야 합니까? 재사용할 수 있는 것이 있는지 확인하기 위해 앱에서 사용 가능한 CSS를 모두 읽는 사람은 없습니다.
  • CSS를 재사용할 수 없다는 가정에서 시작하는 경우 첫 번째 본능은 새 CSS를 작성하는 것입니다. 그러나 아마도 새로운 시각적 스타일 분류를 만들지 않을 것입니다. 내 경험상 이미 존재하는 시각적 스타일을 복제하고 있을 가능성이 높습니다.
  • 이 모델에서는 CSS 작성을 멈추지 않을 것입니다. CSS를 리팩토링하는 것은 어렵고 시간이 많이 걸립니다. 사용하지 않는 CSS를 삭제하는 것은 어렵고 시간이 많이 걸립니다. 그리고 대개는 사람들이 흥미를 느끼는 일이 아닙니다. 그러면 어떻게 되나요? 사람들은 점점 더 많은 CSS를 작성하고 있습니다.

이를 통해 우리는 Tachyons 라이브러리를 채택했고 재설계를 구현하기 위해 작성해야 하는 CSS가 얼마나 적고 반응형 디자인을 구현하는 것이 다시 재미있다는 사실에 놀랐습니다.
Tachyon에는 여러 CSS 클래스가 함께 제공되며 각 클래스에는 하나의 속성만 포함되어 있습니다. 예를 들어, .fl 정의 float: left. 또한, 각 클래스에는 반응형 수정자가 있는 클래스가 있습니다. 예를 들어. .fl-ns 만 적용한다는 뜻 float: left 화면 크기가 "작지 않음"이거나 480px 이상인 경우.
우리는 이러한 클래스를 구성 요소의 구성 요소로 사용합니다. 예를 들어 반응형 4열 레이아웃의 한 열은 다음과 같습니다.
즉, 왼쪽으로 떠서 화면이 "작지 않음"보다 클 때 너비의 50%를 차지하고, 화면이 "중간"보다 클 때 너비의 25%를 차지합니다. "작지 않음"보다 작은 경우 너비의 100%를 차지하는 div의 기본 동작을 사용합니다.
Tachyon이 우리에게 구매하는 또 다른 것은 사전 정의된 세트입니다. 글꼴 크기패딩/여백 간격 글꼴 및 간격 척도라고도 합니다. 이 시스템에는 몇 가지 장점과 단점이 있습니다.
가장 큰 장점 중 하나는 크기를 결정하는 데 훨씬 적은 시간을 소비한다는 것입니다. 예를 들어, Tachyons를 채택하기 전에 우리는 특정 섹션에서 글꼴 크기를 16px 또는 18px로 사용해야 하는지, 아니면 패딩을 8px 또는 10px로 사용해야 하는지 자문하곤 했습니다. Tachyon은 일관성을 높이면서 결정 횟수를 줄입니다.
물론 단점은 이러한 척도가 아닌 크기를 사용하려는 경우입니다. 우리가 이를 처리하는 방법은 스타일을 인라인하는 것입니다. 일반적으로 스타일은 어쨌든 재사용되지 않으므로 이러한 일회성 스타일이 CSS에 있어야 할 이유가 없기 때문입니다.
다른 문제는 일반적으로 형제 요소 간에 동일한 클래스를 가진 요소가 반복된다는 것입니다. 위의 4개 열 구성요소의 경우 이를 4번 반복했을 것입니다. 이는 여러 커서가 있는 코드 편집기에서는 사소한 문제입니다. 문제가 발생하면 템플릿 시스템을 사용하여 구성 요소를 추상화할 수 있습니다.
전반적으로 우리는 이것이 확장성을 위한 CSS 시스템이 향하고 있는 올바른 방향이라고 생각합니다. 즉, CSS를 확장하는 가장 좋은 방법은 CSS 작성을 중단하는 것입니다.

비슷한 게시물