CSS 방법론

반응형

CSS를 쓰는 것은 쉽다. 확장 가능하고 유지 보수 가능하게 만드는 것은 그렇지 않습니다.

• 앱의 CSS를 업데이트하고 다른 것을 깨트렸을 때 시나리오를 경험하셨나 보네요?
• 당신이 바꿔야 할 CSS가 어디서 오는지 궁금했나요?
• HTML을 업데이트했는데 디자인이 망가졌나요?
• 당신은 왜 그것이 브라우저에 적용되지 않았고 그리고나서 결국 다른 CSS에 의해 오버라이드 된 것을 발견했는지 궁금해 한 적이 있는가?

이것은 여러분이 더 나은 방법이 있다고 결정하고 CSS 방법론을 발견했을 때입니다. 이것은 모든 두통에 대한 좋은 해결책으로 보입니다.

CSS 방법론에는 여러 가지가 있지만, 결국 여러분의 프로젝트에 맞는 것이 무엇이냐가 관건입니다.

또한, 여러분은 그것들이 없어도 완벽하게 괜찮다고 생각할 수 있고 여러분이 맞을 수도 있습니다. 하지만 큰 개선 사항도 놓칠 수 있습니다. 최소한 밖에 뭐가 있는지 왜 사용하는지 알 수 있어야지

 

중요한 것은 CSS 코드 유지 및 재사용입니다

대방출!!!
최고의 CSS 방법론은 없다. 그것은 당신과 당신의 프로젝트의 종류에 따라 다릅니다.

상위 3가지 CSS 방법론:

• OOCSS(객체 지향 CSS)
• BEM(블록 요소 수정자)
• SMACSS (확장 가능한 모듈형 아키텍처 CSS)
   
  OOCSS 방법론
• CSS에 모듈식 접근 방식을 적용하면 시간을 절약할 수 있습니다.
  웹 구성요소는 웹의 미래이며 지금 시작하는 것이 당신의 삶을 더 쉽게 만들어 줄 것입니다.
  애플리케이션의 각 부분은 최종 결과를 작성하는 데 도움이 되며, 다른 작업을 중단하지 않고 이동하거나 교체할 수 있어야 합니다. 이것은 대부분의 CSS 방법론이 지향하는 목표이다.
• OOCSS는 Object Oriented CSS의 약자입니다.
• OOCSS는 일반적인 CSS 스타일을 재사용 가능한 클래스로 변환하는 것과 관련이 있습니다.
• OOCSS에는 두 가지 주요 원칙이 있다.

1. 구조와 피부를 분리한다:
   구조는 피부는 보이는 스타일(색상, 글꼴, 그림자)인 반면 요소(너비, 높이, 여백, 패딩)에 적용된 보이지 않는 스타일을 나타냅니다.
   OOCSS는 이 두 가지를 별도로 정의한다. 예를 들어, 아래에는 CSS의 임의 조각이 있습니다.
2. .button-1 { width: 100px; height: 50px; background: #000; color: #fff; } .button-2 { width: 100px; height: 50px; background: #fff; color: #333; }

앞의 예에서 볼 수 있듯이 두 클래스는 구조는 같지만 피부 특성이 다릅니다. OOCSS는 이러한 상황을 다루며 다음과 같이 구분한다.

 

.button-1 {
      background: #000;
      color: #fff;
}

 .button-2 {
       background: #fff;
       color: #333;
 }

 .btn-structure {
       width: 100px;
       height: 50px;
 }

이제 우리는 중복 코드가 없으며 .btn-구조체 클래스는 동일한 구조를 가진 모든 버튼에서 사용할 수 있습니다.

2. 별도 용기 및 내용물:
   내용은 컨테이너 역할을 하는 다른 요소 내부에 내포된 이미지, 문단, 점 등의 요소를 말합니다. 내용 요소에 사용되는 CSS 유형은 상위 요소에 대한 제한 없이 사용할 수 있도록 컨테이너 클래스와 독립적이어야 합니다. 예를 들어, 사이드바 구성요소의 스타일을 다루는 임의의 코드 조각입니다.

#sidebar {
      left: 0;
      margin: 3px;
      position: absolute;
      width: 140px;
}

#sidebar .list {
      margin: 3px;
}
#sidebar .list .list-header {
      font-size: 16px;
      color: red;
} 

#sidebar .list .list-body {
      font-size: 12px;
      color: #FFF;
      background-color: red;
}

그러나 컨테이너에서 콘텐츠를 분리하면 다음과 같습니다.

 

#sidebar {
    padding: 2px;
    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;
}

.list {
    margin: 3px;
}

.list-header {
    font-size: 16px;
    color: red
}

.list-body {
    font-size: 12px;
    color: #FFF;
    background-color: red;
}

이제 이러한 클래스는 ID가 #sidebar 또는 .list인 부모 없이 많은 상황에서 사용할 수 있습니다.

OOCSS의 장점:

• 확장성 및 재사용 가능성 향상.
• 가독성이 향상되었습니다.

OOCSS의 단점:

 

• 소규모 프로젝트에는 적합하지 않습니다.
• 그것은 수업의 수를 증가시킨다.

BEM 방법론

BEM은 Block-Element-Modifier의 약자입니다.
CSS의 사용이 더 이상 개인 웹사이트나 소규모 프로젝트에 그치지 않고 크고 확장 가능하며 복잡한 프로젝트로 옮겨갈 때, CSS를 위한 아키텍처를 구성하고 생각할 필요가 있다. 클래스 이름 지정과 같은 간단한 것들이 향후 유지보수에 큰 문제가 될 수 있습니다.
이와 같은 문제를 해결하기 위해 일부 조직 아키텍처와 방법론이 만들어졌으며 가장 인기 있는 것 중 하나가 BEMCSS이다.

BEM은 무엇입니까?

• 이 두문자어는 기본적으로 CSS 클래스의 이름을 만드는 방법인 Block-Element-Modifier에서 유래되었습니다.
• 클래스 명명 기준을 엄격하게 만들어 클래스가 무엇을 하고 어떤 구성 요소를 대상으로 하는지를 쉽게 읽고 이해할 수 있도록 하자는 취지다.

 

클래스 이름이 줄을 따릅니다.
.block__block--수정자 {}

• 여기서 참고할 점은 블록과 요소를 구분하는 두 개의 밑줄과 수정자에서 구분하는 두 개의 선이 있다는 것입니다.
• 블록:
• 블록은 독립적인 모듈형 UI 구성 요소입니다.
• 블록은 여러 HTML 요소 또는 여러 블록으로 구성될 수 있습니다.
   
  예: .login, .select-box-container
• 요소:
• 따라서 기본적으로 블록은 클래스가 할당되는 요소 또는 구성요소입니다. 요소 이름을 존중할 필요는 없으며, 요소 이름이 프로젝트의 범위에서 구성 요소가 수행하는 작업을 설명하는 것이 핵심입니다. 예를 들어, 로그인 양식에 대한 클래스를 만들 경우 HTML에서 양식을 만들더라도 이름은 .form이 아닙니다.
  프로젝트의 범위에서 클래스는 입니다.로그인하면 모든 사람에게 무엇에 대한 것인지 명확히 알 수 있습니다. 일반적인 명명 규칙은 복합 이름을 하나의 대시로 구분하는 것인데, 예를 들어 .select-box-container는 세 개의 단어로 이름을 쓰는 올바른 방법이다.
• 요소는 블록의 구성요소입니다. 각 원소는 하나의 목적을 가지고 있다.
• 예를 들어, 네비게이션 메뉴 블록이 있는 경우, 해당 블록의 요소는 목록 항목(li 요소)과 앵커 태그(요소)의 형식으로 탐색 메뉴의 링크일 수 있습니다.수정자:
  수정자는 블록 또는 요소의 기본 표시를 변경하는 CSS 클래스입니다.
  예를 들어, 사용자가 비밀번호나 이메일과 일치하지 않는 것을 입력에 넣었을 때 이를 확인하는 체크가 있을 때, 예를 들어 오류의 시각적 피드백은 잘못된 입력의 가장자리 색상을 빨간색으로 변경하여 수행될 수 있다. 이 경우를 만드는 데 사용되는 한정자 클래스는 다음과 같습니다.
  .vhd_e-mail--오류 {}
   
  기억해야 할 점:
• 수식어는 블록 전체에 사용될 수 있으며 요소의 존재를 무시한 채 클래스에서 블록 위에 직접 적용될 수 있다. 예를 들어 .login-error {}이(가) 있습니다.
• 요소는 구성요소의 내부 부분입니다. 이전 슬라이드의 예에서 로그인 블록에는 사용자 이름, 이메일, 암호 및 몇 개의 작업 버튼에 대한 여러 입력이 있습니다.
  따라서 블록 요소를 위한 CSS 클래스 명명 규칙은 다음과 같습니다.
  .vs_password, .vs_email, .vs_password, .vs_button_button
• 우리는 각각의 요소들이 분리된 방식으로 분류된다는 것을 기억해야 합니다. 예를 들어, 요소에 다른 요소가 있는 경우 다음과 같이 요소를 단일 클래스로 결합하는 것은 올바르지 않습니다.
• .block__class1__class2__class3 {}

• 이러한 경우 각 요소는 HTML 구조의 순서를 무시하고 자체 클래스를 가집니다.

.block {}
.block__class1 {}
.block__class2 {}
.block__class3 {}

 

BEM의 장점은 다음과 같습니다.

• BEM은 매우 강력한 클래스 명명 규칙이다.
• 그것은 수업이 사용되는 다양한 관심사를 성공적으로 구분합니다.
• 어떤 클래스가 서로 관련되어 있는지 마크업에서 쉽게 확인할 수 있습니다.

BEM 사용의 단점:

• 학급 이름이 길고 못생길 수 있습니다.
• 이름 지정 규칙은 경험이 부족한 개발자에게는 직관적이지 않습니다.

SMACSS 방법론

 

• SMACSS는 CSS를 위한 확장 가능 및 모듈식 아키텍처를 의미합니다.
• SMACSS는 BEM보다 더 간단한 명명 규칙을 제공한다.
• 기본 스타일에는 { h1, p, a 등과 같은 유형 선택기만 사용되므로 클래스 이름은 없습니다.
• 모듈에는 고유한 클래스 이름이 지정됩니다. 또한 SMACSS에서 하위 구성요소와 변형은 상위 모듈의 이름과 함께 앞에 붙는다.
• SMACSS는 프레임워크라기보다는 스타일 가이드이다.

SMACSS는 CSS를 다음과 같은 5가지 범주로 구성하는 것을 목표로 합니다.

1) 기준: 기본 규칙은 의사 클래스와 함께 요소 선택기, 하위 선택기 또는 하위 선택기를 사용하여 요소에 적용됩니다. 페이지의 모든 항목에서 해당 요소가 어떻게 표시되는지에 대한 기본 스타일을 정의합니다.
이 범주에는 선택기에 CSS를 적용하는 것이 포함됩니다. 여기에는 클래스나 ID에 CSS가 적용되지 않습니다. 이는 브라우저 규칙을 재설정하고 일관되고 재사용될 요소의 기본 스타일을 설정하기 위한 것입니다.
이 범주에서는 요소의 기본 스타일을 정의합니다. 여기에는 html, 본문, h1, h2, h3, h4, h5, h6, a, img가 포함될 수 있다.

다음은 BASE 규칙의 예입니다.

body, form {
    margin: 0;
    padding: 0;
}

a {
    color: #039;
}

a:hover {
    color: #03F;    
}

2) 레이아웃:

 

• 여기가 당신의 페이지를 펼치던 스타일이 들어갈 곳이에요. 유연성을 위해 당신의 모듈 스타일과 분리되어야 합니다.
• 배치 스타일은 재사용에 따라 주 스타일과 부 스타일로 나눌 수도 있습니다.
• 머리글 및 바닥글과 같은 주요 레이아웃 스타일은 전통적으로 ID 선택기를 사용하여 스타일을 지정하지만 페이지의 모든 구성요소에서 공통되는 요소를 고려하고 필요한 경우 클래스 선택기를 사용해야 합니다.
• 따라서 일반적으로 레이아웃 모듈이 많지 않기 때문에 ID 선택기를 사용할 수 있습니다.

LAYOUT 규칙의 예는 다음과 같습니다.

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

3) 모듈:

• 모듈은 페이지의 일부 또는 구성요소입니다. 페이지에 있는 메뉴, 대화 상자, 다운로드 목록 또는 위젯은 모듈이 될 수 있습니다.
• 모듈은 레이아웃과 독립적이므로 응용 프로그램의 어느 곳에서나 사용할 수 있습니다.
• html을 복사/붙여넣고 다른 곳으로 이동할 수 있어야 합니다. 그러면 html도 똑같이 보이고 동작할 것입니다.
• 각 모듈은 독립적인 구성 요소로 존재하도록 설계되어야 합니다. 이렇게 하면 페이지가 더 유연해집니다. 올바르게 하면 모듈을 파손 없이 레이아웃의 다른 부분으로 쉽게 이동할 수 있습니다.

 

모듈 규칙의 예가 여기에 나와 있습니다.

<ul class="tabnav">
      <li class="" tabnav__item"><a href="" class="tabnav__link">1</a></li>
    <li><a href="">2</a></li>
          <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                  </ul>

.tabnav {
    display: flex;
}

.tabnav li {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.tabnav li:first-child {
    border-left: 1px solid black;
}

.tabnav li a {
    display: block;
    padding: 10px 30px;
    text-decoration: none;
}

4) 주:

• 상태는 다른 규칙을 수정하거나 재정의하는 스타일이 됩니다.
• is- 또는 has-> is-display, is-collused, has-children 등과 같이 이 범주에 속하는 클래스에 네임스페이스를 붙이거나 추가하는 것이 좋습니다.
• 요소를 접거나 확장할 때의 아코디언이 좋은 예입니다. is-collaped 클래스를 사용하면 요소가 축소되는지 확인합니다.
• 이 상태는 어떠한 경우에도 적용되기를 원할 때 !중요(그리고 아마도 유일한)를 사용하기에 좋은 위치입니다.

 

.is-active {
      background-color: red;
}

.is-hidden {
      pointer-events: none;
      color: black;
}

5) 테마:
테마 규칙에서는 모든 테마 규칙을 정의할 수 있는 theme.css라는 파일을 사용하는 것이 좋습니다. 예를들면

// in module-name.css
.mod {
      border: 1px solid;
}

// in theme.css
.mod {
      border-color: blue;
}

SMACSS의 장점은 다음과 같습니다.

• 모듈식.
• 유연한
• 더 나은 파일 구성.

 

SMACSS 사용의 단점:

• 클래스를 작성할 수 있는 특정 명명 규칙이 없습니다.
• 모듈 및 하위 모듈은 식별하기 어려울 수 있습니다.

*이 블로그 게시물을 읽어주셔서 감사합니다!!! *