CSS OOCSS簡單介紹
OOCSS是(Object Oriented CSS),顧名思義就是物件導向的CSS。
OOCSS主要有兩個原則:
(1).結構和樣式分離:
比如一個頁面存在著多個不同功能的按鈕,這些按鈕的形狀大小都差不多,但是根據不同的功能會有不同的顏色或背景來加以區分。如果不進行結構和樣式分離,我們的CSS程式碼可能是這樣的:
[CSS] 純文字檢視 複製程式碼.btn-primary{ width:100px; height:50px; padding:5px 3px; background:#ccc; color:#000; } .btn-delete{ width:100px; height:50px; padding:5px 3px; background:red; color:#fff; }
這兩個或者可能更多的按鈕擁有一些不同的樣式,但是它們同時擁有相同的大小樣式等,將其抽象的部分提取出來,如下:
[CSS] 純文字檢視 複製程式碼.btn{ width:100px; height:50px; padding:5px 3px; } .primary{ background:red; color:#fff; } .delete{ background:red; color:#fff; }
這樣提取公用的樣式出來,然後按鈕同時引用btn和primary等。這種做法除了減少重複的程式碼精簡CSS之外,還有一個好處是複用性,如果需要增加其他額外的按鈕,只需要編寫不同的樣式,和btn配合使用即可。
(2)容器和內容分離:
我們平時寫程式碼一定寫過這樣程式碼
[CSS] 純文字檢視 複製程式碼.content h3{ font-size:20px; color:#333; }
這樣的程式碼就是內容依賴於容器,沒有分離的程式碼,也就是說h3的樣式依賴於.content容器,如果其他地方要用到相同的樣式,但是它的容器卻不是.content,那你可能就是要再寫一遍.something h3。
所以OOCSS推薦分離容器和內容,可以修改成:
[CSS] 純文字檢視 複製程式碼.title{ font-size:20px; color:#333; }
關於這一點,個人建議要分情況來看,像前面這個例子,它適合樣式和容器分離。但是比如下面這種情況:
[CSS] 純文字檢視 複製程式碼.menu li{ font-size:12px; }
這種ul,li列表的樣式,我覺的就按照我們原先的做法就可以,不一定非得給一個類給li來設定樣式,如下:
[CSS] 純文字檢視 複製程式碼.menu-item{ font-size:12px; }
這樣頁面的li標籤需要引用menu-item類。
相關文章
- CSS 簡單介紹CSS
- css簡單介紹CSS
- CSS SMACSS簡單介紹CSSMac
- CSS BEM簡單介紹CSS
- css 註釋用法簡單介紹CSS
- css註釋妙用簡單介紹CSS
- css border屬性簡單介紹CSS
- css的透明屬性簡單介紹CSS
- CSS3 calc()用法簡單介紹CSSS3
- css編碼規範簡單介紹CSS
- css引入外部css檔案的方式簡單介紹CSS
- css設定中文字型簡單介紹CSS
- css :target偽類選擇器簡單介紹CSS
- 利用css設定列印頁面簡單介紹CSS
- CSS尺寸單位介紹CSS
- SVG簡單介紹SVG
- HTML簡單介紹HTML
- ActiveMQ簡單介紹MQ
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- SCSS 簡單介紹CSS
- UICollectionView 簡單介紹UIView
- CSS程式碼重構與優化簡單介紹CSS優化
- css選擇器的解析順序簡單介紹CSS
- CSS3屬性選擇器簡單介紹CSSS3
- 裝置畫素和css畫素簡單介紹CSS
- 物件導向css oocss物件CSS
- css em單位用法介紹CSS
- jquery css()方法設定元素的樣式簡單介紹jQueryCSS
- 動態設定元素的css樣式簡單介紹CSS
- javascript動態改變元素css樣式簡單介紹JavaScriptCSS
- 網頁中使用css的幾種方式簡單介紹網頁CSS
- RPC簡單介紹RPC
- Webpack 的簡單介紹Web
- spark簡單介紹(一)Spark
- Flutter key簡單介紹Flutter
- Python簡單介紹Python
- <svg>元素簡單介紹SVG