。這意味著我們需要開始考慮基於組件的CSS開發。當瀏覽器製造商正在實施這些標準時，我們可以在此期間使用
soft-apsapsulation。
>讓我們確切地查看CCSS是什麼，以及如何在復雜的Web應用程序中為CSS架構中使用它。CCSS 的元素 以下是完全或以修改的方式使用的主要元素，以實現CCSS體系結構的最佳配置。 > smacss 由喬納森·斯諾克（Jonathan Snook）創建的Smacss代表CSS的可擴展和模塊化體系結構。它更像是樣式指南，而不是僵化的框架。在CCSS使用時，請閱讀有關結構背景的SMACSS。
sass
Sass是具有超級大國的CS。我強烈推薦它，但是如果您願意，您也可以少使用。請參閱SASS文檔以獲取更多信息。指南針沒有班級定義；這是SASS的擴展，可提供許多實用程序。它用於一般有用的混合蛋白和SASS彙編。在需要供應商前綴的情況下，應始終使用Compass Mixins。這再次是一個不錯的選擇和波旁威士忌，首先是一個很好的選擇。
現在讓我們看一下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
架構和設計 讓我們考慮CCSS鼓勵的體系結構。
grunt是一個很棒的任務跑步者，可以自動化許多常見的瑣事（例如編譯CSS或驗證HTML）。還有其他任務跑步者；理想的工作流程涉及使用一個在開發中的文件，並在更改時重新編譯CSS。
>文件組織>
base/是您保留全局基礎樣式的位置。>
_base-classes.scss是在許多頁面，視圖和組件中使用應用程序的所有實用程序類。帶有u-的前綴類名稱
images.scss用作SCSS彙編源。它應將所有站點圖像定義為數據URI。 /app/styles/images.css是從此文件生成的。>
_ANIMATE.SCSS保留所有應用程序範圍的動畫類。_bootstrap-overrides.scss僅保存框架。有時，框架選擇器的特異性水平是如此之高，以至於覆蓋它們需要較長的特定選擇器。在SCSS組件的背景下，不應在全球層面上覆蓋。相反，所有全球覆蓋都可以轉到這裡。
組件在GitHub存儲庫中的示例設置中，我創建了明確的明確文件夾。如果您的應用程序很小，則可以將它們放在一個文件夾中。所有組件都遵循修改後的BEM命名約定與駱駝的結合。這使我
偉大的勝利鼓勵其他團隊成員遵循BEM風格的語法。當使用典型的bem樣式與 - ， - 和__字符一起使用典型的bem樣式時，它也避免了很多混亂，它們會生成類名稱，例如module-name __child-name-modifier-name！ > >組件中的CSS類定義順序反映HTML視圖也很重要。這使得更容易掃描，樣式，編輯和應用類。最後，最好為Web應用程序擁有廣泛的樣式指南，並遵循CSS和SASS的指南（例如，避免@Extend）。
> ccss示例>請參閱CSS的示例設置的代碼。
此編譯到以下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
<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>貢獻
在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的主要區別是一種樣式表語言，用於描述用HTML編寫的文檔的外觀和格式。它旨在使內容與演示文稿的分離，包括佈局，顏色和字體。另一方面，CCSS（組件CSS）是一種現代的樣式方法，在該方法中，樣式直接鏈接到其特定組件。這意味著樣式在本地範圍範圍內範圍範圍為組件，從而降低了樣式在應用程序中發生衝突的風險。這種方法使您的樣式更加可維護，模塊化且易於擴展。
我可以使用任何JavaScript框架的CCSS嗎？
，而CCSS主要用於造型單個組件，它也可以處理全球樣式。您可以在單獨的文件中定義全局樣式，並根據需要將它們導入組件。這使您可以在應用程序中保持一致的外觀和感覺，同時仍然從CCSS的模塊化中受益。
>> CCSS如何通過將樣式範圍範圍範圍劃分到單個組件，CCSS，CCSS如何改善Web應用程序的性能？可以顯著提高Web應用程序的性能。在傳統的CSS中，瀏覽器必須解析整個CSS文件以渲染頁面，這可以減慢渲染過程。但是，使用CCSS，瀏覽器只需要解析當前渲染的組件的樣式，從而導致頁面加載時間更快。
是的，您可以將CCSS用於響應式設計。就像傳統的CSS一樣，CCSS支持媒體查詢，這使您可以根據設備的屏幕尺寸應用不同的樣式。這使得創建一個在所有設備上看起來都很好的響應式設計變得容易。
>更容易管理。每個組件都有自己的樣式，因此，如果您需要更新或修改組件，則只需要更改該特定組件的樣式即可。這降低了引入錯誤的風險，並使更新或重構代碼更加容易。
>以上是引入CCSS（組件CSS）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
