좋은 CSS 작성하기

게시 됨: 2016-10-17

나는 항상 새로운 것을 배우려고 노력합니다. 그러나 나는 또한 이미 하고 있는 방식을 개선 하는 방법을 배우려고 노력합니다. 풀타임 공연과 클라이언트 측 프로젝트 모두에서 내가 항상 개선하고 싶었던 것은 CSS였습니다. CSS에 관해서는 항상 내가 꽤 괜찮다고 느꼈지만 항상 읽기가 지저분하고 유지 관리하기 어려운 경우가 많습니다.

내가 하려고 했던 것은 무엇이 훌륭하고 읽기 쉽고 유지 관리 가능한 CSS를 만드는지 찾는 것입니다. 나는 이 모든 것을 가능하게 하는 몇 가지 방법을 생각해 냈고(찾았다고) 생각합니다.

문제

CSS에 대해 나를 괴롭히는 몇 가지 사항이 있습니다. 내가 가지고 있는 가장 일반적인 성가심은 다음과 같습니다.

  • 공통 코드 반복
  • 브라우저 접두사
  • 댓글 부족
  • 자격을 갖춘 선택자보다
  • 가난한 클래스 이름

내 개인 프로젝트에 관해서는 내 코드에 대한 전적인 책임을 집니다. 나는 CSS에 대해 거의 논평을 하지 않으며, 종종 그것을 나중에 생각하는 것으로 취급합니다. 그것은 잘못된 것입니다.

오랫동안 나는 내 클래스 이름이 "의미론적"이고 내가 하는 일이라고 생각했기 때문에 코드나 약간의 "해킹" 등을 설명할 필요가 없습니다.

오랜 프로젝트에 대한 코드로 다시 돌아오면 이 이론이 매우 틀렸다는 것이 빠르게 증명됩니다.

직장에서 코드에 관해서는 모든 책임을 질 수 없습니다. 사실, 문제의 일부는 거기에 손을 댄 사람들의 수입니다. 현재 우리 팀에는 어느 시점에서 우리 사이트에 대한 CSS를 작성한 우리 중 7명이 있고 또 다른 6-8명이 왔다가 갔다 연령. 팀의 각 구성원은 CSS에 대한 다양한 수준의 지식과 능력을 가지고 있습니다.

또한 오래 지속되는 프로젝트의 경우와 마찬가지로 일부 코드는 오래 되었습니다. 그 중 많은 부분이 CSS3 이전이거나 5년 전의 트렌드가 무엇이든 간에 이전입니다. 두 경우 모두 작성 당시 작업 방식이 서로 다른 경우가 많았고 어떤 경우에는 선천적으로 지식이 부족했습니다.

나는 또한 일부 프로그래머가 자신의 코드가 "자체 문서화"라고 주장할 것이라는 것도 배웠습니다. 이 용어에 익숙하지 않다면 "내 코드에 주석이 없습니다"로 번역됩니다.

솔루션

완벽한 것은 없지만 코드를 개선하기 위해 우리가 할 수 있는 일이 있다고 생각합니다. 얼마 전에 Harry Roberts의 CSS 가이드라인을 발견했습니다. Itt는 "정상적이고 관리 가능하며 확장 가능한 CSS 작성을 위한 높은 수준의 조언 및 지침"이라는 약속을 지키고 있습니다.

코멘트

CSS 가이드라인은 주석 스타일에 대한 세부 정보를 제공하지만 저는 개인적으로 미래에 제가 생각한 것을 알려주기 위해 무언가 를 입력하려고 합니다. 나는 제목을 나타내는 주석으로 모든 구성 요소를 시작하고 구성 요소의 의도에 대해 자세히 설명 합니다.

전처리기를 사용할 때 CSS에 포함하거나 전처리기에 의해 건너뛸 특정 주석의 스타일을 지정합니다. 이 부분은 계속 작업 중이고, 무언가 , 무엇이든 넣는 습관을 들이려고 합니다.

객체 지향

객체 지향은 큰 것을 작은 것으로 나누는 프로그래밍 패러다임입니다. 위키피디아에서:

객체 지향 프로그래밍(OOP)은 일반적으로 클래스의 인스턴스인 '객체'의 개념을 나타내는 프로그래밍 패러다임이며 […] 응용 프로그램과 컴퓨터 프로그램을 설계하기 위해 서로 상호 작용하는 데 사용됩니다.

CSS와 관련하여 우리는 이것을 객체 지향 CSS 또는 OOCSS라고 부릅니다 . 기본 개념은 요소의 스킨 에서 요소의 구조 를 분리합니다. 이는 특정 구현 세부 사항을 동시에 재사용할 필요 없이 반복되는 디자인 패턴을 쉽게 재사용할 수 있음을 의미합니다. OOCSS는 코드 재사용에 중점을 두어 더 빠르게 만들고 코드베이스의 크기를 줄일 수 있습니다.

골격과 같은 구조적 측면을 생각합니다. 객체 로 알려진 구성을 제공하는 공통 프레임. 화장품을 전혀 사용하지 않은 심플한 디자인의 오브제들입니다. 일반 개체를 갖기 위해 구성 요소 집합에서 구조를 추상화합니다.

그런 다음 선택적으로 "스킨" 레이어를 구조에 추가하여 추상화에 특정 모양과 느낌을 줄 수 있습니다. 예를 들어(CSS 지침에서 가져옴):

 /**
 * 단순하고 디자인이 없는 버튼 개체입니다. `.btn--*` 스킨으로 이 개체를 확장합니다.
 * 수업.
 */
.btn {
    디스플레이: 인라인 블록;
    패딩: 1em 2em;
    수직 정렬: 중간;
}

/**
 * 긍정적인 버튼의 피부. `.btn`을 확장합니다.
 */
.btn--양성 {
    배경색: 녹색;
    색상: 흰색;
}

/**
 * 네거티브 버튼의 스킨. `.btn`을 확장합니다.
 */
.btn--음수 {
    배경색: 빨간색;
    색상: 흰색;
}

여기에서 우리는 .btn 클래스가 단순히 요소에 구조를 제공하지만 화장품에 대해서는 아무 것도 제공하지 않는 방법을 봅니다. .btn 을 .btn--positve 와 같은 두 번째 클래스로 확장 하여 해당 요소에 보다 구체적인 스타일을 지정할 수 있습니다.

 <button class="btn btn--positive">확인</button>

전처리기에서 @extend 와 같은 것을 사용하는 것보다 HTML에서 여러 클래스를 사용하는 것을 훨씬 선호합니다. 이렇게 하면 HTML에서 더 많은 가시성을 얻을 수 있으므로 요소에 어떤 클래스가 적용되는지 빠르게 확인할 수 있습니다. 그것은 또한 내 클래스가 내 CSS의 다른 스타일에 밀접하게 바인딩되어 있지 않다는 것을 의미합니다. 그것은 일종의 캡슐화 개념을 따르는 OOCSS를 돕습니다.

BEM

BEM ( Block, Element, Modifier )은 Yandex에서 개발한 프런트 엔드 방법론입니다. BEM은 실제로 매우 완전한 방법론이며 솔직히 모든 세부 사항을 파헤친 것은 아니지만 제가 관심을 갖는 것은 단순히 명명 규칙입니다.

나는 BEM 과 같은 명명 규칙을 사용하고 있습니다. 개념은 동일하지만 정확한 구문은 약간 다를 수 있습니다.

BEM은 수업을 세 그룹으로 나눕니다.

  1. 블록: 구성 요소의 루트 또는 베이스
  2. 요소: 블록 내부의 구성요소
  3. 수정자: 블록의 변형 또는 확장

매우 기본적인 비유(예제 아님 ):

 .개 {}
.dog__tail {}
.dog--작은 {}

요소는 두 개의 밑줄(__)로 구분되고 수정자는 두 개의 하이픈(-)으로 구분됩니다.

위의 비유에서 .dog 이 요소의 루트인 블록임을 알 수 있습니다. 그런 다음 .dog__tail 은 요소이며 .dog 블록의 작은 부분입니다. 마지막으로 .dog--small 은 .dog 블록의 특정 변형인 수정자입니다. 요소에 수정자를 적용할 수도 있습니다. 예를 들어, 우리는 .dog__tail--short 다시 dog__tail 요소에 대한 변형을 지정할 수 있습니다.

어떤 경우에는 블록, 요소 또는 수정자에 대해 여러 단어가 필요할 수 있습니다. 어떤 경우든 하나의 하이픈(-)으로 구분되며 클래스는 항상 소문자 로 작성됩니다.

전처리기

저는 CSS 전처리기를 제 작업 흐름에 적용하는 데 시간을 보냈고 지금까지 매우 가치가 있었습니다. CSS 전처리기는 전처리된 언어로 작성된 코드를 가져와 좋은 오래된 CSS로 변환합니다. 그것들은 CSS가 아닙니다 . 즉, CSS의 동일한 규칙과 제한 사항에 구속되지 않습니다. CSS는 훌륭하지만 항상 하고 싶은 일을 쉽게 할 수 있는 것은 아닙니다.

예를 들어 CSS에서 정말 좋은 것은 변수 입니다. 한 요소의 왼쪽 여백이 다른 요소의 너비와 같도록 하려는 경우 갑자기 누군가가 해당 숫자를 변경해야 한다고 결정합니다. 그것들은 같은 숫자이고 레이아웃이 그 숫자에 의존할 수 있기 때문에 한 곳 이상을 변경해야 합니다. 그러나 varibale 를 사용하면 한 곳에서 변경하여 전체 레이아웃에 반영할 수 있습니다. 물론, 전처리기에는 변수보다 더 많은 것이 있지만, 그것은 시작입니다!

분명히 전처리기를 사용할 필요 는 없지만, 전처리기를 사용하고 되돌아가지 않는 대부분의 사람들을 찾을 수 있을 것입니다. 난 안 할 거 알아. 유연성 향상과 가독성 향상은 제가 포기할 수 없는 부분입니다. 단순히 변수 와 믹스인을 사용할 수 있다는 것만으로도 계속 빠져들 수 있습니다.

사용 가능한 여러 전처리기가 있지만 실제로 살펴보고 사용한 것은 LESS 및 SASS뿐입니다 . 살펴보고 이들 중 하나를 워크플로에 추가하는 것을 고려하십시오. 뒤돌아보지 않을 것입니다.

결론

여기서 내 진짜 요점은 CSS가 더 나을 수 있다는 것입니다. 모든 것이 더 나아질 수 있습니다. 누군가 Reddit의 게시물에 대한 댓글에서 "CSS에는 의미 체계가 없습니다"라고 말했습니다. 나는 전적으로 동의하지 않습니다. CSS 100%는 의심할 여지 없이 의미론적일 수 있습니다.

실제로 OOCSS와 BEM을 사용하면 CSS에 매우 의미 있는 의미를 부여할 수 있습니다. 이것이 바로 시작 하기 쉽다 는 의미는 아니지만 탐색할 가치가 있습니다. 이를 CSS 전처리기와 결합하면 매우 읽기 쉽고, 유지 관리 가능하고, 확장 가능한 CSS를 만들 수 있습니다.

또한 이것은 CSS(전처리 여부)를 더 읽기 쉽게 만들 뿐만 아니라 의미론적 클래스 이름을 요소에 적용하여 HTML을 더 읽기 쉽게 만듭니다.

TL;DR

좋아, 아마도 그게 많았을 것입니다. 요약하자면 다음과 같이 하여 더 나은 CSS를 작성하십시오.

객체 지향 CSS :

  • 각 클래스는 한 가지 작업을 수행합니다.

블록, 요소, 수정자(BEM) 스타일 클래스 이름 :

  • 블록: .grid
  • 요소: .grid__item (밑줄 2개)
  • 수정자: .grid--wide (하이픈 2개)

전처리기는 훌륭합니다 .

  • 그것들을 확인하십시오: LESS – SASS
  • 또는 다른 사람 찾기: 개발 시간을 단축하는 8 CSS 전처리기