好程式設計師分享如何看待CSS中BEM的命名方式?
好程式設計師 分享 如何看待 CSS 中 BEM 的命名方式 ?BEM 的意識就是塊 (block) 、元素 (element) 、修飾符 (modifier) ,是由 yandex 團隊提出的一種 CSS Class 命名方法。
任何一個東西的存在都有其存在的道理,如果他毫無價值,那麼肯定會被淘汰,後人可能都不瞭解,甚至都不會出現在後人的世界裡。
關於 BEM 命名其最大的爭議就是其命名風格,它鼓勵一級一級的寫的非常具體,但是會很長。如此常的命名會影響書寫效率,名稱過長程式碼量就會增多,檔案體積就會變大 ( 在 gzip 下這個不算是個問題 ) ,從而會影響傳輸速度,使用者體驗度就低,但是作為一個職業人我們都不能單純把個人喜好和習慣作為藉口來拒絕或否定其用途。
風格對於使用者來說並不是很重要,關鍵的是看其效果。正所謂人們常說的 “不看療程,看療效”。
從擴充套件性上來看,巢狀過多閱讀性差,超過 3 層就很難閱讀了 ; 巢狀越多,選擇器的層級也會隨之增多,那麼效能不知不覺就會變差 ; 如此長的名字,書寫上想衝突都難。
從程式設計原則上來說,這種命名方式不會暴露抽象類。假如樣式變了需要繼承另一個抽象類,不需要改 HTML ,只需要改 css 即可。
團隊開發中,風格無非是一種形式,可以約束人們達到一定程度上的統一。內部溝通會極大降低溝通成本。
BEM 命名的方法雖然有自身的不足之處,但至少他可以使我們命名的時候達到一定的統一,我們可以學習其優秀的方面將其納為己用。在實際專案開發中將其巧妙而又靈活的運用起來也未嘗不是一件壞事。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2639969/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師分享Css詳解bem書寫規範程式設計師CSS
- 好程式設計師web前端分享值得參考的css理論:OOCSS、SMACSS與BEM程式設計師Web前端CSSMac
- css BEM 命名CSS
- 好程式設計師分享JavaScript建立物件的方式!程式設計師JavaScript物件
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端教程分享CSS技巧!程式設計師Web前端CSS
- CSS命名方法之BEMCSS
- CSS — BEM 命名規範CSS
- css 命名規範 BEMCSS
- 好程式設計師web前端分享CSS3顏色值HSLA表示方式程式設計師Web前端CSSS3
- 好程式設計師web前端教程分享web中CSS絕對定位程式設計師Web前端CSS
- 好程式設計師web前端分享CSS元素型別程式設計師Web前端CSS型別
- 好程式設計師web前端分享CSS基礎篇程式設計師Web前端CSS
- 好程式設計師web前端分享CSS不同元素margin的計算程式設計師Web前端CSS
- 好程式設計師web前端培訓分享CSS定位的教程程式設計師Web前端CSS
- 好程式設計師web前端培訓分享怎樣學好css?程式設計師Web前端CSS
- 好程式設計師web前端分享css初始化程式碼程式設計師Web前端CSS
- 好程式設計師web前端分享CSS3 漸變程式設計師Web前端CSSS3
- 好程式設計師web前端分享主流CSS image比較程式設計師Web前端CSS
- 好程式設計師web前端技術分享css盒模型程式設計師Web前端CSS模型
- BEM —— 源自Yandex的CSS 命名方法論CSS
- 好程式設計師Java培訓分享如何避開面試中的“坑”程式設計師Java面試
- 用BEM命名規範組織CSS程式碼CSS
- 好程式設計師分享JavaScript六種繼承方式詳解程式設計師JavaScript繼承
- 好程式設計師web前端分享CSS3彈性盒程式設計師Web前端CSSS3
- 好程式設計師web前端分享css常用屬性縮寫程式設計師Web前端CSS
- css 命名:BEM, scoped css, css modules 與 css-in-jsCSSJS
- 好程式設計師Java培訓分享Java之命名、標示符、變數程式設計師Java變數
- 好程式設計師Java培訓分享本地快取如何設計程式設計師Java快取
- VUE的面試題分享-好程式設計師Vue面試題程式設計師
- 好程式設計師web前端分享CSS檔案引用的最優方法程式設計師Web前端CSS
- 好程式設計師web前端分享Css3的概念和優勢程式設計師Web前端CSSS3
- 好程式設計師分享CSS標籤的分類、及顯示模式程式設計師CSS模式
- 好程式設計師Java培訓分享如何快速入門Java程式設計程式設計師Java
- 好程式設計師Java教程分享Java中this的幾種用法程式設計師Java
- 好程式設計師分享JavaScript中8個常見的陷阱程式設計師JavaScript
- BEM命名規範入門及常用CSS class 命名CSS
- 好程式設計師web前端培訓分享HTML/CSS部分面試題程式設計師Web前端HTMLCSS面試題