CSS 아키텍처 OOCSS에 대한 심층 분석-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS 아키텍처 OOCSS에 대한 심층 분석

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 18, 2022 pm 05:52 PM

css

이 글은 구조와 스킨 분리 요약, 구조와 내용 분리 등을 포함하여 CSS 아키텍처 oocss에 대한 관련 지식을 제공합니다. 모든 사람에게 도움이 되기를 바랍니다.

CSS 아키텍처 OOCSS에 대한 심층 분석

객체 지향 프로그래밍

객체 지향 프로그래밍 경험이 있다면 이 섹션을 건너뛰어도 됩니다.

OOCSS 공부에 들어가기 전에 먼저 객체지향 프로그래밍을 이해해야 합니다. Wikipedia에 따르면 객체 지향 프로그래밍은 1950년대 후반 MIT 인공 지능 그룹의 맥락에서 등장하기 시작했습니다.

객체 지향 프로그래밍(OOP)은 개념을 데이터 필드(설명하는 속성)로 표현하는 프로그래밍 패러다임입니다. 객체) 및 "객체"는 메서드라고 불리는 관련 프로시저를 포함합니다. 객체는 클래스의 인스턴스이며 애플리케이션과 컴퓨터 프로그램을 설계하기 위해 서로 상호 작용하는 데 사용됩니다.

객체 지향에는 상속, 캡슐화, 다형성이라는 세 가지 주요 기능도 있습니다.

OOP는 몇 년 동안 JavaScript와 백엔드 언어에서 널리 사용되었지만 원칙에 따라 CSS를 구성하는 것은 여전히 비교적 새로운 것입니다. 일반인의 관점에서 OOP는 코드를 재사용 가능하고 효율적이며 빠르게 만드는 방법입니다.

소개할 필요가 없는 개념이 너무 많습니다. JavaScript를 시작할 때 Animal 클래스를 살펴보겠습니다. OOP를 이해하는 데 도움이 되도록 모두가 Animal 클래스를 배우고 연습했을 것입니다.

OOCSS란 무엇인가요? 개념은 항상 이해하기 어렵습니다. 그러니 빠르게 예를 들어 OOCSS가 무엇인지 이해해 볼까요?

CSS를 처음 접했을 때 CSS 코드를 구성할 때 가끔 다음과 같은 코드를 작성하곤 했습니다.

// 基类 / 父类
class Animail {
    constructor() {}
    getName() {}
}
// 子类
class Cat extends Animail {
    constructor() {}
    run() {}
    jump() {}
}
// 子类
class Fish extends Animail {
    constructor() {}
    swim () {}
}

이 코드를 유지 관리할 때 원하는 경우 코드에 반복되는 스타일이 있다는 것을 쉽게 찾을 수 있습니다. border-radius 또는 border 속성 값을 변경하려면 두 곳에서 동시에 수정해야 합니다.

간편한 유지 관리를 위해 반복되는 코드를 추출하여 새 클래스 이름에 기본 클래스 이름으로 넣을 수 있으므로 새로운 변경 사항이 있을 때 두 개의 코드를 유지할 필요가 없습니다.

/* 不好的方式 */
.box-1 {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.box-2 {
  border: 1px solid #ccc;
  width: 120px;
  height: 120px
  border-radius: 10px;
}

In HTML 구조를 사용하면 다음과 같이 사용할 수 있습니다.

/* 好的方式 */
/* 重复的代码 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

새 CSS 코드를 추상화하면 다음과 같이 생각할 수 있습니다.

두 div의 스타일이 원하는 효과를 얻으려면 상자가 없습니다. -border 공용 클래스 이름은 box-1과 box-2만으로는 원하는 스타일 효과를 얻을 수 없습니다. 즉, box-border가 기본 클래스이고 box-1과 box-2가 하위 클래스입니다.

이것은 OOCSS라고 불리는 CSS로 하드 추상화된 OOP 개념입니다.

그런데 OOCSS의 저자인 Nicole Sullivan은 CSS의 객체지향 프로그래밍을 다음과 같은 문장으로 요약했습니다.

HTML, CSS 및 JavaScript의 독립적인 조각으로 추상화할 수 있는 반복되는 시각적 패턴입니다.

Nicole Sullivan

OOCSS가 확장 가능하고 유지 관리 가능한 CSS를 작성하는 방법에 대해 어느 정도 이해하고 있다고 생각합니다. 비록 이전에 우리에 대해 들어본 적이 없을지라도 지금은 이해해야 합니다. 하지만 이 기술은 확실히 프로젝트에서 자신도 모르게 사용되었습니다.
그럼, 다음에는 OOCSS에 대해 실제로 무엇을 배울까요?

OOCSS(객체 지향 CSS)는 CSS 구성을 위한 선도적인 모듈식 또는 구성 요소 기반 시스템입니다. 2008년 Web Directions North 컨퍼런스에서 Nicole Sullivan이 처음 소개했습니다.

그녀는 또한 OOCSS를 구축할 때 추상화가 가장 먼저 고려되어야 한다고 언급했지만, 따라야 할 두 가지 기본 원칙이 있습니다:

구조와 스킨을 분리합니다. 기본 개체의 구조와 위치를 유지하고 확장 클래스의 시각적 특성(예: 배경 또는 테두리)을 유지해야 합니다. 이렇게 하면 시각적 속성을 재정의할 필요가 없습니다.

용기와 내용물을 분리하세요. CSS의 HTML 구조를 절대 모방하지 마세요. 즉, 스타일시트에서 태그나 ID를 참조하지 마세요. 대신 관련 태그의 사용을 설명하는 클래스를 만들고 적용해 보세요. 그리고 중첩 클래스를 최소한으로 유지하세요.
이 두 가지 원칙을 기억하는 핵심은 재사용 및 유지 관리가 가능한 스타일을 작성하는 것입니다.

구조와 피부의 분리

피부는 우리가 볼 수 있는 시각적 속성입니다. 그라디언트 그라데이션

패딩
오버플로

这么分离也是有依据的，给你举个生动形象的例子，都打过王者荣耀吧，如果你是忠爱粉可能还花钱买过皮肤，刷刷的一换，英雄瞬间逼格高了不少，我们网页的结构和皮肤相互分离和王者的英雄换肤一个道理。

这个好例子就是我们上面举的这个例子：

/* 好的方式 */
/* 重复的代码 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 结构：

<div class="box-border box-1">Learn OOP</div>
<div class="box-border box-2">Learn CSS</div>

分离容器和内容

我们对着下面这个例子讲解：

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      font-size: 20px;
    }
    div h2 {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <h2></h2>
  <p></p>
</div>
</body>
</html>

上面这个例子，h2 被锁定在 menu 这个容器里面了，如果一不小心改变了 HTML 的结构就会导致我们写的 CSS 无效，非常的不便于维护，而且作用于 h2 标签上的样式还无法复用，真是让人头疼。

根据容器和内容分离的原则，我们应该让容器和内容有各自的样式，同时避免使用标签选择器，改写得到如下代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .menu {
      width: 200px;
      height: 200px;
    }
    .menu-title {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <h2></h2>
  <p></p>
</div>
</body>
</html>

OK，这样代码就非常便于维护和复用了，切记在项目中，我们应该禁止使用和位置相关的样式还有标签选择器。

优点和缺点

上面反复强调使用 OOCSS 的好处就是编写可复用和可维护的样式这两个特点，此篇我们来总结下 OOCSS 的优缺点：

优点

扩展性： OOCSS 允许您在不同元素上自由混合和重新应用类，而无需过多考虑它们的上下文。一个项目的新手可以重用他们的前辈已经抽象出来的东西，而不是堆积在 CSS 上。
维护性：添加或重新排列 HTML 标记不再需要您重新考虑整个 CSS 流程。这对于正在进行的大型项目尤其有用。
提高网站速度。减少重复有助于应用程序运行得更快。CSS 文件习惯于随着网站的复杂性增加而呈指数级扩展，从而增加网页大小。
可读性：当其他程序员看到您的 CSS 时，他们将能够快速理解其结构。
快速上手：尤其是对了解面向对象编程的新手来说。

缺点

虽然使用 OOCSS 有很多好处，但也有一些缺点：

不适合小项目：小型项目不一定需要可扩展性、可读性和可维护性。
增加元素类的数量：您可能需要将多个类添加到一个元素以说明所有样式元素。这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。
有一个学习曲线：如果您正在使用 OOCSS 而您的同事不熟悉它，这将需要他们在继续之前学习如何使用它，这需要时间。
无语义化的类名：根据两个核心的分离原则，我们代码中不可能会出现 .btn 这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要 .btn 这样的业务类名。所以我们需要一种机制来解决这个问题。

语义化和可维护也是需要平衡的，不过对于我更需要的是代码的可维护，对于这个我们可以使用 CSS 预处理器解决，例如 Sass/Less。

Sass/Less 的继承

还记得 OOP 编程三大特性吧，其中之一就是继承，正好对应了 Sass/Less 的 extend，你说这不巧了吗不是。

根据 OOCSS 当我们需要一个按钮：

/* 不好的方式 */
.button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
.button-skip {
  color: #fff;
  background: #55acee;
}

<button class="button-structure button-skip"></button>

在 Sass 中，我们可以使用 %placeholder 来创建对象，通过 @extend 在类中调用，将其合在一起。这样就可以自己组织代码：

/* 好的方式 */
%button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%button-skip {
  color: #fff;
  background: #55acee;
}
.btn {
    @extend %button-structure;
    @extend %button-skip;
}

重点来了，一个业务类名解决：

<button></button>

Less 的继承是通过伪类来实现的 :extend 具体参考 Less Extend，这个就自己去想吧。

总结

今天，我们先是了解了面向对象编程的思想，然后根据其核心思想学习了在 CSS 中如何使用 OOP，还知道了这种组织代码的方式就叫 OOCSS，OOCSS 有两个核心思想，容器与内容、结构和皮肤分离，同时总结了 OOCSS 的优缺点，并针对 OOCSS 无语义化这个重大缺点，我们结合 CSS 预处理器 SASS 给了一个解。

（学习视频分享：css视频教程）

위 내용은 CSS 아키텍처 OOCSS에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 掘金에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

HTML 및 React : 마크 업과 구성 요소의 관계Apr 12, 2025 am 12:03 AM

HTML과 React의 관계는 프론트 엔드 개발의 핵심이며, 현대 웹 애플리케이션의 사용자 인터페이스를 공동으로 구축합니다. 1) HTML은 컨텐츠 구조와 의미를 정의하고 React는 구성 요소화를 통해 동적 인터페이스를 구축합니다. 2) 부품은 JSX 구문을 사용하여 HTML을 포함하여 지능형 렌더링을 달성합니다. 3) 구성 요소 수명주기는 상태 및 속성에 따라 HTML 렌더링 및 업데이트를 동적으로 관리합니다. 4) 구성 요소를 사용하여 HTML 구조를 최적화하고 유지 관리 가능성을 향상시킵니다. 5) 성능 최적화에는 불필요한 렌더링을 피하고 주요 속성 사용 및 구성 요소 단일 책임을 유지하는 것이 포함됩니다.

반응 및 프론트 엔드 : 대화 형 경험 구축Apr 11, 2025 am 12:02 AM

React는 대화식 프론트 엔드 경험을 구축하는 데 선호되는 도구입니다. 1) 반응은 구성 요소화 및 가상 DOM을 통해 UI 개발을 단순화합니다. 2) 구성 요소는 기능 구성 요소 및 클래스 구성 요소로 나뉩니다. 기능 구성 요소는 더 간단하고 클래스 구성 요소는 더 많은 수명주기 방법을 제공합니다. 3) RECT의 작동 원리는 가상 DOM 및 조정 알고리즘에 의존하여 성능을 향상시킵니다. 4) 주 경영진은 usestate 또는 this.state를 사용하며 ComponentDidMount와 같은 수명주기 방법은 특정 논리에 사용됩니다. 5) 기본 사용에는 구성 요소 생성 및 상태 관리가 포함되며 고급 사용량은 사용자 정의 후크 및 성능 최적화가 포함됩니다. 6) 일반적인 오류에는 부적절한 상태 업데이트 및 성능 문제, 디버깅 기술은 ReactDevTools 사용 및 우수

반응 및 프론트 엔드 스택 : 도구 및 기술Apr 10, 2025 am 09:34 AM

React는 핵심 구성 요소 및 상태 관리 기능을 갖춘 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 1) 구성 요소화 및 상태 관리를 통해 UI 개발을 단순화합니다. 2) 작업 원칙에는 화해 및 렌더링이 포함되며 최적화는 React.Memo 및 Usememo를 통해 구현할 수 있습니다. 3) 기본 사용법은 구성 요소를 작성하고 렌더링하는 것입니다. 고급 사용법에는 후크 및 컨텍스트를 사용하는 것이 포함됩니다. 4) 부적절한 상태 업데이트와 같은 일반적인 오류는 ReactDevTools를 사용하여 디버그 할 수 있습니다. 5) 성능 최적화에는 React.Memo, 가상화 목록 및 코드플릿을 사용하는 것이 포함되며 코드를 읽을 수 있고 유지 관리 가능하게 유지하는 것이 가장 좋습니다.

HTML에서 React의 역할 : 사용자 경험 향상Apr 09, 2025 am 12:11 AM

React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.

반응 구성 요소 : HTML에서 재사용 가능한 요소 생성Apr 08, 2025 pm 05:53 PM

반응 구성 요소는 함수 또는 클래스로 정의 할 수 있으며 UI 로직을 캡슐화하고 소품을 통해 입력 데이터를 수락합니다. 1) 구성 요소 정의 : 기능 또는 클래스를 사용하여 반응 요소를 반환합니다. 2) 렌더링 구성 요소 : 반응 호출 렌더 메소드 또는 기능 구성 요소를 실행합니다. 3) 멀티플렉싱 구성 요소 : 소품을 통해 데이터를 전달하여 복잡한 UI를 구축합니다. 구성 요소의 수명주기 접근 방식을 통해 다른 단계에서 논리를 실행하여 개발 효율성 및 코드 유지 관리 가능성을 향상시킬 수 있습니다.

엄격한 모드 목적을 반응합니다Apr 02, 2025 pm 05:51 PM

React Strict Mode는 추가 점검 및 경고를 활성화하여 React 응용 프로그램의 잠재적 문제를 강조하는 개발 도구입니다. 레거시 코드, 안전하지 않은 라이프 사이클 및 부작용을 식별하여 현대 반응 관행을 장려합니다.

파편 사용량을 반응합니다Apr 02, 2025 pm 05:50 PM

반응 단편은 추가 DOM 노드없이 어린이를 그룹화하고 구조, 성능 및 접근성을 향상시킬 수 있습니다. 효율적인 목록 렌더링을위한 키를 지원합니다.

조정 과정에 반응합니다Apr 02, 2025 pm 05:49 PM

이 기사에서는 React의 조정 프로세스가 DOM을 효율적으로 업데이트하는 방법에 대해 자세히 설명합니다. 주요 단계에는 조정 트리거, 가상 DOM 생성, 차이 알고리즘 사용 및 최소 DOM 업데이트 적용이 포함됩니다. Perfo도 다룹니다

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.