引入CCSS（組件CSS）-css教學-PHP中文網

鑰匙要點

> bem

模塊化和孤立的

綜合

可預測的

目錄結構

grunt

經常詢問有關組件CSS（CCSS）

> CCSS和傳統CSS？

> CCSS如何改善項目的可擴展性？

我可以使用任何JavaScript框架的CCSS嗎？

是的，CCSS與任何JavaScript框架都兼容。無論您是使用React，Angular，Vue還是任何其他框架，都可以使用CCSS來樣式組件。這使CCSS成為任何前端開發人員的多功能工具。

>

>使用CCSS在內聯樣式上使用CCSS有什麼好處？使用，有幾個限制。他們無法使用媒體查詢，偽級或偽元素。它們也具有最高的特異性，這可能會導致覆蓋風格的困難。另一方面，CCSS提供了CSS的全部功能，包括使用媒體查詢，偽級和偽元素的能力。它的特異性還低於內聯樣式，因此在必要時可以更輕鬆地覆蓋樣式。

首頁

web前端

css教學

引入CCSS（組件CSS）

Lisa Kudrow

Feb 25, 2025 am 11:40 AM

Introducing CCSS (Component CSS)

引入CCSS（組件CSS）

鑰匙要點

CCSS（組件CSS）是CSS體系結構，旨在簡化大型Web應用程序的創作體驗，使其可維護，可管理且可擴展。它鼓勵基於組件的Web開發，將標記和样式捆綁到可重複使用的HTML元素中。 CCS的主要原理包括創建小型，獨立的可重複使用的組件；確保組件是模塊化和孤立的；編寫可以組合和可預測的CSS；並清楚地記錄所有CSS組件。
CCSS通過使樣式模塊化來提高Web應用程序的可擴展性，可維護性和性能，從而降低了樣式在整個應用程序中發生衝突的風險，並允許瀏覽器僅解析要渲染的組件的樣式。它與任何JavaScript框架兼容，可以與CSS預處理，例如Sass，Light或STYLUS。
> CCSS或組件CSS是一種架構，簡化了大型Web應用程序的CSS創作體驗。
>大型Web應用程序通常具有很多CSS文件，並且通常有許多開發人員同時處理這些文件。隨著如此眾多的框架，指南，工具和方法（OOCS，SMACS，BEM等）的出現，開發人員需要一個可維護，可管理且可擴展的CSS體系結構。

作為前端工程師，我相信基於組件的Web開發是前進的道路。 Web組件是通過W3C運行的標準集合。它們使我們能夠將標記和样式捆綁到可重複使用的HTML元素中，這些元素是真正封裝的

。這意味著我們需要開始考慮基於組件的CSS開發。當瀏覽器製造商正在實施這些標準時，我們可以在此期間使用

soft-apsapsulation

。

>讓我們確切地查看CCSS是什麼，以及如何在復雜的Web應用程序中為CSS架構中使用它。

CCSS 的元素以下是完全或以修改的方式使用的主要元素，以實現CCSS體系結構的最佳配置。 > smacss 由喬納森·斯諾克（Jonathan Snook）創建的Smacss代表CSS的可擴展和模塊化體系結構。它更像是樣式指南，而不是僵化的框架。在CCSS使用時，請閱讀有關結構背景的SMACSS。

> bem

由Yandex的開發人員創建的 bem代表“塊”，“元素”，“修改器”。這是一種前端方法，它是開發Web接口時的一種新思維方式。 Yandex的傢伙提出了BEM，可以在Harry Roberts的出色文章中找到更多信息。

sass

Sass是具有超級大國的CS。我強烈推薦它，但是如果您願意，您也可以少使用。請參閱SASS文檔以獲取更多信息。

指南針

指南針沒有班級定義；這是SASS的擴展，可提供許多實用程序。它用於一般有用的混合蛋白和SASS彙編。在需要供應商前綴的情況下，應始終使用Compass Mixins。這再次是一個不錯的選擇和波旁威士忌，首先是一個很好的選擇。

CCSS

的原理

現在讓我們看一下CCSS的主要原理。 > 基於組件的>

撰寫可重複使用的小型和獨立的組件。可重複使用的CSS組件是不僅存在於DOM樹的特定部分或需要使用某些元素類型的組件。如有必要，應使用額外的HTML元素使組件可重複使用。

模塊化和孤立的

>組件應具有UI某個部分所需的一切，並且具有一個焦點。每個組件都應隔離，這意味著它不會直接修改或取決於其他組件。

隔離比各個組件的代碼重複使用更重要，因為重複使用可以增加依賴關係和緊密的耦合，最終使CSS易於管理。

綜合

>以旨在減少花費時間寫作時間的方式創作CSS時，應該以一種花費更多時間更改html課程的元素上的元素來修改或添加樣式的方式來思考它。對於所有開發人員來說，當作者CSS就像組裝樂高積木相比，比與CSS戰爭打架要容易得多。 CSS課程是應用來組成樣式的構建塊。

可預測的

>可預測性意味著當您作者CSS時，您的規則會按照您的期望。這對於擁有許多頁面的大型應用程序很重要。避免使用過度複雜的選擇器和通用類名稱，因為這些名稱可能會導致不可預測的CSS。

文檔

大多數人認為CSS是不言自明的。實際上，通常情況並非如此！ CSS組件必須具有清晰的文檔，以描述他們的工作以及應如何使用。

目錄結構

下面的

是一個示例目錄結構，可更容易可視化。我還在CCSS GitHub repo中包括了一個示例設置。

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

登入後複製

僅編輯/作者在上面顯示的文件夾中的SCSS/文件夾中的文件。這允許在EXT/文件夾中輕鬆更新外部庫。許多應用程序從Bootstrap或Foundation（例如Bootstrap或Foundation）等外部CSS框架開始，因此我將它們添加到ext/內的示例設置中。但是，所有CSS都從頭開始寫了絕對可以。上面提到的其他所有內容仍然適用。

示例組件/目錄非常適合AngularJS應用程序，但可以針對其他框架或應用程序進行自定義。更多信息在下面的“體系結構”部分中。

> 在HTML頁面中，包括來自樣式/文件夾的所有.css文件，其中包含所有編譯的CSS（來自Grunt，Compass等）。永遠不要改變它們。

命名約定 - 簡化的BEM

componentName - 標準組件（b）
componentName-ElementName - 組件的元素（e）
componentName-modifierName - 組件的修飾符（M）

的邊界。元素和修飾符名稱分別是元素名稱和modifierName。請勿使用連字符（ - ）將組件名稱分開，因為它們表示元素/元素名稱的開始。

架構和設計讓我們考慮CCSS鼓勵的體系結構。

grunt

grunt是一個很棒的任務跑步者，可以自動化許多常見的瑣事（例如編譯CSS或驗證HTML）。還有其他任務跑步者；理想的工作流程涉及使用一個在開發中的文件，並在更改時重新編譯CSS。

>文件組織

再次查看源自SMACSS的目錄結構。請注意包含所有外部框架（例如Bootstrap）的Ext/ Directory。為了保持輕鬆升級，不應修改這些；相反，應將覆蓋和擴展放在基礎/目錄中。

base/是您保留全局基礎樣式的位置。

>

_base.scss僅是元素選擇器的基本樣式。這些是“ CSS重置”。

_base-classes.scss是在許多頁面，視圖和組件中使用應用程序的所有實用程序類。帶有u-

的前綴類名稱

images.scss用作SCSS彙編源。它應將所有站點圖像定義為數據URI。 /app/styles/images.css是從此文件生成的。

_ANIMATE.SCSS保留所有應用程序範圍的動畫類。

_bootstrap-overrides.scss僅保存框架。有時，框架選擇器的特異性水平是如此之高，以至於覆蓋它們需要較長的特定選擇器。在SCSS組件的背景下，不應在全球層面上覆蓋。相反，所有全球覆蓋都可以轉到這裡。

組件

>上述未提及的可重複使用的CSS的任何單位都被認為是“組件”。我們使用AngularJS，因此將它們分類為3種類型的CSS組件：查看/頁面，指令和標準；因此，源自smacss的目錄結構。

在GitHub存儲庫中的示例設置中，我創建了明確的明確文件夾。如果您的應用程序很小，則可以將它們放在一個文件夾中。所有組件都遵循修改後的BEM命名約定與駱駝的結合。這使我

偉大的勝利

鼓勵其他團隊成員遵循BEM風格的語法。當使用典型的bem樣式與 - ， - 和__字符一起使用典型的bem樣式時，它也避免了很多混亂，它們會生成類名稱，例如module-name __child-name-modifier-name！ > >組件中的CSS類定義順序反映HTML視圖也很重要。這使得更容易掃描，樣式，編輯和應用類。最後，最好為Web應用程序擁有廣泛的樣式指南，並遵循CSS和SASS的指南（例如，避免@Extend）。

> ccss示例

>請參閱CSS的示例設置的代碼。

>

這是sass中的一個示例組件：

此編譯到以下CSS：

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

登入後複製

>您的HTML可能看起來像這樣：

<span>.ProductRating {
</span>  <span>// nested element
</span><span>  <span>@include e(title) {</span>
</span>    <span>...
</span>  <span>}
</span>  <span>// nested element
</span><span>  <span>@include e(star) {</span>
</span>    <span>...
</span>    <span>// nested element's modifier
</span><span>    <span>@include m(active) {</span>
</span>      <span>...
</span>    <span>}
</span>  <span>}
</span><span>}</span>

登入後複製

>您可以參考簡化的BEM Mixin，該Mixin使用參考選擇器來實現此目標，並且比 @At-root更簡單。與BEM合作在SASS 3.3中變得更加容易，這使我們能夠編寫易於理解的可維護代碼。

貢獻

在GitHub存儲庫中以問題/PR的形式貢獻

<span><span>.ProductRating</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-title</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-star</span> {
</span>  ...
<span>}
</span>// nested element's <span>modifier
</span><span><span>.ProductRating-star--active</span> {
</span>  ...
<span>}</span>

登入後複製

添加更多示例，通過後處理，澄清等的改進等。

，請務必查看與CCSS相關的信用和有用資源的存儲庫。如果您有任何疑問或評論，請在下面的評論或github repo中發布它們。

經常詢問有關組件CSS（CCSS）

的問題

> CCSS和傳統CSS？

>傳統CSS的主要區別是一種樣式表語言，用於描述用HTML編寫的文檔的外觀和格式。它旨在使內容與演示文稿的分離，包括佈局，顏色和字體。另一方面，CCSS（組件CSS）是一種現代的樣式方法，在該方法中，樣式直接鏈接到其特定組件。這意味著樣式在本地範圍範圍內範圍範圍為組件，從而降低了樣式在應用程序中發生衝突的風險。這種方法使您的樣式更加可維護，模塊化且易於擴展。