Analisis mendalam tentang seni bina CSS OOCSS

Artikel ini membawa anda pengetahuan yang berkaitan tentang seni bina css oocss, termasuk ringkasan pemisahan struktur dan kulit, pemisahan struktur dan kandungan, dsb. Saya harap ia akan membantu semua orang.

Pengaturcaraan berorientasikan objek

Anda boleh melangkau bahagian ini jika anda mempunyai pengalaman dalam berorientasikan objek pengaturcaraan .

Sebelum memasuki kajian OOCSS, kita mesti terlebih dahulu memahami pengaturcaraan berorientasikan objek berikut. Pengaturcaraan berorientasikan objek mula muncul dalam konteks Kumpulan Kepintaran Buatan di MIT pada akhir 1950-an, menurut Wikipedia:

Pengaturcaraan berorientasikan objek (OOP) ialah paradigma pengaturcaraan yang mewakili konsep sebagai mempunyai medan data (sifat perihalan objek) dan prosedur berkaitan yang dipanggil kaedah. Objek ialah contoh kelas yang digunakan untuk berinteraksi antara satu sama lain untuk mereka bentuk aplikasi dan program komputer.

Berorientasikan objek juga mempunyai tiga ciri utama: pewarisan, enkapsulasi dan polimorfisme.

OOP telah digunakan secara meluas dalam JavaScript dan bahasa hujung belakang selama beberapa tahun, tetapi menyusun CSS mengikut prinsipnya masih agak baharu. Dari segi orang awam, OOP ialah amalan menjadikan kod anda boleh diguna semula, cekap dan pantas.

Terdapat terlalu banyak konsep yang tidak perlu diperkenalkan Mari kita lihat kelas Haiwan apabila kita mula menggunakan JavaScript. Saya percaya semua orang telah mempelajari dan mempraktikkan kelas Haiwan untuk membantu kita memahami OOP:

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

Apakah itu OOCSS?

Konsep sentiasa sukar untuk difahami, jadi mari kita cepat beralih ke contoh dan kemudian belajar apa itu OOCSS?

Semasa kami baru menggunakan CSS, apabila kami mengatur kod CSS, kadangkala kami akan menulis kod berikut:

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

Anda boleh dengan mudah mendapati bahawa terdapat beberapa gaya berulang dalam kod It nampaknya apabila mengekalkan kod ini, jika anda ingin menukar nilai atribut jejari sempadan atau sempadan, anda perlu mengubah suainya di dua tempat pada masa yang sama.

Untuk memudahkan penyelenggaraan, kami boleh mengekstrak kod pendua dan memasukkannya ke dalam nama kelas baharu sebagai nama kelas asas, supaya apabila terdapat perubahan baharu, tidak perlu mengekalkan dua kod:

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

Dalam struktur HTML, kita boleh menggunakannya seperti ini:

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

Jika kita mengabstrak kod CSS yang baru ditukar, kita boleh memikirkannya seperti ini:

Jika kita mahu gaya dua div mencapai kesan yang diingini, tanpa nama kelas biasa kotak-sempadan, kotak-1 dan kotak-2 sahaja tidak boleh mencapai kesan gaya yang diingini Dalam erti kata lain, kotak-sempadan adalah Asas kelas kotak-1 dan kotak-2 ialah subkelas.

Ini ialah konsep OOP yang diabstraksikan dalam CSS, dipanggil OOCSS.

Walau bagaimanapun, Nicole Sullivan, pengarang OOCSS, menggunakan ayat berikut untuk meringkaskan pengaturcaraan berorientasikan objek CSS.

Ia adalah corak visual yang berulang, yang boleh disarikan ke dalam coretan bebas HTML, CSS dan mungkin JavaScript , CSS dan mungkin JavaScript.

Nicole Sullivan

Fahami apa itu OOCSS, saya percaya anda juga mempunyai pemahaman tertentu tentang cara OOCSS boleh menulis CSS berskala dan boleh diselenggara, walaupun pada masa ini anda mungkin tidak pernah mendengar tentang konsep OOCSS sebelum ini, kemahiran ini pasti digunakan tanpa disedari dalam projek.

Baiklah, apakah yang sebenarnya kita pelajari tentang OOCSS seterusnya?

OOCSS (CSS Berorientasikan Objek) ialah sistem modular atau berasaskan komponen terkemuka untuk mengatur CSS. Ia pertama kali diperkenalkan oleh Nicole Sullivan pada persidangan Web Directions North pada tahun 2008.

Dia juga menyebut bahawa apabila membina OOCSS, abstraksi adalah perkara pertama yang perlu dipertimbangkan, tetapi terdapat dua prinsip asas yang perlu diikuti:

Struktur (struktur) dan kulit yang berasingan . Anda harus mengekalkan struktur dan kedudukan dalam objek asas, dan ciri visual (seperti latar belakang atau sempadan) dalam kelas lanjutan. Dengan cara ini anda tidak perlu mengatasi sifat visual.
Asingkan bekas dan kandungan. Jangan sekali-kali meniru struktur HTML dalam CSS. Dalam erti kata lain, jangan rujuk teg atau ID dalam helaian gaya. Sebaliknya, cuba buat dan gunakan kelas yang menerangkan penggunaan teg yang berkaitan. Dan pastikan kelas bersarang pada tahap minimum.
Inti untuk mengingati dua prinsip ini ialah menulis gaya yang boleh diguna semula dan boleh diselenggara.

Struktur dan kulit yang berasinganKulit ialah atribut visual yang boleh dilihat oleh kita, contohnya:

Warna Warna
Fon Fon
Bayang Bayang
Kecerunan Kecerunan
Lebar Lebar
Kedudukan Kedudukan

Margin
Padding
Limpahan

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

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

/* 好的方式 */
/* 重复的代码 */
.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视频教程）

Atas ialah kandungan terperinci Analisis mendalam tentang seni bina CSS OOCSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!