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) は、概念をデータフィールドを持つものとして表すプログラミングパラダイムです。 (オブジェクトの説明プロパティ) およびメソッドと呼ばれる関連プロシージャ。オブジェクトはクラスのインスタンスであり、相互に対話してアプリケーションやコンピュータープログラムを設計するために使用されます。

オブジェクト指向には、継承、カプセル化、ポリモーフィズムという 3 つの大きな特徴もあります。

OOP は数年前から JavaScript およびバックエンド言語で広く使用されていますが、その原則に従って CSS を編成することはまだ比較的新しいです。平たく言えば、OOP はコードを再利用可能、効率的、高速にする実践です。

紹介する必要のない概念が多すぎます。JavaScript を始めるときに、Animal クラスを見てみましょう。OOP を理解するために、誰もが Animal クラスを学習し、実践していると思います:

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

ログイン後にコピー

OOCSS とは何ですか?

概念は常に理解するのが難しいので、すぐに例を見て、OOCSS とは何なのかを学びましょう。

私たちが CSS を初めて使用したとき、CSS コードを整理するときに、次のようなコードを作成することがありました。

/* 不好的方式 */
.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;
}

ログイン後にコピー

コード内にいくつかの繰り返しスタイルがあることを見つけるのは難しくありません。このコードを保守するときに、border-radius または border プロパティ値を変更する場合は、それらを 2 か所同時に変更する必要があります。

メンテナンスを容易にするために、重複したコードを抽出し、それを基本クラス名として新しいクラス名に配置することができます。これにより、新しい変更があったときに、コードの 2 つのコピーを維持する必要がなくなります。コード:

/* 好的方式 */
/* 重复的代码 */
.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>

ログイン後にコピー

新しく変更された CSS コードを抽象化すると、次のように考えることができます:

If we want 2 つの div のスタイルで目的の効果を実現します。共通のクラス名 box-border がなければ、box-1 と box-2 だけでは目的のスタイルの効果を達成できません。つまり、box-border がベースですクラス box-1 および box-2 はサブカテゴリです。

これは、CSS で厳密に抽象化された OOP 概念であり、OOCSS と呼ばれます。

しかし、OOCSS の作者である Nicole Sullivan は、CSS オブジェクト指向プログラミングを要約するために次の文を使用しました。

これは繰り返しの視覚的パターンであり、HTML、CSS、場合によっては JavaScript の独立したスニペットに抽象化できます。
これは繰り返しの視覚的パターンで、次のように抽象化できます。 HTML、CSS、そして場合によっては JavaScript。
Nicole Sullivan

OOCSS とは何かを理解してください。OOCSS がスケーラブルで保守可能な CSS をどのように作成できるかについては、ある程度理解できたと思います。この時点で、についても理解しておく必要があります。 OOCSS の概念について聞いたことがないかもしれませんが、このスキルは間違いなくプロジェクトで無意識のうちに使用されていました。

さて、次に OOCSS について実際に何を学ぶのでしょうか?

OOCSS (オブジェクト指向 CSS) は、CSS を整理するための主要なモジュール式またはコンポーネントベースのシステムです。これは、2008 年の Web Directions North カンファレンスで Nicole Sullivan によって初めて紹介されました。

彼女は、OOCSS を構築するときに最初に考慮すべきことは抽象化ですが、従うべき 2 つの基本原則があるとも述べました:

構造 (構造) とスキンを分離する。基本オブジェクトの構造と位置、および拡張クラスの視覚的特性 (背景や境界線など) を保持する必要があります。こうすることで、視覚的なプロパティをオーバーライドする必要がなくなります。
コンテナとコンテンツを分離します。 CSS で HTML の構造を決して真似しないでください。つまり、スタイルシート内のタグや ID を参照しないでください。代わりに、関連するタグの使用を記述するクラスを作成して適用するようにしてください。また、ネストされたクラスは最小限に抑えます。

これら 2 つの原則を覚えておくことの核心は、再利用可能で保守可能なスタイルを作成することです。

構造とスキンの分離

スキンは、次のような視覚的な属性です。

カラーカラー
フォント
シャドウ
グラデーションGradient
BackgroundColos 背景

構造はもちろん、目に見えない視覚的属性です。例:

#Height Height
幅幅
位置位置
マージン
パディング＃＃＃＃＃＃＃＃＃＃＃＃オーバーフロー＃＃＃

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

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

/* 好的方式 */
/* 重复的代码 */
.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 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1423

Laravel チュートリアル

1321

PHP チュートリアル

1269

C# チュートリアル

1249

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。