프런트엔드 코딩 표준(4) - CSS 및 Sass(SCSS) 개발 표준

ID 및 클래스 이름 지정

항상 요소의 목적과 용도를 반영하는 ID 및 클래스 이름이나 기타 일반적인 이름을 사용하십시오. 외모와 모호한 이름 대신.

구체적이고 요소의 목적을 반영하는 이름은 가장 이해하기 쉽고 변경될 가능성이 가장 적기 때문에 선호되어야 합니다.

일반 이름은 여러 요소에 대한 대체 이름일 뿐이며 형제 요소 간에 동일하며 특별한 의미가 없습니다.
특별한 의미를 가지며 종종 "도우미"로 필요하도록 구별하십시오.

클래스 이름과 ID의 의미는 컴퓨터 구문 분석에 실질적인 의미가 없지만
의미론적 이름은 표현적 제한을 두지 않는 정보를 나타내기 때문에 일반적으로 올바른 선택입니다.

권장되지 않음

 .fw-800 {
글꼴 두께: 800;
}

.빨간색 {
색상: 빨간색;
}

추천하다

 .무거운 {
글꼴 두께: 800;
}

.중요한 {
색상: 빨간색;
}

합리적인 ID 회피

일반적으로 ID는 스타일에 적용되어서는 안 됩니다.
ID 스타일은 재사용할 수 없으며 페이지당 한 번만 ID를 사용할 수 있습니다.
ID를 효과적으로 사용하는 유일한 방법은 웹페이지나 전체 사이트 내에서 위치를 결정하는 것입니다.
그럼에도 불구하고, 한 번만 사용하지 않는 이상 항상 ID 대신 클래스 사용을 고려해야 합니다.

권장되지 않음

 #콘텐츠 .제목 {
글꼴 크기: 2em;
}

추천하다

 .내용 .제목 {
글꼴 크기: 2em;
}

ID 사용에 반대하는 또 다른 주장은 ID를 포함하는 선택기의 가중치가 높다는 것입니다.
하나의 ID만 포함하는 선택자는 1000개의 클래스 이름을 포함하는 선택자보다 가중치가 더 높기 때문에 이상합니다.

 // 이 선택자는 다음 선택자보다 더 높은 가중치를 갖습니다. #content .title {
색상: 빨간색;
}

// 이 선택자보다!
HTML 본문 div.content.news-content .title.content-title.important {
색상: 파란색;
}

CSS 선택기에서 태그 이름을 피하세요

선택기를 구성할 때 명확하고 정확하며 의미가 있는 클래스 이름을 사용해야 합니다. 태그 선택기를 사용하지 마세요. 코드 요소가 아닌 클래스 이름에만 관심이 있다면 유지 관리가 더 쉽습니다.

분리 관점에서 생각하면 html 태그/의미 체계는 프리젠테이션 레이어에 할당되어서는 안 됩니다.
순서가 있는 목록을 순서가 없는 목록으로 변경해야 할 수도 있고, 기사로 변환해야 하는 div일 수도 있습니다.
의미 있는 클래스 이름만 사용하는 경우
그리고 요소 선택기를 사용하지 않으면 CSS를 변경하지 않고 HTML 마크업만 변경하면 됩니다.

권장되지 않음

 div.content > header.content-header > h2.title {
글꼴 크기: 2em;
}

추천하다

 .content > .content-header > .title {
글꼴 크기: 2em;
}

최대한 정확하게

많은 프런트 엔드 개발자는 선택기 체인을 작성할 때 직접 하위 선택기를 사용하지 않습니다(참고: 직접 하위 선택기와 하위 선택기의 차이점).
때로는 이로 인해 고통스러운 디자인 문제가 발생할 수도 있고 성능이 많이 소모될 수도 있습니다.
그러나 어떤 경우에도 이는 매우 나쁜 습관입니다.
DOM의 끝과 일치해야 하는 매우 일반적인 선택기를 작성하지 않는 경우 항상 직접 하위 선택기를 고려해야 합니다.

다음 DOM을 고려해보세요.

 <article class="콘텐츠 뉴스-콘텐츠">
<span class="title">뉴스 이벤트</span>
<div 클래스="콘텐츠-본문">
<div class="제목 내용-제목">
이것을 확인해보세요
</div>

<p>뉴스기사 내용입니다</p>

<div 클래스="티저">
<div class="title">구매하기</div>
<div class="teaser-content">예!</div>
</div>
</div>
</article>

다음 CSS는 제목 클래스가 있는 세 요소 모두에 적용됩니다.
그런 다음 콘텐츠 클래스의 제목 클래스와 티저 클래스의 제목 클래스에서 다양한 스타일을 해결하려면 스타일을 다시 작성하는 더 정확한 선택기가 필요합니다.

권장되지 않음

 .내용 .제목 {
글꼴 크기: 2rem;
}

추천하다

 .content > .title {
글꼴 크기: 2rem;
}

.content > .content-body > .title {
글꼴 크기: 1.5rem;
}

.content > .content-body > .teaser > .title {
글꼴 크기: 1.2rem;
}

약어 속성

CSS는 하나의 값만 설정된 경우에도 가능할 때마다 사용해야 하는 다양한 약식 속성(예: 글꼴)을 제공합니다.

축약된 속성을 사용하는 것은 코드 효율성과 가독성에 유용합니다.

권장되지 않음

CSS 코드:

 테두리 상단 스타일: 없음;
글꼴 모음: palatino, georgia, serif;
글꼴 크기: 100%;
줄 높이: 1.6;
패딩 바닥: 2em;
왼쪽 패딩: 1em;
패딩 오른쪽: 1em;
패딩 상단: 0;

추천하다

CSS 코드:

 테두리 상단: 0;
글꼴: 100%/1.6 팔라티노, 조지아, 세리프;
패딩: 0 1em 2em;

0 및 단위

"0" 값 다음의 단위는 생략합니다. 값이 없는 한 0 값 이후에는 단위를 사용하지 마십시오.
권장되지 않음

CSS 코드:

 패딩 하단: 0px;
마진: 0em;

추천하다

CSS 코드:

 패딩 바닥: 0;
여백: 0;

16진수 표기법

가능하다면 3자리 16진수 표기법을 사용하세요.
색상값은 이렇게 표현이 가능하며,
3자리 16진수 표현은 더 짧습니다.

항상 소문자 16진수를 사용하세요.

권장되지 않음

 색상: #FF33AA;

추천하다

 색상: #f3a;

ID와 클래스 이름 구분 기호

ID 및 클래스 이름에서 단어를 구분하려면 하이픈(대시)을 사용하세요. 강의 이해도를 높이기 위해 선택기에서 단어와 약어를 연결하는 데 하이픈(대시) 이외의 문자(없음 포함)를 사용하지 마십시오.

또한 기본 속성 선택기는 표준적으로 [속성|=값]에 대한 단어 구분 기호로 하이픈(대시)을 인식합니다.
따라서 하이픈을 구분 기호로 사용하는 것이 가장 좋습니다.

권장되지 않음

 .데모이미지 {}
.error_status {}

추천하다

 #동영상 ID {}
.ads-샘플 {}

해킹

사용자 에이전트 감지 및 CSS '해킹'을 피하세요. 먼저 다른 접근 방식을 시도해 보세요. 스타일 차이는 사용자 에이전트 감지 또는 특수 CSS 필터를 통한 해결 방법 및 해킹을 통해 쉽게 해결됩니다. 효율적이고 관리 가능한 코드 기반을 달성하고 유지하기 위해서는 두 방법 모두 최후의 수단으로 간주되어야 합니다. 즉, 장기적으로는 사용자 에이전트 탐지 및 해킹이 가능합니다.
프로젝트는 항상 저항이 가장 적은 경로를 택해야 하므로 프로젝트에 해를 끼칠 수 있습니다. 즉, 사용자 에이전트 감지 및 해킹은 앞으로 너무 자주 사용될 수 있습니다.

선언 순서

이는 CSS 속성이 선택기 내에서 작성되는 순서에 대한 대략적인 개요입니다. 이는 더 나은 가독성과 스캔 가능성을 보장하는 데 중요합니다.

가장 좋은 방법은 다음 순서를 따르는 것입니다(아래 표의 순서를 따라야 함).

구조적 특성:
표시하다
위치, 왼쪽, 위쪽, 오른쪽 등
오버플로, 플로트, 클리어 등
마진, 패딩
표현 속성:
배경, 테두리 등
글꼴, 텍스트
권장되지 않음

 .상자 {
글꼴 계열: 'Arial', 산세리프;
테두리: 3px 솔리드 #ddd;
왼쪽: 30%;
위치: 절대;
텍스트 변환: 대문자;
배경색: #eee;
오른쪽: 30%;
디스플레이: 블록;
글꼴 크기: 1.5rem;
오버플로: 숨김;
패딩: 1em;
마진: 1em;
}

추천하다

 .상자 {
디스플레이: 블록;
위치: 절대;
왼쪽: 30%;
오른쪽: 30%;
오버플로: 숨김;
마진: 1em;
패딩: 1em;
배경색: #eee;
테두리: 3px 솔리드 #ddd;
글꼴 계열: 'Arial', 산세리프;
글꼴 크기: 1.5rem;
텍스트 변환: 대문자;
}

진술의 끝

일관성과 확장성을 보장하려면 각 문은 세미콜론으로 끝나고 각 문을 새 줄에 묶어야 합니다.

권장되지 않음

 CSS 코드:
.시험 {
디스플레이: 블록 높이: 100px
}

추천하다

CSS 코드:

 .시험 {
디스플레이: 블록;
높이: 100px;
}

속성 이름 끝

속성 이름에서 콜론 뒤에 공백을 사용합니다. 일관성을 이유로
속성과 값 사이에는 항상 공백을 사용하십시오(단, 속성과 콜론 사이에는 공백이 없습니다).

권장되지 않음

CSS 코드:

 h3 {
글꼴 두께:굵게;
}

추천하다

 CSS 코드:
h3 {
글꼴 두께: 굵게;
}

선택자와 선언의 분리

각 선택기와 속성 선언에는 항상 새 줄을 사용하세요.

권장되지 않음

CSS 코드:

 a:포커스, a:활성 {
위치: 상대; 상단: 1px;
}

추천하다

CSS 코드:

 h1,
h2,
h3 {
글꼴 두께: 보통;
줄 높이: 1.2;
}

규칙 분리

규칙은 항상 빈 줄(이중 줄 바꿈)로 구분됩니다.

추천하다

CSS 코드:

 HTML {
배경: #fff;
}

몸 {
여백: 자동;
너비: 50%;
}

CSS 인용문

속성 선택자 또는 속성 값을 작은따옴표(") 대신 큰따옴표("")로 묶습니다.
URI 값(url())에 따옴표를 사용하지 마세요.

권장되지 않음

CSS 코드:

 @import url('//cdn.com/foundation.css');

HTML {
글꼴 모음: 'open sans', arial, sans-serif;
}

본문:{ 이후
내용: '일시중지';
}

추천하다

CSS 코드:

 @import url(//cdn.com/foundation.css);

HTML {
글꼴 모음: "open sans", arial, sans-serif;
}

본문:이후 {
내용: "일시중지";
}

선택기 중첩(SCSS)

Sass에서는 선택기를 중첩하여 코드를 더 깔끔하고 읽기 쉽게 만들 수 있습니다. 모든 선택기를 중첩하되 콘텐츠 없이 선택기를 중첩하지 않도록 하세요.
하위 요소에 대해 일부 스타일 속성을 지정해야 하는데 상위 요소에 스타일 속성이 없는 경우,
일반 CSS 선택기 체인을 사용할 수 있습니다.
이렇게 하면 스크립트가 너무 복잡해 보이는 것을 방지할 수 있습니다.

권장되지 않음

CSS 코드:

 // 중첩을 전혀 사용하지 않아서 좋은 예는 아닙니다.
.콘텐츠 {
디스플레이: 블록;
}

.content > .news-article > .title {
글꼴 크기: 1.2em;
}

권장되지 않음

CSS 코드:

 // 중첩을 사용하는 것이 더 좋지만 모든 경우에 해당되는 것은 아닙니다.
// 속성이 없으면 중첩을 피하고 대신 선택기 체인을 사용합니다.
.콘텐츠 {
디스플레이: 블록;

> .news-기사 {
> .제목 {
글꼴 크기: 1.2em;
}
}
}

추천하다

CSS 코드:

 // 이 예는 중첩하는 동안 최선의 접근 방식을 취하지만 가능하면 선택기 체인을 사용합니다.
.콘텐츠 {
디스플레이: 블록;

> .news-기사 > .title {
글꼴 크기: 1.2em;
}
}

중첩에 빈 줄 도입(SCSS)

중첩된 선택기와 CSS 속성 사이에 빈 줄을 남겨두세요.

권장되지 않음

CSS 코드:

 .콘텐츠 {
디스플레이: 블록;
> .news-기사 {
배경색: #eee;
> .제목 {
글꼴 크기: 1.2em;
}
> .article-footnote {
글꼴 크기: 0.8em;
}
}
}

추천하다

CSS 코드:

 .콘텐츠 {
디스플레이: 블록;

> .news-기사 {
배경색: #eee;

> .제목 {
글꼴 크기: 1.2em;
}

> .article-footnote {
글꼴 크기: 0.8em;
}
}
}

상황별 미디어 쿼리(SCSS)

Sass에서는 선택기를 중첩할 때 상황별 미디어 쿼리를 사용할 수도 있습니다.
Sass에서는 특정 중첩 수준에서 미디어 쿼리를 사용할 수 있습니다.
결과 CSS는 미디어 쿼리가 래핑된 선택기로 렌더링되도록 변환됩니다.

이 기술은 매우 편리하며,
미디어 쿼리가 속한 컨텍스트를 유지하는 데 도움이 됩니다.

첫 번째 접근 방식을 사용하면 먼저 모바일 스타일을 작성한 다음 상황별 미디어 쿼리를 사용하여 필요할 때마다 데스크톱 스타일을 제공할 수 있습니다.

권장되지 않음

CSS 코드:

 // 이 모바일 우선 예시는 SCSS의 전체 구조가 반복되는 일반 CSS처럼 보입니다.
// 미디어 쿼리의 맨 아래에 있습니다. 이는 오류가 발생하기 쉽고 관련시키기가 쉽지 않기 때문에 유지 관리를 더 어렵게 만듭니다.
// 미디어 쿼리의 내용을 상단의 내용으로 (모바일 스타일)

.content-페이지 {
글꼴 크기: 1.2rem;

> .메인 {
배경색: 흰 연기;

> .최신 뉴스 {
패딩: 1rem;

> .news-기사 {
패딩: 1rem;

> .제목 {
글꼴 크기: 2rem;
}
}
}

> .콘텐츠 {
여백 상단: 2rem;
패딩: 1rem;
}
}

> .page-footer {
여백 상단: 2rem;
글꼴 크기: 1rem;
}
}

@미디어 화면 및 (최소 너비: 641px) {
.content-페이지 {
글꼴 크기: 1rem;

> .main > .latest-news > .news-article > .title {
글꼴 크기: 3rem;
}

> .page-footer {
글꼴 크기: 0.8rem;
}
}
}

추천하다

CSS 코드:

 // 이는 위와 동일한 예이지만 여기서는 다양한 스타일을 적용하기 위해 상황별 미디어 쿼리를 사용합니다.
// 다양한 미디어를 올바른 컨텍스트에 적용합니다.

.content-페이지 {
글꼴 크기: 1.2rem;

@미디어 화면 및 (최소 너비: 641px) {
글꼴 크기: 1rem;
}

> .메인 {
배경색: 흰 연기;

> .최신 뉴스 {
패딩: 1rem;

> .news-기사 {
패딩: 1rem;

> .제목 {
글꼴 크기: 2rem;

@미디어 화면 및 (최소 너비: 641px) {
글꼴 크기: 3rem;
}
}
}
}

> .콘텐츠 {
여백 상단: 2rem;
패딩: 1rem;
}
}

> .page-footer {
여백 상단: 2rem;
글꼴 크기: 1rem;

@미디어 화면 및 (최소 너비: 641px) {
글꼴 크기: 0.8rem;
}
}
}

중첩된 순서 및 상위 선택기(SCSS)

Sass의 중첩 기능을 사용할 때,
중요한 것은 명확한 중첩 순서를 갖는 것입니다.
다음은 SCSS 블록이 가져야 하는 순서입니다.

현재 선택기의 스타일 속성 <br/>상위 선택기의 의사 클래스 선택기(:first-letter, :hover, :active 등)
의사 클래스 요소(:before 및 :after)
상위 선택자의 선언 스타일(.selected, .active, .enlarged 등)
Sass의 상황별 미디어 쿼리 하위 선택기를 최종 부분으로 사용
다음 예는 Sass 상위 선택자를 사용하면서 이 순서가 어떻게 명확한 구조를 달성하는지 보여줍니다.

추천

CSS 코드:

 .제품-티저 {
// 1. 스타일 속성
디스플레이: 인라인 블록;
패딩: 1rem;
배경색: 흰 연기;
색상: 회색;

// 2. 상위 선택자가 있는 의사 선택자
&:호버 {
색상: 검정색;
}

// 3. 상위 선택자가 있는 의사 요소
&:전에 {
콘텐츠: "";
디스플레이: 블록;
테두리 상단: 1px 단색 회색;
}

&:후에 {
콘텐츠: "";
디스플레이: 블록;
테두리 상단: 1px 단색 회색;
}

// 4. 상위 선택자가 있는 상태 클래스
&.활동적인 {
배경색: 분홍색;
색상: 빨간색;

// 4.2. 상태 클래스 선택기의 의사 선택기
&:호버 {
색상: 진한 빨간색;
}
}

// 5. 상황별 미디어 쿼리
@미디어 화면 및 (최대 너비: 640px) {
디스플레이: 블록;
글꼴 크기: 2em;
}

// 6. 하위 선택자
> .content > .title {
글꼴 크기: 1.2em;

// 6.5. 하위 선택기의 상황별 미디어 쿼리
@미디어 화면 및 (최대 너비: 640px) {
글자 간격: 0.2em;
텍스트 변환: 대문자;
}
}
}