일반적으로 프로젝트에는 미리 결정된 글꼴 크기 세트가 있으며, 일반적으로 순서와 일관성의 유사성을 추구하는 방식으로 명명 된 변수로서. 상당한 크기의 프로젝트는 그런 것을 사용할 수 있습니다. 항상 제목, 단락, 목록 등이 있습니다. 글꼴 크기를 명시 적으로 그리고 모든 곳에서 직접 설정할 수 있습니다 (예 : 글꼴 크기 : 18px). 원시 CSS. 나는 때때로 크기뿐만 아니라 PX, REM 및 EM과 같은 단위를 혼란스럽게 혼란스럽게 혼란스럽게한다.

프로젝트의 CSS는 일반적으로 변수 또는 믹스 인을 사용하는 이유입니다. 구조, 유지 관리 및 궁극적으로 일관성을 위해 촬영하고 있습니다. 우리는 모두 이름 지정이 어렵다는 것을 알고 있으며 그 이유를 확인하기 위해 글꼴 크기 변수 이름을 짓는 것보다 훨씬 더 많이 보이지 않습니다. 작은 글꼴 크기 변수의 이름을 어떻게 지정해야합니까? 큰 글꼴 크기 변수보다 작습니다. 그리고 우리가 그들 사이에 새로운 변수를 삽입해야한다면 어떻게됩니까? 다른 크기 변수와의 관계를 명확하게 설명하는 방식으로 이름이 지정된 것입니까?

우리는이 게시물에서 글꼴 크기 변수 이름 지정에 대해 계속 이야기 할 것입니다. 그러나 실제로이 문제는 글꼴 크기를 넘어 모든 종류의 크기 또는 길이 값으로 확장됩니다. 패딩, 여백, 너비, 높이, 테두리 반경 등을 생각하십시오. 이러한 것들은 구조와 일관성도 필요합니다!

프로젝트에서 글꼴 크기를 어떻게 정의합니까? 사용자 정의 변수로 다음과 같이 보입니까 :

:root {
  /* Font size variables */
  --small: 12px;
  --medium: 16px;
  --large: 24px;
}

또는 아마도 Sass (이 기사에서 사용할 것입니다)에서는 $ small, $ medium 및 $ 큰 글꼴 크기에 대한 변수가있을 수 있습니다.

괜찮은. 잠시 후, 디자이너가 영웅 섹션을 위해 새로운

제목을 추가한다고 가정 해 봅시다. 그리고 매우 가 크다. 프로젝트에있는 것보다 큽니다. 문제 없습니다. 답장합니다. 당신은 프로젝트에 $ xlarge를 추가하고 당신의 하루를 보내십시오.

다음날 디자이너는 새로운 글꼴 크기를 가진 멋진 형태 레이블을 만듭니다. 그러나이 새로운 크기는 작지만 매체보다 작습니다.

여기 우리는 간다.

무엇을 불러야합니까? $ small-medium? $ small-2? $ smedium? 당신이 이름을 밝히는 것은 행복하지 않을 것입니다. 그것에 대한 말이 없기 때문에.

아니면 리팩터링해야합니까? 새로운 $ xsmall을 만들고 $ xsmall의 모든 인스턴스를 변경 하시겠습니까? 그런 다음 양식 레이블에 $ small을 사용할 수 있습니까? 어딘가에 바꾸는 것을 잊어 버릴 위험이 거의 없습니다. Presto : 버그. 다음 번에는 중간 변수 값보다 크기가 큰 무언가가 소개되면 어떻게됩니까? 우리는 $ large and $ xlarge도 리팩터해야합니까?

나는 항상 규모를 준수하는 것이 좋습니다. 쉬운 수정은 추가 추상화, 아마도 $ small-2 또는 $ xsmall 대신 $ form-label과 같은 기능적 이름을 선호하는 숫자와 크기를 더욱 발전시키는 것입니다.

하지만 다음과 같은 글꼴 크기 세트를 가지고 있다고 상상해보십시오 :

$small: 12px;
$form-label: 14px;
$medium: 16px;
$large: 24px;

그것은 깨진 스케일입니다. 크기 개념과 구성 요소 개념이 혼합되어 있습니다. 질문을 제기합니다. 경고 나 버튼을 $ form-label을 사용해야합니까? 왝.

아마도 당신은 그리스어 일이 계속되고, 변수 $ alpha, $ beta, $ gamma의 이름을 지정합니까? 그렇다면 $ alpha보다 큰 것은 무엇입니까? $ alpha-large? 또는 잠깐, $ alpha는 small 하나입니까?

$ Button-Font-Size, $ label-font-size, $ blockquote font-size와 같은 이름도 보았습니다. 그것은 스케일 대신 사용 된 요소 당 하나의 변수처럼 보이며, 동일한 값이 여러 장소에서 사용되지만 다른 이름으로 사용되는 경우 많은 복제 코드 일 수 있습니다.

아마도 하나의 기본 글꼴 크기와 백분율로 만 일하고 있습니까? 물론, 그러나 나는 당신이 백분율에 대한 변수가 필요하다고 말할 것입니다. 그것이 Geoff가 글꼴 크기를 처리하는 방식이며조차도 설정이 자신의 눈썹을 높이는 것을 인정합니다. 주관적으로 이름이 지정된 변수를 가진 계산은 당신에게 분명 할 수 있지만, 프로젝트에 뛰어 들고있는 다른 사람에게는 미쳤고 복잡합니다.

h1 {
  font-size: clamp(var(--text-size-large), calc(var(--text-size-base) * var(--text-size-scaler)), var(--text-size-huge));
}

더 나은 시스템이 필요합니다

물건을 추가하고 제거하는 끊임없이 는 가 작동하기를 원하는 방식입니다. 이것은 MVP

, Agile 및 기타 모든 핫 버즈 워드입니다.

우리가 필요로하는 것은 변화를위한 공간을 허용하는 스케일 구문입니다. 스케일에 새로운 크기를 추가하는 것은 깨진 변경을 도입하지 않고 쉬워야합니다. 나는 flexible 와 Infinite

의 일종 인 일종의 규모를 생각하고 있습니다. $ small, $ medium 및 $ large보다 더 정교해야합니다.

또한 설명 적 및 직관적 인

여야합니다. 바람직하게는 설정 파일 또는 구성에서 변수 이름을 찾 거나이 물건을 저장하는 곳을 찾을 필요가 없습니다. $ epsilon이 $ Sigma 전후에 오면 작은 단서가 없습니다. 당신은?

기존 시스템 사용

새로운 것을 발명하기 전에, 우리가 활용할 수있는 기존 구문이나 시스템이 있습니까? 내가 만난 몇 가지가 있습니다.

국제 단위 시스템

확실히, 당신은“킬로 바이트”및“메가 바이트”와 같은 용어에 익숙합니다. 유럽인들은“밀리미터”와“센티미터”에 매우 익숙합니다. 다른 예로는 "Giga", "Tera"및 "Peta"가 있습니다. 이 접두사는 길이, 무게, 볼륨 등에 사용할 수 있습니다. $ Centi 글꼴 크기가 작동 할 수 있습니까? 메트릭 시스템에 익숙한 경우 어느 정도 직관적입니다. 이것은 유한 한 규모입니다. 이미 설정되어 있기 때문에 새로운 크기를 추가 할 공간이 없습니다.

전통적인 포인트 크기 이름

컴퓨터와 데스크탑 출판, 서적 및 신문이 리드 유형으로 인쇄되기 오래 전에. 타입 세터의 크기에 대해 이름이 다릅니다. 크기는 포인트 크기 (PT)에 대한 참조를 가지며 이론적으로 픽셀 크기 (px)에 사용될 수 있습니다.

이 시스템의 유형 크기는 "비 Pareil", "Pica", "Cicero"및 "Great Primer"라고합니다. 이름은 대륙과 국가에 따라 다릅니다. 또한, 같은 이름은 크기가 다를 수 있으므로… 매우 혼란 스럽습니다.

그 말에 따르면, 나는 과거의 오래된 장인 정신을 존중하는 것과 같기 때문에이 시스템을 좋아합니다. 그러나 이름은 너무 이상하고 특히 유형 사이징을 의미하므로 중단 점 및 간격과 같은 것들에 사용하는 것이 스트레치처럼 느껴집니다.

척도에 일상적인 물건을 배치

일상 생활의 물건을 사용하는 것은 어떻습니까? 칠리 페퍼스를 말하십시오.

많은 종류의 칠리 페퍼가 있습니다. $ habanero는 $ jalapeno보다 뜨거운 $ Cayenne보다 뜨겁습니다. 재미있을거야, 그래?

그러나 글꼴 크기를 쓰는 아이디어를 즐기는만큼 : $ tabasco는 두 가지 문제를 봅니다. 고추에 빠지지 않는다면 다른 후추보다 더 뜨거운 후추를 알 수 없으므로 보편적으로 직관적이지 않습니다. 또한 피망은 Scoville 척도에서 0이며 그 아래에는 없습니다. Carolina Reaper는 세계에서 가장 인기있는 후추이므로 스케일은 유한합니다.

그리고 그래, 페퍼스는 규모가 크지 않거나 작아서 더 뜨겁다. 나쁜 개념. 아마도 공의 유형과 같은 더 일반적인 것일 수도 있습니까?

다양한 종류의 공이 있습니다. 핸드볼, 축구 공, 배구 등이 있습니다. 약 공보다 큰 것이 필요합니까? $ Beach를 사용하십시오. 테니스 공보다 작은 것? $ pingpong을 사용하십시오. 모든 종류의 공을 어느 시점에서 연주했거나 적어도 스포츠에서 친숙하다고 생각하기 때문에 이것은 매우 직관적입니다.

하지만 탁구 공이 골프 공보다 더 큽니까? 누가 알아? 또한 볼링 공과 축구 공의 크기는 실제로 같은 크기입니다. 그래서… 다시, 완벽하지 않습니다.

행성으로 확장하는 것은 효과가있을 수 있지만 천문학에 대해 잘 알고 있어야합니다.

스트레이트 숫자는 어떻습니까? 스타일 라인과 같은 도구가 항의하기 때문에 숫자 만 사용할 수 없습니다. 그러나이 작업과 같은 것이 될 것입니다 :

$font-14: 14px;
$font-16: 16px;
$font-24: 24px;

$ font-14 : 14px; $ font-16 : 16px; $ font-24 : 24px;

글쎄, 항상 새로운 추가를위한 여지가 있기 때문에 무한합니다. 그러나 그것은 또한 매우 구체적이며 실제 값을 그 이름의 일부가 될 수있는 단점이 있습니다. $ font-18이 많은 장소에서 사용된다고 가정 해 봅시다. 그리고 지금 그들은 18px가있는 모든 장소는 19px로 변경되어야한다고 말합니다 (이유 때문에). 이제 우리는 변수의 이름을 $ font-18에서 $ font-19에서 19px에서 19px로 변경해야합니다. 그리고 우리가 마침내 $ font-18 ~ $ font-19를 사용하여 모든 장소를 업데이트하기 전입니다. 이것은 원시 CSS를 사용하는 것과 거의 같습니다. 유지 관리에 대한 낮은 점수.

동물 왕국은 어떻습니까?

대자연은이 지구에서 무수한 종을 제공했으며,이 상황에서 편리합니다. 다음과 같은 것을 상상해보십시오 :

$font-14: 14px;
$font-16: 16px;
$font-24: 24px;

$ 마우스 : 12px; $ 개 : 16px; $ hippo : 24px;

마우스보다 작은 것이 필요하십니까? $ 꿀벌, $ ant 또는 $ 벼룩을 사용하십시오. 곰보다 큽니까? $ moose 또는 $ hippo를 사용해보십시오. 코끼리보다 더 크다? 글쎄, 당신은 $ 고래가 있거나 도대체 우리는 선사 시대로 가서 $ t-rex를 사용할 수 있습니다. 여기에 짜는 동물이 항상 있습니다. 매우 다재다능하고 직관적이며 무한합니다 (거의). 그리고 재미있는-나는 글꼴 크기 : $ squirrel을 신경 쓰지 않을 것입니다. ?

그러나 다시 한 번, 우리가 글꼴 크기 동물원에 어떤 동물이 포함되어 있는지 정확히 알지 않는 한 변수를 참조해야 할 수도 있습니다. 하지만 스케일링하는 한 큰 문제는 아닙니다.

나는 이것을 숙고하는 데 너무 많은 시간을 보냈다

아니면 내가 가지고 있습니까? 코드 기반은 근무 시간을 보내는 곳입니다. 의자와 모니터와 마찬가지로 업무 환경입니다. 그리고 직장은 좋은 곳이어야합니다.

글꼴 크기 스케일을 어떻게 처리합니까? 글꼴 용 시스템이 하나 있고 여백과 같은 시스템이 있습니까? 누구든지 코드에 뛰어 들어 모든 것이 어떻게 구성되어 있는지 이해할 수 있습니까? 의견으로 말 해주세요!