您現在的位置是:電腦技術吧?>? 編程技術 ??>??什么是架構,架構??>??正文詳情

什么是架構,架構

項夢寒2019-11-20 14:21:45 人圍觀
簡介VIE架構在當前瀏覽器普遍支持CSS架構的前提下,CSS被賦予了前所未有的使命。但是,您依賴的CSS越多,樣式表文件就越大、越復雜。同時,文檔維護和組織的測試也曾經遵循,部門架構

架構CSS  在當前瀏覽器普遍支持的前提下,css被我們賦予了前所未有的使命。

然而依賴css越多,樣式表文件就會變得越大越復雜。

與此同時,文件維護和組織的考驗也隨之而來。

  (曾幾何時)只要一個css文件就夠了所有規則(rule)匯聚一堂,增刪改都很方便可這種日子早已遠去。

(現在)建立新網站時,必須花點時間好好籌劃怎么組織和架構css。

  文件的組織  構建css系統的第一步是大綱的擬定。

(我認為)css組織規劃的重要性堪比網站目錄結構。

(注:用詞夸張一點,讓你加深記憶) 沒有哪種方案放之四海而皆準,因此我們會討論一些基本的組織方案,以及它們各自的利弊。

  主CSS文件  通常可以使用一個主css文件,來放置所有頁面共享的規則。

這個文件會包含默認的字體、鏈接、頁眉和其他等樣式。

有了主css文件之后,我們開始探討高級組織策略。

  方法一:基于原型  最基本的策略是基于原型頁面(archetype page)分離css文件。

假如一個網站的首頁、子頁面和組合頁設計不同,就可以采用基于原型的策略。

(這種策略下)每個頁面都會有專屬的css文件。

  在原型數量不多的情況下,這個方法簡單明了、行之有效。

然而,當頁面元素并不按部就班的位于各個原型頁時,問題就出現了。

如果子頁面和組合頁共享某些元素,而首頁卻沒有,我們應該怎么做呢?  把共享元素放入主css文件。

這雖不是最純正的解決辦法,卻適用于某些具體情況。

可是如果網站龐大,(這樣做的話)主css文件會迅速膨脹這就違背了分離文件的初衷:避免導入不必要的大文件。

  在組合頁和子頁面的css文件里各放一份樣式代碼。

(這么做)就意味著要維護冗余代碼,很顯然我們不想這樣。

  創建一個新的文件,由這兩種頁面共享。

這聽起來不錯。

不過假如只有10行代碼,我們創建這個文件僅僅是為了共享這10行代碼?(注:殺雞用牛刀?) 這方法很純粹,但如果網站龐大有很多對頁面共享很少量元素時(注:比如30對頁面分別共享10行代碼),就顯得很笨重了。

  創建一個單獨的css文件,包含所有共享元素的樣式。

這方法可能比較簡單,卻要取決于網站的大小和共享元素的多少。

有種情況會很煩:導入了一個很大的css文件,但頁面只用到一小部分樣式還是那句話,這違背了分離文件的初衷。

  這就是我所說的重疊的兩難(overlap dilemma)。

零碎css規則的重疊不一而足,并沒有一個完全清晰無誤的方案來組織它們。

  方法二:基于頁面元素/塊  如果網站使用服務器端include,這個方法會很不錯。

舉例說明,如果使用頁眉include,它會有自己相應的css文件。

頁腳或者其他部分的include可以如法炮制,只須導入自己的css文件。

這個方法簡單干凈,不過可能會產生很多小css文件。

  舉例來說,假如頁腳的樣式只需要20行css代碼,單獨創建一個文件就劃不來了。

而且這個方法會導致每個頁面都包含一堆css文件因為有多少include,就得有多少css文件。

  方法三:基于標記  這個方案直觀實際,與前一個類似。

如果網站共有30個頁面,其中10個含有form,那么可以創建一個css文件專門處理form的樣式,只在這10個頁面導入它。

如果另外10個頁面含有table,就創建一個文件專門處理table樣式諸如此類。

  總結:  CSS不僅僅是視覺設計,也不要因為你編寫CSS就隨便拋出編程的最佳實踐。

像OOP、DRY、打開/閉合、與內容分離等這些規則應該應用到CSS里面。

無論你如何組織代碼,都要確保方法真正幫助到你,并且使你的開發更加容易和可維護的。

版權聲明:本文由 項夢寒 整理編輯。

原標題:NSA架構,應用架構

轉載注明出處:http://www.dn9ww09s.icu/program/13787.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 我投訴了騎手,能撤銷嗎,投訴外賣騎手遭報復

    我投訴了騎手,能撤銷嗎,投訴外賣騎手遭報復 相關圖片送餐超時,顧客取消訂單有一次,如果你不想出去吃飯,你會選擇方便面。如果你選擇使用方便面,你想點嗎。在使用“餓瑤”的過程中,不可避免地會遇到劣質的商人或騎手。所以我餓...

  • html5空格,html多個空格

    html5空格,html多個空格 相關圖片空格html代碼為遇到這樣一位朋友,在編譯HTML代碼時,兩個字之間有一個空格,他沒有在兩個字之間加一個空格,在這種情況下沒有代碼,很難找出問題時,HTML代碼沒有用得太多或熟練...

  • 電腦沒聲音一鍵恢復,電腦沒聲音怎么辦圖解

    電腦沒聲音一鍵恢復,電腦沒聲音怎么辦圖解 相關圖片電腦聲音圖標為紅色?據信,對許多人來說,在使用電腦時發現沒有聲音是一個毀滅性的消息。那么如何在沒有聲音的情況下恢復電腦呢?電腦沒有聲音是什么原因?讓我們讓超人軟件...

  • 動畫制作,動畫制作實例

    動畫制作,動畫制作實例 相關圖片Flash動畫制作實例教程操作步驟如下:c4d簡單動畫制作步驟...

  • 最好的手機文件管理器,電腦文件管理軟件哪個好

    最好的手機文件管理器,電腦文件管理軟件哪個好 相關圖片發現異常badrararchive使用計算機的時間越長,計算機上的文件就越多。是時候為你的電腦安裝一個文件管理軟件了。一個好的文件管理軟件不僅可以使計算機上文件的存儲和排列更加簡潔...

  • 作業幫評論怎么刪除,作業幫刪除觀看歷史

    作業幫評論怎么刪除,作業幫刪除觀看歷史 相關圖片作業幫如何看自己的帖子家庭作業幫助是一個非常實用的學習和閱讀軟件。在這個軟件中,用戶和朋友可以獲得非常專業的學習信息。那么,你知道怎么刪除這些帖子嗎?讓我們跟隨超...

  • ui設計交互設計,界面交互設計

    ui設計交互設計,界面交互設計 相關圖片交互設計要學什么我們互動的時間越長,我們就越發現文案的重要性。今天,讓我們來談談互動文案文案最初被稱為一個表格,后來演變成一個職業;現在說文案一般是指用文字表達創...

  • 筆記本質量十大排名,挑選筆記本電腦的技巧

    筆記本質量十大排名,挑選筆記本電腦的技巧 相關圖片現在筆記本電腦主流配置與臺式機相比,筆記本電腦具有攜帶方便、占用位置小等優點,受到了很多人的喜愛。那么什么牌子的筆記本電腦好呢?現在,超人軟件編輯也想為您解答如何...

  • 減少生成物濃度圖像,圖像的最基本單元

    減少生成物濃度圖像,圖像的最基本單元 相關圖片當圖像偏藍時你應當給圖像加減少圖像大小以減少下載時間的最有效方法之一是減少圖像中使用的顏色數。這可以大大降低一些照片圖像的質量,但對于油漆車間專業版中的大多數橫幅...

  • 嘀嗒刷臉跳過,刷臉不是本人也能過

    嘀嗒刷臉跳過,刷臉不是本人也能過 相關圖片刷臉認證視頻條是一個非常好的視頻播放軟件。在這個軟件中,如果你想成為一個主機,你必須首先通過實名認證。現在,我們怎么能賺錢呢?我想告訴你怎樣賺錢我希望招聯如何跳過...

熱評文章

  • 滴滴車主怎么申訴成功,滴滴取消訂單申訴理由

    滴滴車主怎么申訴成功,滴滴取消訂單申訴理由 相關圖片服務不佳滴滴怎樣申訴因為滴滴叫車很方便,現在,越來越多的人選擇使用它。然而,不可避免地遇到質量差的駕駛員。那么,didi旅行有什么吸引力呢?我是怎么去取消訂單的?接下來...

  • 導航菜單是什么,electron導航菜單

    導航菜單是什么,electron導航菜單 相關圖片easyui導航菜單有了焰火8,我們可以很容易地創建一個滑動菜單來添加酷的效果到網頁上首先看看最終的效果:1。打開FW 8.0(當然,我使用的是8.0,其他版本都是相同的2。創建新vue導航...

  • qq刷拼多多出評論,怎樣在拼多多評論

    qq刷拼多多出評論,怎樣在拼多多評論 相關圖片拼多多的評價在哪作為一種購物工藝品,品多多被認為是眾多小伙伴網購的首選。那么平度多在哪里看評論呢?平度多如何開店?接下來,讓超人軟件編輯給大家介紹一下,希望能幫助...

  • 墨跡天氣怎么放到桌面,墨跡天氣桌面圖標怎么設置

    墨跡天氣怎么放到桌面,墨跡天氣桌面圖標怎么設置 相關圖片op墨跡天氣桌面咋添加墨水天氣作為一款非常實用的天氣查詢軟件,很多小伙伴都喜歡用它來查詢PM2.5。那么如何看待墨水天氣下的PM2.5呢?現在,超人軟件編輯還想介紹Android版的墨跡天...

  • 怎樣使用通配符替換,通配符替換

    怎樣使用通配符替換,通配符替換 相關圖片使用通配符與全字匹配如果要在確定字符串前后批量替換div,請打開DW并搜索。檢查并使用正則表達式。搜索內容如下:divclass=taiyun1(。|序列號)*?/div替換為空白word通配符替換數字...

  • 二維碼取電影票圖解,貓眼電影取票流程

    二維碼取電影票圖解,貓眼電影取票流程 相關圖片電影院取票機使用圖解貓眼電影作為一款非常實惠的電影票購買軟件,受到了很多人的喜愛。我相信還有很多小朋友不知道如何買到貓眼電影的票。現在,超人軟件編輯想介紹一下如何...

  • 炫酷素材,炫酷背景圖片 素材

    炫酷素材,炫酷背景圖片 素材 相關圖片炫酷的背景不知道網友們有沒有發現,當他們訪問論壇或一些QQ空間時,會發現一些簽名很特別,簽名地圖上的文字會閃現,這讓你感覺很像嗎?事實上,你很容易做到。在本教程中,使...

  • 設置水印的軟件有哪些,加水印軟件app

    設置水印的軟件有哪些,加水印軟件app 相關圖片添加手機型號水印軟件當分享的精神釋放出來后,你精心拍攝的照片或照片如果被盜用,在其他地方牟取暴利,就不會被浪費。也許你應該在你的圖像文件上加上水印,并在共享時聲明...

  • 常見的音樂編輯器,最好的音樂編輯器是哪個軟件

    常見的音樂編輯器,最好的音樂編輯器是哪個軟件 相關圖片音樂剪輯那個好使不是專業的音樂編輯會使用音樂編輯器,但更多普通用戶主要使用音樂編輯器作為鈴聲編輯工具。超人軟件站的編輯在這里分享一些有用的音樂編輯器,不僅可以滿足...

  • 創建標簽,js創建標簽

    創建標簽,js創建標簽 相關圖片如何制作標簽createelement可以創建HTML5的新標記,但最好使用innerHTML進行動態創建,尤其是元素。然而,在ie的內部html中存在很多問題,鏈接和腳本html單標簽...

關注微信

变脸官网查询