CSS와 SVG에서 많은 양의 매직 넘버를 사용할 수있는 이유는 무엇입니까?

종종 내가 좋아하는 핫 네트워크 질문 목록 질문에 볼 이 기본적으로 "나는 CSS이 임의의 모양을 그리는 어떻게"부탁드립니다. 항상 그 대답은 요청 된 형태를 형성하는 겉보기에 무작위로 하드 코딩 된 값이 많은 CSS 또는 SVG 데이터 블록입니다.

이것을 보면 'Yuck! 못생긴 코드 블록. 나는 내 프로젝트에서 이런 종류의 것들을 보지 않기를 바랍니다. ' 그러나 이러한 유형의 Q & A는 매우 빈번하고 공감 수가 많으므로 커뮤니티는 자신이 나쁘다고 생각하지 않습니다.

그러나 이것이 왜 허용됩니까? 내 백엔드 경험에서 오는 것은 나에게 의미가 없습니다. CSS / SVG에 적합한 이유는 무엇입니까?

첫째, 변수 나 상수를 사용하여 프로그래밍에서 마술 값을 피할 수 있습니다. CSS는 변수를 지원하지 않으므로 매직 값이 찌그러 지더라도 전처리기를 SASS로 사용하는 것을 제외하고는 선택의 여지가 없지만 단일 스 니펫에는 적용하지 않습니다.

둘째, CSS와 같은 도메인 특정 언어에서는 값이 마술처럼 보이지 않을 수 있습니다. 프로그래밍에서 매직 넘버는 의미 나 의도가 분명하지 않은 숫자입니다. 줄이 다음과 같이 말하는 경우 :

x += 23;

"왜 23"이라고 물 을까요? 추론은 무엇입니까? 변수는 의도를 명확히 할 수 있습니다.

x += defaultHttpTimeoutSeconds;

고독한 숫자는 범용 코드에서 절대적으로 의미가 있기 때문입니다. 그러나 CSS를 고려하십시오.

background-color: #ffffff;
font-size: 16px;

문맥에서 의미가 완전히 명확하기 때문에 높이와 색상은 마술이 아닙니다. 그리고 spefic value를 선택하는 이유는 디자이너가보기 좋을 것이라고 생각했기 때문에 간단합니다. 어쨌든 " defaultBackgroundColor"및 " defaultFontSize" 와 같은 이름을 지정하기 때문에 변수를 도입해도 도움이되지 않습니다 .

이러한 형식은 코드 가 아니라 data 이므로 허용 됩니다 . 모든 "마법의 숫자"를 제거하려면 모든 레이블을 복제하고 다음과 같은 말도 안되는 파일로 끝납니다.

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

일부 데이터를 변경해야 할 때마다 두 곳을 살펴 봐야합니다. 물론 자주 반복되는 색상이 있고 테마를 변경하기 위해 변경하려는 경우와 같이 복제를 피하는 것이 좋은 상황이 있습니다. 이러한 상황을 처리하기위한 전 처리기 및 제안 된 확장이 있지만 일반적으로 데이터 형식으로 구조와 함께 숫자를 갖는 것이 바람직합니다.

매직 넘버 금지는이 디자인 원칙의 기본 버전입니다.

한 곳에서 결정을 내 립니다.

그러나 이것들은 마법의 숫자가 아닙니다 . 적어도 내가 아는 코딩 스타일 가이드에 관한 한은 아닙니다.

너비 : 200px;
높이 : 200px;

그들은 명확하게 표시되어 있습니다. 물론 숫자는 동일합니다. 그러나 너비는 너비이고 높이는 높이입니다. 그들은 독립적으로 다양하게 설계되었습니다.

이제 당신은 모든 5 개체가있는 경우 이 있었다 같은 폭을 갖도록 각각 독립적 나는 당신을 이길 것이라고 자신의 폭을 하드 코딩 간접 스틱.

레이블이 붙어 있으면 마법의 숫자라고 부르지는 않지만 여전히 간접 스틱 으로 이길 것입니다 .

CSS는 프로그래밍 언어가 아니기 때문에 프로그램의 변수 데이터를 포함하는 구성 파일입니다.

현재 CSS는 너무 강력해서 실제로 프로그래밍 할 수 는 있지만 요점은 아닙니다. 본질적으로 여전히 스타일 시트 언어 입니다.

물러나 보자. 화면에 그릴 수있는 프로그래밍 언어가 있다고 상상해보십시오. 웹 페이지를 페인트하도록 프로그램하고 싶다고 상상해보십시오.

처음에는 코드에 수많은 마법 숫자를 입력했습니다. 여백 너비, 텍스트 높이, 들여 쓰기 등

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

그래서 우리는 마법의 숫자를 추출하여 파일 위에 올려 놓습니다.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

이제 이것은 조금 추악합니다. 오히려 설정 파일에서 변수 번호를 읽습니다.

margin 100
table 500
text size 12

음, 조금 불분명합니다 ... 그 숫자는 무엇을 의미합니까? 그 이름은 무엇을 의미합니까? 조금 공식화합시다.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

그러나 우리는 프로그램을 조금 확장하고 싶습니다. 또한 여러 테이블이있는 페이지, 테이블이없는 페이지, 단락 또는 버튼이있는 페이지 등을 그리는 것이 좋습니다. 구성 파일에 선택자를 추가하여 더 큰 글꼴 또는 다른 텍스트 색상을 가진 단락을 지정할 수 있습니다. 중첩 된 요소를 지원할 수 있습니다. 구성 파일에서 일반 속성을 사용한 다음 특정 속성으로 재정의 할 수 있습니다. 중첩 된 요소 중 하나입니다.

당신은 이것이 어디로 가고 있는지 느끼고 결국 CSS로 도착합니다. (그리고 그것을 렌더링하는 브라우저)

매직 파일을 다시 피할 수 있도록 구성 파일에 기능을 추가해야합니까? 변수를 추가 하시겠습니까? CSS 파일의 구성 파일을 추가 하시겠습니까? CSS 파일 이 이미 동일한 구성 파일이라는 것을 기억하면 약간 의미 가 없습니다.

그러나 그것은 사실이 아닙니다. CSS 파일이 점점 커지고 결국 원래 마법 번호와 같은 문제가 발생합니다. 같은 숫자가 사방에서 반복되고 때로는 작은 변형 등이 있습니다.

그러나 현대 CSS는 이러한 반복을 피할 수있는 여러 방법을 허용합니다. 많은 요소에 적용되는 클래스를 사용할 수 있고 모든 스타일을 설정할 수 div있지만 특정 스타일을 재정의 할 수 있으며 CSS 3에서도 일부 변수 사용이 가능합니다.

그렇다고 가능한 모든 위치에서 CSS 변수를 사용해야한다는 의미는 아닙니다. 의미가있는 곳에서 사용하고 복제를 피하거나 다른 기술도 부족한 곳에서 사용하십시오.

결국, 구성 파일에 너무 많은 매직 넘버를 원하지 않습니다 :-)

CSS / SVG에 [왜 겉보기에는 무작위 하드 코딩 된 값들]이 괜찮습니까?

괜찮습니다. 그것은이다 가능한 일반 ".CSS"파일을 작성하고 유지하기 위해, 결국 임의의 하드 코딩 된 값이 널리 부담이 될 것입니다.

매우 간단한 웹 페이지가 아닌 다른 분야의 경우 훈련 된 "찾기 및 바꾸기"전략을 개발하거나 변수와 함께 CSS 프리 프로세서를 사용하거나 JavaScript를 통해 스타일을 정의해야합니다.