您現在的位置是:電腦技術吧?>? 故障問題 ??>??編程的設計模式,編程設計模式有哪些??>??正文詳情

編程的設計模式,編程設計模式有哪些

亢谷槐2019-11-22 09:31:50 人圍觀
簡介java設計模式代碼我真的認為編寫CSS并不難,但是編寫可維護的CSS比其他編程語言更難。幸運的是,有很多資深人士提出了許多設計模式和思路。站在巨人的肩膀上,我們可以讓事情做得

真心覺得寫出 CSS 并不難,但是要寫出可被維護的 CSS 比其他程式語言都還難。

所幸已經有許多大師級的人物,提出許多設計模式和思維,借由站在巨人的肩膀上可以讓事情事半功倍。

這篇文章就來說說 OOCSS、SMACSS 和撰寫 CSS 時應該注意的規范。

(本文的例子用的是 SCSS 語法)OOCSSOOCSS 不是什么新技術,只是一種撰寫 CSS 的設計模式,或者可以說是一種「道德規范」,大致上我覺得重點只有兩個:

    減少對 HTML 結構的依賴 增加 CSS class 重復性的使用
減少對 HTML 結構的依賴CSS Code復制內容到剪貼板
    nav class=nav--main ul lia........./a/li lia........./a/li lia........./a/li /ul /nav
一般的導航欄寫法,結構應該會像上面的 HTML 范例一樣,如果要對那些 a 標簽定義樣式,CSS 的寫法可能寫成.nav--main ul li a {},這種寫法先不管效能上的問題,可以看出來過度地依賴元素標簽的結構,有可能之后 HTML 結構改變,這個 CSS 就必須跟著重構,造成維護上多余的成本。

若從這個例子來考量,原則上 a 都一定會接在 li 標簽的后面,一個 li 只會有一個 a,通常不會獨立存在,那就可以寫成 .nav--main a {},會是比較好的寫法,甚至是直接給 a 加上 class nav--main_item。

后者是 OOCSS 所提倡的用法。

這樣的寫法,一來效能理論上比較好(我沒辦法驗證),二來層次比較單純。

增加 CSS class 的重復使用在 OOCSS 的觀念中,強調重復使用 class,而應該避免使用 id 作為 CSS 的選擇器。

這種想法就是像OOP盡量抽離重復的程式碼,例如以下這個例子,這是兩種按鈕的 CSS 樣式屬性:CSS Code復制內容到剪貼板

    .button { display: inline-block; padding: 6px 12px; color: hsla(0, 100%, 100%, 1); .button-default { background: hsla(180, 1%, 28%, 1); } .button-primary { background: hsla(208, 56%, 53%, 1); } }
上面的 CSS 將兩種不同樣式的 button,抽離出重復的部份,并且定義在同個 class上。

因此,要使用這樣的樣式,HTML 的寫法可能長這個樣子:CSS Code復制內容到剪貼板

    a class=button button-default a class=button button-primary
先用 button 宣告此為一個按鈕的樣式,再用 button-default 或 button-primary 作為按鈕底色的區別。

這么做可以維護成本變得比較低,例如:想要改網站上所有按鈕的大小,就只要修改 .button 的 padding 而已。

SMACSS我對 SMACSS 的理解還不是很深入,或許把 Scalable and Modular Architecture for CSS 看完后會有更深一曾的理解。

目前對 SMACSS 的概念僅限于它對 CSS 不同的業務邏輯所做的劃分方式:但我認為原本的設計不是很妥當,因此我自己做了一些改良:BaseBase 就是設定標簽元素的預設值,例如瀏覽器的 reset 可以寫在這里,如果用的是 Compass,只要 @include global-reset 即可。

這里只會對標簽元素本身做設定,不會出現任何 class 或id,但是可以有屬性選擇器或是偽類:CSS Code復制內容到剪貼板

    html {} input[type=text] {} a:hover {}
LayoutLayout 是指整個網站的「大架構」的外觀,而非 .button 這種小元件的 class。

網站通常會有一些主要的大區塊,可能是 header 或 footer,Layout 就是用來定義這些「大架構」的 CSS。

如果有做 Responsive Web Design 或是用 Grid System,也是把規則寫在 Layout 這里。

以下這是個范例:CSS Code復制內容到剪貼板

    #header { margin: 30px 0; } #articles-wrapper { ......; } .sidebar { .sidebar--rightright { ......; } .sidebar-left { ......; } }
通常只有一個選擇器,一個 id、或一個 class。

Module原本的 SMACSS 對 Module 的設計我覺得不是很好,所以我硬是將 Module拆分出一個 Partial。

這里的 Module 顧名思義,就是可以在其他地方被重復使用,如果要找更明確的例子,我想就像 Twitter Bootstrap 的Components一樣,或者像前面 OOCSS 所舉例的 .button 這種會被重復使用的元件模組。

模組不需要用任何的 prefix,因為 Module 就是設計來可以重復應用在不同的 page 上。

PartialPartial 跟 Latout 不同,也跟 Module 不同,他比 Layout 的范圍小,可能是header 底下的某個子元素。

他不像 Module,他是特定單一領域下特別的設定。

CSS Code復制內容到剪貼板

    .nav--main { a { ......; } }
通常會將 Partial 的名稱加在子 class 作為 prefix,例如 .nav--main 底下的.nav--main_item。

至于為什么要用這么奇怪的命名方式?

這等等在 CSS 規范部分會說明介紹。

StateState 負責定義元素不同的狀態下,所呈現的樣式。

但是并非指一個元素的 :hover 或 :active 下的狀態。

舉例來說,一個導航欄分頁,目前所在頁面的分頁需要加上 .active的屬性表示目前位置是在這個分頁,HTML 會長這樣:CSS Code復制內容到剪貼板

    nav class=nav--main ul lia........./a/li li class=activea........./a/li lia........./a/li /ul /nav
因此可以替 .nav--main 增加 .active 這樣的子 class:CSS Code復制內容到剪貼板
    .nav--main { // others; .active { background: darken($background-color, 16%); } }
有時候為了讓閱讀更貼近語義,會用比較友善的命名方式,以此段的范例來說,.is-active 就比 .active 來得好讀。

ThemeTheme 是畫面上所有「主視覺」的定義,例如 border-color、background-image 或是 font-family 等相關的 Typography 設定。

為什么說是「主視覺」?

因為有些元件模組仍然是留在 Module 去定義,Theme 就像 Layout 一樣負責「大架構」上的視覺樣式。

編者注 感謝 Only1Word 指出,theme 在 SMACSS 中更類似皮膚。

CSS 規范這里整理的是我覺得一定要知道的,其他還有很多規范可以轉到文末的參考資源連結,那篇文章有介紹更多的細節。

BEMBEM 即 Block、Element、Modifier 的縮寫,這是一種 class 的命名技巧。

如果整個 project 只有自己一個人做,那當然是不太可能出現 class 重復的問題,但是如果同時多個 F2E 一起寫同個部分的 CSS,就很容易出現共用 class 的問題,因此有了 BEM 這樣的命名技巧。

將 Block 區塊作為起始開頭,像前面 SMACSS 介紹的 Partial 就可以拿來作為 Block 的 prefix 名稱;Element 則是 Block 下的元素;Modifier 則是這個元素的屬性。

不同 Block 和 Element 用 __ 兩個底線區隔開來,不同的 Modifier 則用 -- 兩個 dash 區隔。

至于 - 一個 dash 則表示這個 class 不依賴任何 Block 或 Element,是個獨立的存在,例如:.page-container 或 .article-wrapper。

這里有個范例:CSS Code復制內容到剪貼板

    .sidebar { .sidebar--left__section { .sidebar--left__section--header {} .sidebar--left__section--footer {} } }
Javascript Hook透過 CSS class 來作為 Javascript 選取 DOM 節點的方式,就是 Javascript Hook。

用 jQuery 可以常常看到這樣的寫法:$('.nav--main a'),可是當 CSS 跟 Javascript 攪在一起反而造成兩邊維護上的不便,當改了 CSS 時 Javascript 也要跟著改。

所以用 HTML 的屬性去選取 DOM 節點會更好,如果非要用 CSS 的 class 那也可以多寫一個 js- 的 prefix,以表示這個節點有被 Javascript 使用,例如:CSS Code復制內容到剪貼板

    li class=nav--main__item js-nav--main__itema........./a/li li class=nav--main__item js-nav--main__itema........./a/li li class=nav--main__item js-nav--main__itema........./a/li
PS. HTML 里兩個 class 之間用兩個空格,會比一個空格看起來好閱讀。

合理的選擇器class 無所謂是否語意化的問題;你應該關注它們是否合理,不要刻意強調 class名稱要符合語意,而要注重使用的合理性與未來性。

有時候為了表示更明確,在使用 CSS 的選擇器時,要表示某的 class 是搭配某個標簽元素使用,會寫成這樣:CSS Code復制內容到剪貼板

    ol.breadcrumb{} p.intro{} ul.image-thumbs{}
但是上面這個寫法效能不是很好,同樣的目的但可以減少多余的修飾,試試改用下面這種寫法,將標簽名稱用注解標示起來,維護上有相同的效果,但是瀏覽器處理的速度會比較快:CSS Code復制內容到剪貼板
    /*ol*/.breadcrumb{} /*p*/.intro{} /*ul*/.image-thumbs{}

版權聲明:本文由 亢谷槐 整理編輯。

原標題:編程常用設計模式,嵌入式編程設計模式

轉載注明出處:http://www.dn9ww09s.icu/fault/13875.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 天天練班級號,天天練怎么建班級

    天天練班級號,天天練怎么建班級 相關圖片樂樂課堂手機官網日常練習是一個非常好的閱讀和學習軟件。在這個軟件中,你可以通過回答問題來節省金幣作為禮物。那么如何在日常實踐中加入課堂呢?現在,超人軟件編輯還想為...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么第一步是隨意創建一個新的畫布,用﹐000066填充背景色,用鋼筆畫出基本形狀,羽毛邊框(半徑1),填充放射性梯度,并在濾光片外添加光線,效果如圖所示:第...

  • 泰微課視頻在線觀看,免費微課視頻在線觀看

    泰微課視頻在線觀看,免費微課視頻在線觀看 相關圖片免費微課觀看親子成長是一個非常實用的教育軟件。通過這個軟件,家長和孩子們可以一起了解生活各個方面的習慣,學習他們在學校學不到的知識。那么家長和孩子怎么能一起長大看...

  • 送男人什么禮物最難忘,送男友實用禮物排行榜

    送男人什么禮物最難忘,送男友實用禮物排行榜 相關圖片感動一個男生的套路我相信銀幕前有很多小姐妹都在擔心男友的生日。他們必須認真考慮該送什么禮物。你男朋友的生日禮物是什么?現在,超人軟件編輯會給你一些建議,告訴你什么...

  • outline怎么用,什么是outline

    outline怎么用,什么是outline 相關圖片outline格式首先,提綱是一件很好的事情。一。邊疆的近親勾勒和邊疆的近親。你為什么這么說?首先,它們都是外部框架元素。其次,支持的屬性值幾乎相同,例如大綱樣式和邊框樣式...

  • 自己做鈴聲的軟件,蘋果鈴聲制作軟件下載

    自己做鈴聲的軟件,蘋果鈴聲制作軟件下載 相關圖片鈴聲自制軟件很難厭倦聽到系統本身的鈴聲。當您使用喜愛的歌曲作為鈴聲時,如果前奏曲太長,您可以使用鈴聲制作軟件。有這么多常用的鈴聲制作軟件,哪一個比較好用?鈴聲快速...

  • 抖音怎么發5分鐘完整版,抖音怎么拍5分鐘長視頻

    抖音怎么發5分鐘完整版,抖音怎么拍5分鐘長視頻 相關圖片抖音上傳三分鐘以上視頻教程自助餐是一個非常有趣的視頻播放軟件,你可以通過自助餐展示你的才華。那么,你知道如何制作顫音的長視頻嗎?現在,超人軟件的小編輯想介紹一下如...

  • Flash教程,Flash動畫實例教程

    Flash教程,Flash動畫實例教程 相關圖片Flash動畫設計Flash CS4在界面上與之前的CS3版本沒有顯著差異。三維工具、裝飾工具和骨骼工具將添加到“工具”菜單中。已為MC添加動畫編輯器。腳本語言沒有改變,主要是針Flash動畫設...

  • 抖音暫時無法保存鏈接以復制,抖音保存他人視頻

    抖音暫時無法保存鏈接以復制,抖音保存他人視頻 相關圖片抖音不發布可以保存嗎自助餐是年輕人喜愛的視頻軟件。在這個軟件中,你可以觀看來自世界各地的人才上傳的視頻。如何將短視頻保存到相冊中?如何將Android版的短視頻發送到朋友圈...

  • 如何做靜態網頁,靜態網頁有哪些

    如何做靜態網頁,靜態網頁有哪些 相關圖片靜態網頁生成工具靜態網頁有時稱為平面網頁。靜態網頁的網址通常以HTML(超文本標記語言)結尾,并以超文本標記語言(。熱媒,。HTML),。Shtml,。XML(Extensib靜態網頁有哪些特點...

熱評文章

  • 魔獸世界沒聲音,魔獸世界聲音

    魔獸世界沒聲音,魔獸世界聲音 相關圖片魔獸世界調查聲音魔獸世界是一個非常實用的移動助理魔獸世界。在這個軟件中,用戶即使不登錄魔獸世界客戶端,也可以了解游戲的最新信息。不過,最近有朋友反映他們有點吵。我...

  • 存儲原理,存儲雙活詳解原理

    存儲原理,存儲雙活詳解原理 相關圖片3par存儲雙活解決方案說到web開發中的本地存儲,首先要考慮的是cookies。當然,第一批餅干都是已知的。主要的問題是它們太小了,大約4KB。而且,IE6每個域名只支持20個coo存儲框架...

  • 激萌跟抖音怎么合成?,抖音怎樣和激萌一起拍

    激萌跟抖音怎么合成?,抖音怎樣和激萌一起拍 相關圖片激萌里的變老在哪自助餐是一個非常有趣的照片美化軟件。在這個軟件里,你可以拍攝各種很酷的視頻。現在,你知道如何在自助餐中添加可愛的效果嗎?現在,超人軟件編輯想介紹如...

  • 什么的輪廓,耳輪廓

    什么的輪廓,耳輪廓 相關圖片輪廓度拿個手電筒在黑暗中向相機揮動,拍一張光軌的照片。這種沒有繪畫的輕涂鴉很受歡迎。它的魅力不僅體現在黑暗中耀眼的光輝上,更體現在人們對一幅隨時都會幻滅的美麗畫卷...

  • 雨中冒險2怎么刷月亮,qq怎么刷星星月亮

    雨中冒險2怎么刷月亮,qq怎么刷星星月亮 相關圖片qq的太陽星星怎么刷Shiba是一個非常好的實時軟件。當你成為錨后,你可以通過升級你的評級到月亮或太陽來賺取更多的錢。那怎么刷月亮和太陽呢?現在,超人軟件編輯也想介紹一下如...

  • 浙工院app,i浙工院app

    浙工院app,i浙工院app 相關圖片i浙工院閃退浙江理工學院是浙江理工學院為學生開發的軟件。很多新同學和朋友反映,他們不知道如何使用浙江理工學院的應用程序。現在,超人軟件編輯就為大家介紹一下浙江理工學...

  • 元素hr,化學hr

    元素hr,化學hr 相關圖片hr是干嘛的定義以繪制水平線繪制水平規則。注意:此元素在Internet Explorer 3.0及更高版本的HTML中可用,在Internet Explorer 4.0及樂元素 面試...

  • 百度網盤flv視頻打不開,flv格式如何播放

    百度網盤flv視頻打不開,flv格式如何播放 相關圖片flv格式可以在電腦上播放嗎在網絡流媒體格式中,FLV格式是最常見的,大多數網絡視頻都是以FLV格式下載的。那么,FLV格式使用什么播放器來打開它呢?這里有幾個好的flv播放器推薦F...

  • 網頁排版,網頁排版模板

    網頁排版,網頁排版模板 相關圖片網頁排版設計軟件為了讓您了解CSS的作用,以及為什么要使用CSS而不是HTML表來進行web頁面布局,下面的示例向您解釋一個頁面是用HTML格式化的,另一個頁面是用CSS格式化網頁顯示排版不...

  • 有道翻譯官怎么收費,有道翻譯官同傳怎么用

    有道翻譯官怎么收費,有道翻譯官同傳怎么用 相關圖片有道翻譯官ar如何開啟如今,隨著國家的發展,人們有了旅游的錢,但不可避免地會遇到語言障礙的情況。這時,只要有翻譯,這個問題就可以解決。那你怎么用呢?現在,超人軟件編輯...

關注微信

变脸官网查询