코드 스타일 가이드로 CSS를 최적화하는 방법

디자이너가 스타일 가이드에 관해 이야기 할 때, 그들은 보통 동의 한 매뉴얼 ~에 일관된 모양과 느낌 웹 사이트 또는 응용 프로그램의 색 구성표, 타이포그래피 및 UI 그것은 전체 프로젝트에서 사용됩니다..

웹 개발에도 사용할 수있는 또 다른 유형의 스타일 가이드가 있습니다.하지만 중요하게 다루기는하지만 훨씬 더 드물게 논의됩니다. 코드 자체에 대한 스타일 가이드. 코드 스타일 가이드는 디자이너보다는 개발자를위한 것이며, 주요 목표는 CSS 또는 다른 코드를 최적화하는 것입니다..

적절한 코드 스타일 가이드를 사용하면 보다 체계적이고 일관된 코드 기반, 개선 된 코드 가독성, 유지 보수가 용이 한 코드. Google, AirBnB 또는 Dropbox와 같은 주요 기술 업체가이 기술을 잘 사용하는 것은 우연이 아닙니다..

이 글에서는 CSS 코드 스타일 가이드를 통해 CSS를 현명하게 최적화 할 수있는 방법을 살펴 보겠습니다..

코드 스타일 가이드와 패턴 라이브러리 비교

우리 업계에서는 스타일 가이드라고 부를 수있는 것에 대해 어느 정도의 불확실성이 있습니다. 별개의 목록 예를 들어 용어와 동의어로 사용합니다. 패턴 라이브러리 이 기사에서는 다른 게시물에서도 이와 같은 정의에 부딪 힐 수 있습니다..

반면에 CSS Tricks 나 Brad Frost의 블로그와 같이 패턴 스타일 가이드와 패턴 라이브러리를 구별하는 간행물도 있습니다. 후자의 접근 방식을 사용하면 잘 최적화 된 웹 사이트에 더 가까이 다가 갈 수 있습니다. 코드와 디자인을 별도로 처리 할 수 있습니다., 우리는이 게시물에서 이것을 사용할 것입니다..

코드 스타일 가이드와 패턴 라이브러리에는 스타일 전략이 있지만 다른 종류가 있습니다. Bootstrap, Zurb Foundation, BBC의 Global Experience Language, MailChimp의 패턴 라이브러리와 같은 패턴 라이브러리는 사전 CSS 클래스, 타이포그래피, 색 구성표, 그리드 시스템 및 기타 디자인 패턴이있는 UI를 제공합니다.

Evernote 또는 ThinkUp (또는 소개에서 언급 한 것들)과 같은 CSS 코드 스타일 가이드에는 CSS 작성법에 관한 규칙 같은 것을 포함해서 명명 규칙, 파일 구조, 속성 순서, 코드 서식 지정, 다른 사람.

KSS, Styledown 또는 Pattern Lab과 같은 생활 스타일 가이드 생성기, 패턴 라이브러리 생성 과 아니 코딩 스타일 가이드. 패턴 라이브러리는 또한 매우 유용하고 웹 개발 프로세스를 향상 시키지만 코드 자체를 최적화 할 수는 없습니다.

CSS 코드 스타일 가이드 빌드

CSS 코드 스타일 가이드의 최종 목표는 모두 동일한 코드 스타일 규칙을 따르는 개발자가 작성한 일관성 있고 쉽게 디버그 가능한 코드 기반으로 작업 할 수 있도록하는 것입니다. CSS 코드 스타일 가이드를 만드는 데는 약간의 시간이 걸릴 수 있지만 그만하면됩니다. 그런 다음 서로 다른 프로젝트에서 동일한 스타일 가이드를 사용할 수 있습니다..

가장 중요한 스타일 가이드 스타일 규칙 자체를 포함 할뿐만 아니라 예제도 포함합니다. 이 방법으로 개발자는 규칙을 더 직관적으로 이해할 수 있습니다..

예를 들어 AirBnB는 다음과 같이 쉽게 소화 할 수있는 방식으로 개발자에게 좋고 나쁜 예를 보여줍니다.

파일 구조

먼저 CSS 파일을 구성 할 논리를 파악해야합니다. 작은 프로젝트의 경우 하나의 CSS 파일로 충분할 수 있지만 큰 파일의 경우 항상 코드를 해독하는 것이 좋습니다., 과 나중에 별도의 파일을 연결한다..

ThinkUp과 같은 일부 스타일 가이드는 또한 인라인 또는 임베디드 스타일을 사용하지 않음 부득이한 경우가 아니면; 그것은 또한 가치있는 적용 규칙입니다..

중첩

중첩은 CSS의 훌륭한 기능이지만 때로는 통제를 벗어날 수 있습니다. 어느 누구도 특별히 행복하다고 느끼지 않습니다. 특히 좌절스러운 디버깅 프로세스의 중간에, 이렇게 긴 선택자가 부딪 히고 있습니다.

 .class_1 .class_2 # id_1 # id_2 li span color : #bad;

그래서 항상 좋은 것입니다. 합리적인 중첩 제한 설정, 예를 들어 GitHub은 스타일 가이드에서 3 가지 레벨을 선택했습니다. 중첩을 제한함으로써 더 나은 구조화 된 코드를 작성하도록 할 수 있습니다..

이름 지정 규칙

CSS 선택기에 일관된 이름 지정 규칙을 사용하는 것은 나중에 몇 개월 또는 몇 년 후에 코드를 이해하려는 경우 매우 중요합니다. 많은 솔루션이 있습니다. 따라야 할 엄격한 규칙이 하나뿐입니다. 즉 선택자 이름은 숫자로 시작될 수 없습니다..

선택기 이름 지정에 사용되는 네 가지 공통 스타일은 다음과 같습니다. .소문자, .under_scores, .계기판, 과 .lowerCamelCase. 그 중 하나를 선택하는 것은 괜찮지 만 전체 프로젝트에서 동일한 로직을 따라야합니다..

사용 의미 론적 선택자 이름 만 우리가 원한다면 또한 필수적입니다. 의미있는 코드가있다.. 예를 들어, 대신 .빨간 버튼 (버튼의 기능이 표시되지 않음). .알림 버튼 이 방법으로, 우리는 개발자 (그리고 우리의 미래 자아)가 버튼이 무엇을하는지 이해할 수있게한다..

그 위에 우리가 미래의 색상을 빨간색에서 다른 색상으로 바꾸려면 번거 로움없이 쉽게 할 수 있습니다.. 또한 BEM (Block, Element, Modifier) 규칙과 같은 미리 만들어진 CSS 명명 규칙이 있습니다. 일관된 명명 구조를 얻는다. 독특하고 의미있는 이름으로.

서식 규칙

코드 포맷팅은 공백, 탭, 들여 쓰기, 줄 바꿈 등의 사용을 포함합니다. 실제로 보편적으로 좋은 방법이나 나쁜 방법이 아닙니다. 읽을 수있는 코드가되는 일관된 규칙을 선택하십시오., 그들을 따라 가라..

예를 들어 Dropbox는 개발자가 속성 선언에 콜론 뒤에 공백을 넣을 것을 요구하는 반면 Evernote는 들여 쓰기에 두 개의 공백을 사용합니다. 우리는 많은 형식 규칙을 편하게 설정할 수 있지만 결코 파악할 수없는 것 이상.

선언 명령

순서가 지정된 항목은 항상 쉽게 볼 수 있습니다. CSS 신고 주문 (값이있는 속성) 보다 체계적인 코드로 결과를 이해하는 규칙에 따라.

예를 들어 WordPress의 속성 순서 규칙을 살펴보면 속성이 의미별로 그룹화되는 순서에 대해 간단하지만 논리적 인 다음 기준을 정의합니다.

디스플레이
포지셔닝
박스 모델
색상 및 타이포그래피
다른

단위와 값

단위와 값을 사용하는 방법을 결정하는 것은 일관된 코드 모양을 얻는 것뿐만 아니라 그렇게하지 않으면 이상한 것으로 끝날 수도 있습니다

교대로 사용하는 사이트를 상상해보십시오. 픽셀, 여자 이름, 과 rem 길이 측정. 코드 편집기에서보기가 좋지 않을뿐만 아니라 일부 요소가 해당 사이트에서 놀라 울 정도로 작거나 큽니다..

또한 색상 값 (16 진수, rgb 또는 hsl)에 대한 결정과 축약 속성 사용 여부 및 규칙에 따라 결정해야합니다. 내가 부딪친 모든 CSS 코드 스타일 가이드에 포함 된 지침이 있습니다.. 0 값의 단위를 지정하지 않는다. (정말로, 그냥하지 마세요).

.class // 양호한 마진 : 0; // 여백 : 0px; // 여백 : 0em; // 나쁜 여백 : 0rem;

댓글 달기

주석 처리 코드는 모든 언어에서 필수적이지만 CSS에서는 필수적입니다. 디버깅 및 문서 작성을 용이하게 할뿐만 아니라 섹션 CSS 규칙을 논리 그룹. 우리는 / * ... * / 아니면 그 // ... CSS의 주석에 대한 표기법 스타일은 중요한 것입니다. 일관성을 유지하다 프로젝트 전반에 걸쳐 의견을 남겼다..

관용적 인 CSS는 예를 들어 기본적인 ASCII 아트를 사용하고 아름답게 체계화 된 코드를 생성하는 의미있는 주석 달기 시스템을 구축합니다.