CSS의 정의 방법 체계: 선택기와mixin의 정의 방법에 따라 구분하여 사용

1. 개요

CSS 관점에 대한 의사록을 작성합니다.

프로그래머의 관점에서 디자인 이론에서 언급하지 않은 부분을 고려한다.

(1) 사전 요구 사항

SASS를 이용하여 CSS를 제작합니다.(2021년까지 Dart-sass+SCSS가 많았음)

(2) 방침

DRY, KISS의 원칙에 근거한다.

불필요한 문자열을 사용하지 않고 이름을 최대한 간소화합니다.(예비 없음)

2. 스타일 정의 방법의 분류

스타일의 정의 방법으로서 선택기와mixin이 정의한 두 가지 형식으로 나뉜다.
함수는 수치 계산 등에 사용되며 정의에 사용되지 않습니다.

(1) 선택기로 정의

HTML 요소, id, class 등을 정의하고 스타일을 정의합니다.

CSS로 사용자에게 보내는 브라우저입니다.(정의 및 실행 수반)

(2)mixin의 정의

자신의 이름으로 스타일을 정의한다.

는 여러 정의의 단축키를 모으는 역할을 한다.

CSS를 직접 생성하거나 브라우저에 보내지 않습니다.(정의만 하고 실행하지 않음)

유니버설 스타일의 정의는mixin에 단축키를 만들어서 선택기에 사용합니다.

브라우저에서 실제로 사용되지 않기 때문에 예상치 못한 방해를 방지할 수 있습니다.

3. 정의 방법의 장점과 단점

선택기

선택기의 정의가 화면에 영향을 미친다.널리 사용함으로써 CSS의 정의 수를 줄일 수 있다.

상술한 바와 같이 무의식적으로 여러 정의를 제정함으로써 예상치 못한 영향을 미칠 수 있다.

선택기 이름의 방법과 원본의 설정을 고려하여 가능한 한 최소한의 수량으로 정의하면 문제를 줄일 수 있다.

mixin

화면에 영향을 주지 않기 때문에 통용되고 미세한 정의는mixin으로 예상치 못한 영향을 억제할 수 있다.

다른 한편, 믹슨은 교체되고 CSS의 사이즈는 증가한다.

선택기의 정의를 최소화하고 그 중에서 호출한 결과 합계가 비교적 적은 코드 수가 나왔다.

4. 방법을 정의하는 장소

선택기

표준적인 정의 방법과mixin 등의 정의를 조합하여 화면의 위젯을 정의한다.

_box.scss

@use "config" as c;

.g-box {
  border: solid 1px map-get(c.$color-set, "box-line-gray");
}

mixin

화면 위젯이 아니라 일반적이고 작은 범위를 정의하는 위젯입니다.

한 줄로 여러 줄을 호출할 수 있다.

css의 기준에서 분명히 간단한 것인데도 별명을 붙여 이해하기 쉽게 했다.

_magin.scss

@mixin h-center-margin {
  margin-left: auto;
  margin-righ: auto;
}

@mixin v-center-margin {
  margin-top: auto;
  margin-bottom: auto;
}

5. 마지막

나는 선택기와 믹스를 교묘하게 분리해서 사용하면 예상치 못한 영향을 줄일 수 있고 구축된 CSS의 코드 크기를 억제할 수 있다고 생각한다.