집 > 기사 > 웹 프론트엔드 > CSS 프로그래밍의 OOCSS 및 SMACSS 디자인 패턴 소개

CSS 프로그래밍의 OOCSS 및 SMACSS 디자인 패턴 소개

不言원래의: 2018-06-28 10:47:351150검색

이 글은 주로 CSS 프로그래밍의 OOCSS와 SMACSS 디자인 패턴을 소개합니다. 저자는 CSS를 디자인하는 데 있어 이 두 가지 다른 아이디어를 분석합니다. 도움이 필요한 친구들은 참고할 수 있습니다.

CSS를 작성하는 것은 어렵지 않다고 생각합니다. 유지 관리 가능한 CSS를 만드는 것은 다른 프로그래밍 언어보다 어렵습니다. 다행스럽게도 이미 많은 디자인 패턴과 아이디어를 제안한 거장들이 많이 있습니다. 거인의 어깨에 서는 것만으로도 우리는 절반의 노력으로 두 배의 결과를 얻을 수 있습니다. 이 글에서는 CSS를 작성할 때 주의해야 할 OOCSS, SMACSS 및 사양에 대해 설명합니다.

(이 기사의 예제에서는 SCSS 구문을 사용합니다.)
OOCSS

OOCSS는 새로운 기술이 아니며 단지 CSS 작성을 위한 디자인 패턴이거나 일반적으로 "윤리"라고 할 수 있습니다. 초점은 두 가지에만 있다고 생각합니다:

HTML 구조에 대한 의존도 감소
CSS 클래스의 반복 사용 증가

HTML 구조에 대한 의존도 감소

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

일반적인 네비게이션 바 작성 방법은 , 구조는 위와 같아야 합니다. HTML 예제와 동일합니다. 3499910bf9dac5ae3c52d5ede7383485 태그에 대한 스타일을 정의하려면 CSS를 성능 문제에 관계없이 .nav--main ul li a {}로 작성할 수 있습니다. , 이러한 작성 방법은 나중에 태그의 구조가 변경될 수 있으며 이에 따라 CSS를 재구성해야 하므로 요소에 지나치게 의존하는 것으로 볼 수 있으며 이로 인해 불필요한 유지 관리 비용이 발생합니다.

이 예를 고려하면 원칙적으로 25edfb22a4f469ecb59f1190150159c6 뒤에는 항상 3499910bf9dac5ae3c52d5ede7383485 태그가 옵니다. 더 나은 작성 방법인 .nav--main a {}로 작성하거나 3499910bf9dac5ae3c52d5ede7383485에 클래스 nav--main_item을 직접 추가할 수도 있습니다. 후자는 OOCSS가 옹호하는 사용법입니다.

이런 글쓰기 방식이 이론상으로는 성능이 더 좋고(확인할 수 없음) 레벨도 비교적 간단합니다.
CSS 클래스 재사용 늘리기

OOCSS 개념에서는 클래스 재사용을 강조하지만 CSS 선택자로 id를 사용하는 것은 피해야 합니다. 아이디어는 두 버튼의 CSS 스타일 속성인 다음 예와 같이
OOP
과 같은 중복 코드를 최대한 추출하는 것입니다.

.button {   
  display: inline-block;   
  padding: 6px 12px;   
  color: hsla(0, 100%, 100%, 1);   
  &.button-default { background: hsla(180, 1%, 28%, 1); }   
  &.button-primary { background: hsla(208, 56%, 53%, 1); }   
}

위 CSS는 두 가지 다른 스타일의 버튼을 추출합니다. 중복을 제거합니다. 같은 클래스에서 부품을 정의하고
. 따라서 이러한 스타일을 사용하려면 HTML 작성은 다음과 같을 수 있습니다.

<a class="button button-default">   
<a class="button button-primary">

먼저 버튼을 사용하여 이를 버튼 스타일로 선언한 다음 버튼 배경색 차이로 버튼 기본값 또는 버튼 기본을 사용합니다. 예를 들어 웹사이트의 모든 버튼 크기를 변경하려면 .button의 패딩만 수정하면 됩니다.
SMACSS

SMACSS에 대한 나의 이해는 아직 그다지 깊지 않습니다. 아마도 CSS용 확장 가능 및 모듈형 아키텍처를 읽고 나면 더 깊은 이해를 갖게 될 것입니다. SMACSS의 현재 개념은 CSS의 다양한 비즈니스 로직을 나누는 방식으로 제한됩니다.

하지만 원래 디자인이 그다지 적절하지 않다고 생각하여 직접 몇 가지 개선을 했습니다.
Base

Base가 설정입니다. 기본값 브라우저 재설정과 같은 태그 요소의 값을 여기에 작성할 수 있습니다. Compass를 사용하는 경우 @include global-reset만 입력하면 됩니다. 여기에서는 레이블 요소 자체만 설정되며 클래스 또는
id는 나타나지 않지만 속성 선택기 또는 의사 클래스가 있을 수 있습니다.

html {}   
input[type=text] {}   
a:hover {}

Layout

Layout은 전체의 "큰 구조"를 나타냅니다. .button과 같은 작은 구성 요소 클래스가 아닌 웹 사이트” 모양입니다. 웹사이트에는 일반적으로 머리글이나 바닥글 등 몇 가지 주요 섹션이 있습니다. 레이아웃은 이러한 "대형 구조"를 정의하는 데 사용되는 CSS입니다. 반응형 웹 디자인을 하거나 그리드 시스템을 사용하는 경우 여기에 레이아웃에 규칙을 작성하세요.

다음은 예입니다.

#header { margin: 30px 0; }   
#articles-wrapper { ......; }   
.sidebar {   
  &.sidebar--rightright { ......; }   
  &.sidebar-left { ......; }   
}

일반적으로 선택기, ID 또는 클래스가 하나만 있습니다.
Module

원래 SMACSS의 Module 디자인이 별로 좋지 않은 것 같아 Module
을 Partial로 분할했습니다.

여기에 있는 모듈은 이름에서 알 수 있듯이 다른 곳에서 재사용할 수 있습니다. 더 명확한 예를 찾고 있다면 Twitter Bootstrap
의 구성 요소 또는 이전 OOCSS의 .button 예와 비슷하다고 생각합니다. 예를 들어, 컴포넌트 모듈을 재사용할 수 있습니다.

모듈은 다른 페이지에서 재사용되도록 설계되었으므로 모듈에 접두사를 사용할 필요가 없습니다.
Partial

Partial은 Latout 및 Module과 다르며 Layout보다 범위가 작고
header 아래의 하위 요소일 수 있습니다. 모듈과 달리 특정 단일 필드의 특수 설정입니다.

.nav--main {   
  a { ......; }   
}

일반적으로 .nav--main 아래의
.nav--main_item과 같이 부분 클래스의 이름을 접두사로 서브클래스에 추가합니다. 왜 이렇게 이상한 명명 방법을 사용하는 걸까요? 이에 대해서는 CSS 사양 섹션에서 설명합니다.
State

State 负责定义元素不同的状态下，所呈现的样式。但是并非指一个元素的 :hover 或 :active 下的状态。举例来说，一个导航栏分页，目前所在页面的分页需要加上 .active
的属性表示目前位置是在这个分页，HTML 会长这样：

<nav class="nav--main">   
  <ul>   
    <li><a>.........</a></li>   
    <li class="active"><a>.........</a></li>   
    <li><a>.........</a></li>   
  </ul>   
</nav>

因此可以替 .nav--main 增加 .active 这样的子 class：

.nav--main {   
  // others…;   
  .active {   
    background: darken($background-color, 16%);   
  }   
}

有时候为了让阅读更贴近语义，会用比较友善的命名方式，以此段的范例来说，.is-active 就比 .active 来得好读。
Theme

Theme 是画面上所有「主视觉」的定义，例如 border-color、background-image 或是 font-family 等相关的 Typography 设定。为什么说是「主视觉」？因为有些元件模组仍然是留在 Module 去定义，Theme 就像 Layout 一样负责「大架构」上的视觉样式。

编者注感谢 Only1Word 指出，theme 在 SMACSS 中更类似皮肤。
CSS 规范

这里整理的是我觉得一定要知道的，其他还有很多规范可以转到文末的参考资源连结，那篇文章有介绍更多的细节。
BEM

BEM 即 Block、Element、Modifier 的缩写，这是一种 class 的命名技巧。如果整个 project 只有自己一个人做，那当然是不太可能出现 class 重复的问题，但是如果同时多个 F2E 一起写同个部分的 CSS，就很容易出现共用 class 的问题，因此有了 BEM 这样的命名技巧。

将 Block 区块作为起始开头，像前面 SMACSS 介绍的 Partial 就可以拿来作为 Block 的 prefix 名称；Element 则是 Block 下的元素；Modifier 则是这个元素的属性。

不同 Block 和 Element 用 __ 两个底线区隔开来，不同的 Modifier 则用 -- 两个 dash 区隔。至于 - 一个 dash 则表示这个 class 不依赖任何 Block 或 Element，是个独立的存在，例如：.page-container 或 .article-wrapper。

这里有个范例：

.sidebar {   
  .sidebar--left__section {   
    .sidebar--left__section--header {}   
    .sidebar--left__section--footer {}   
  }   
}

Javascript Hook

透过 CSS class 来作为 Javascript 选取 DOM 节点的方式，就是 Javascript Hook。用 jQuery 可以常常看到这样的写法：$('.nav--main a')，可是当 CSS 跟 Javascript 搅在一起反而造成两边维护上的不便，当改了 CSS 时 Javascript 也要跟著改。

所以用 HTML 的属性去选取 DOM 节点会更好，如果非要用 CSS 的 class 那也可以多写一个 js- 的 prefix，以表示这个节点有被 Javascript 使用，例如：

<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>   
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>

PS. HTML 里两个 class 之间用两个空格，会比一个空格看起来好阅读。
合理的选择器

class 无所谓是否语意化的问题；你应该关注它们是否合理，不要刻意强调 class
名称要符合语意，而要注重使用的合理性与未来性。

有时候为了表示更明确，在使用 CSS 的选择器时，要表示某的 class 是搭配某个标签元素使用，会写成这样：

ol.breadcrumb{}   
p.intro{}   
ul.image-thumbs{}

但是上面这个写法效能不是很好，同样的目的但可以减少多余的修饰，试试改用下面这种写法，将标签名称用注解标示起来，维护上有相同的效果，但是浏览器处理的速度会比较快：

/*ol*/.breadcrumb{}   
/*p*/.intro{}   
/*ul*/.image-thumbs{}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

CSS 프로그래밍의 OOCSS 및 SMACSS 디자인 패턴 소개

관련 기사