您現在的位置是:電腦技術吧?>? 編程技術 ??>??規范編寫,標準編寫規范??>??正文詳情

規范編寫,標準編寫規范

溫綠夏2019-11-26 15:21:24 人圍觀
簡介產品規范編寫標準這是一個相對復雜的CSS理論,它分為五個部分:基礎、布局、模塊、狀態和主題。然而,它的核心思想仍然類似于OOCSS,鼓勵使用類1。基本屬性基本屬性容易理解,這

這是一個相對繁雜的CSS理論,分為Base、Layout、Module、Status和Theme共五個部分。

不過它的核心思想仍然和OOCSS類似,鼓勵使用class。

  1. Base 基本屬性  基礎屬性很容易理解,就是最基本的東西,很多樣式簡單的網站都采用一個簡單的二級CSS文件模式,一個base.css通用于所有頁面,而每個頁面有一個特定的CSS文件,我想這就是Base的雛形。

要說具體是什么,比如reset文件,再比如放置clearfix或BFC的一些類似工具集的文件。

  其實最終會發現,在Base中的CSS屬性將會是幾乎全站都要用到的屬性,但我不想這么描述Base,因為這會誤導人。

大多數情況下,在一個網站建立之初也只會有幾個簡單的頁面,于是這幾個頁面都要用到的屬性就變成了通用屬性,但并不是這么簡單的。

隨著網站規模的擴大,需求的增加,設計師們靈感的迸發,所謂的通用和統一也在發生著潛移默化。

所以在編寫Base時,應該遵循的基準是,哪些樣式是你做下一個網站時也會想用的,哪些樣式即使設計改變了也只需要改變一些數值和顏色,哪些樣式是一些基本原則;而不應該將目前大部分頁面都在使用的樣式放在Base中,還是那個道理,它們也許僅僅是恰好相同,而非邏輯一致。

  2. Layout 布局  布局是一個網站的基本,無論是左右還是居中,甚至其他什么布局,要實現頁面的基本瀏覽功能,布局必不可少。

SMACSS將這一功能單獨提出也是非常正確的,另外還約定了一個前綴l-/layout-來標識布局的class。

舉個最普遍的例子。

  代碼如下:  .l-header {}  .l-brand {}  .l-navigator {}  .l-container {}  .l-sidebar {}  .l-content {}  .l-footer {}  這就是一個簡單的左右布局,導航和Logo中規中矩在最頂部。

  3. Module 模塊  模塊是SMACSS最基本的思想,同時也是大部分CSS理論的基本,將樣式模塊化就能達到復用和可維護的目的,但是SMACSS提出了更具體的模塊化方案。

首先表象上來看,SMACSS中的模塊應該擁有一個名字,并且為其class名,而模塊其他class皆以為前綴。

比如:  CSS Code復制內容到剪貼板  .product {}  .product-title {}  .product-image {}  .product-border {}  .product-shadow {}  可以看到例子中product是一個模塊,title和image是包含在模塊內的組件,可用可不用;border和shadow是類似OOCSS的附加class用來改變模塊本身。

總之,在模塊內可以使用其名稱做前綴任意組織模塊結構,但目前是讓其變得更易用,提高可擴展性和靈活度,如果僅僅為了某些功能而特意寫一些class就有點有形無實的感覺了。

  4. State 狀態  狀態經常和JavaScript放在一起使用,它是一種用來標識頁面狀態的class,無論是為用戶標識還是用程序標識。

還是一個常見的例子,馬上就明白。

active經常用來表示當前的tab,或者當前選中的目標,這就是一種狀態,無論是樣式還是程序都需要知道它。

  SMACSS仍然有一個對應的前綴用于標示狀態class,is-是一個合適的詞,指明某一元素是什么狀態。

  5. Theme 主題  主題就是皮膚,和OOCSS的分離皮膚與結構不謀而合。

更重要的是對于可更換皮膚的站點來說,這樣的分離是非常必要的,只需要更換加載的theme文件即可將皮膚更換。

  總的來說,SMACSS是一個較為注意細節與實現的CSS理論,非常適合初涉CSS的人,它可以讓你的CSS跑在軌道上而不至于脫軌。

其思想也與OOCSS有很多相通之處,如果沒有適合的方案,我建議新手可以適當的融入OOCSS的思想而使用SMACSS的結構,這樣寫出來的網站樣式至少不會馬上陷入泥沼。

版權聲明:本文由 溫綠夏 整理編輯。

原標題:規范標準的編寫方法,如何編寫代碼規范

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

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • nginx配置多個server,一臺nginx支持多少并發

    nginx配置多個server,一臺nginx支持多少并發 相關圖片nginx和tomcat區別程序類人猿對nginx配置非常熟悉,但對于普通用戶來說,nginx配置是一件很奇怪的事情。Nginx是一個高性能的HTTP和反向代理服務器,以及IMAP/POPnginx反向代理配置教程...

  • 字體排版,字體排版技巧

    字體排版,字體排版技巧 相關圖片各種字體去年,JDC生產了很多優秀的五梅娘。。。不,H5,我們都很努力,當然,我們也積累了一些經驗和教訓。今天,從字體、排版、動態效果、音效、適配類型和創意等方面,結合文...

  • word中間打字后面消失,word文檔前面打字后面消失

    word中間打字后面消失,word文檔前面打字后面消失 相關圖片word文檔打字不顯示在使用word文檔輸入內容的過程中,我們有時會遇到單詞輸入后消失的情況。怎么了?如果打字后的單詞消失了,我該怎么辦?事實上,打字后的單詞會消失文檔中打字...

  • 設計師必備,設計師必備品

    設計師必備,設計師必備品 相關圖片設計師必備技能今天推薦的七個工件,包括經典的和新的,大致貫穿了整個UI設計的工作流程。從排版、配色、裁剪到注釋、預覽,都是由相應的良心工件推薦的,非常適合新手UI設計師...

  • 美團外賣打賞取消了嗎,為什么有些騎手打賞不了

    美團外賣打賞取消了嗎,為什么有些騎手打賞不了 相關圖片美團打賞騎手他知道是誰嗎近日,為了督促外賣男孩更好地為用戶服務,美團外賣推出了獎勵外賣男孩的功能。美團外賣的車手獎勵在哪里?接下來,超人將為我們帶來Android版美團外賣...

  • win10系統平板模式,win10系統怎么退出平板模式

    win10系統平板模式,win10系統怎么退出平板模式 相關圖片win10平板模式怎么關剛剛升級win10系統的用戶對新版windows10有一定的了解。超人小編認為,win10最大的特點是可以同時應用于平板電腦和個人電腦,使桌面的桌面可以像平板電windows10平板...

  • 框架,Php框架

    框架,Php框架 相關圖片框架圖片大全本文主要介紹了在Python中實現簡單狀態框架的方法,涉及到Python狀態框架的實現技巧,具有一定的參考價值,需要的朋友可以參考下面的例子來描述在Pythonhtml簡單框架代碼...

  • win7系統怎么設置路由器上網,win7如何設置路由器wifi

    win7系統怎么設置路由器上網,win7如何設置路由器wifi 相關圖片wind7系統怎樣連接路由器WiFi允許您隨時隨地隨意上網,不再受網線距離的限制。那么我們如何在win7系統中設置無線路由器呢?具體步驟是什么?讓我們和超人編輯器一起設置無線路由器...

  • 動態緩沖,緩沖gif

    動態緩沖,緩沖gif 相關圖片動態緩沖系數緩沖區公式在制作特殊效果時非常有用,在著名的三星導航菜單中使用。現在很多網站都備受關注,其中緩沖導航是其中一大亮點。本文以一個德國網站的導航為例,詳細...

  • 幸運奪寶,奪寶幸運值

    幸運奪寶,奪寶幸運值 相關圖片王者奪寶幸運值滿幸運戰利品是一個非常有趣的軟件。在這個軟件中,用戶可以使用幸運豆來交換商品。你需要什么步驟來為幸運戰利品充電?下一步,超人軟件將為你帶來一個關于如...

熱評文章

  • 悅跑圈怎么記錄跑步軌跡,悅跑圈查看跑步軌跡

    悅跑圈怎么記錄跑步軌跡,悅跑圈查看跑步軌跡 相關圖片悅跑圈怎樣修改跑步記錄隨著時代的發展,人們越來越關注自己的健康。其中,有很多人喜歡用越跑圈來記錄運動。岳潤泉的跑道怎么走?接下來,超人軟件小編將為大家介紹iPhone版的...

  • 在dreamweavercs6中,dreamweavercs6安裝

    在dreamweavercs6中,dreamweavercs6安裝 相關圖片dreamweaverDreamweaver CS6設置背景音樂的方法步驟:1。指定方法1的代碼。代碼指定方法是指直接在頁面的HTML代碼中設置背景音樂。在現實中,通常使用標簽來實現cs6...

  • 已拍的激萌怎么去水印,怎么刪掉激萌內部照片

    已拍的激萌怎么去水印,怎么刪掉激萌內部照片 相關圖片faceapp有水印用face u軟件自拍很可愛,但不管是視頻還是照片,都會有face u的水?敲門?如何給aceu的照片加水印?今天,超人軟件為您帶來了一個關于faceu水印的圖激萌照片怎樣徹底刪除...

  • 書旗小說,書旗小說免費閱讀

    書旗小說,書旗小說免費閱讀 相關圖片最強老司機 小說書旗小說中有大量的作品,是許多書迷閱讀的天堂。如果你在電腦上下載了很多小說,但又不想通過數據線傳輸,可以使用安卓版的橫幅小說WiFi功能。書旗小說怎么樣女...

  • 獲取顏色,獲取圖片中的顏色

    獲取顏色,獲取圖片中的顏色 相關圖片android顏色本文主要介紹了Python通過PIL獲取圖片主要顏色的方法,并與顏色庫進行了比較。實例分析了Python通過PIL模塊進行圖片操作的技巧,具有一定的參考價值。需顏色抓取...

  • 拼多多省錢的優惠券在哪里領,拼多多平臺優惠在哪里領

    拼多多省錢的優惠券在哪里領,拼多多平臺優惠在哪里領 相關圖片淘寶怎么把人踢出去品多多是一款更實惠的移動部隊網上購物軟件。如果你覺得在多都商城團購不劃算,你還是可以通過各種方式獲得優惠券!如何獲得優惠券?如何獲得優惠券拼多多...

  • 鉛筆圖標,鉛筆小圖標

    鉛筆圖標,鉛筆小圖標 相關圖片ai里面出現鉛筆的圖標焰火制作超級漂亮的鉛筆效果:本教程最初是一個在線PS教程。我試著用FW來達到這個效果。操作步驟如下:圖標是一只鉛筆的軟件...

  • 怎么提取ppt的音樂,怎樣將ppt里面的音樂提取出來

    怎么提取ppt的音樂,怎樣將ppt里面的音樂提取出來 相關圖片ppt里音樂導出上一次,超人編輯教你如何在PPT中制作主版本。這一次,超人編輯帶給你的還是一門PPT相關課程,內容是如何從PPT中提取音樂。超人小編相信,當你在PPT上聽到上帝ppt音樂...

  • mobike lite,mobike怎么用

    mobike lite,mobike怎么用 相關圖片mobike音箱如何配對我想經常騎摩比自行車的人一定知道了。現在打開Moby bike的Android主界面,你會發現有兩個選擇。一個是我們常見的摩拜人,另一個是摩拜人。所以摩比摩比摩molite...

  • 怎么修改圖片尺寸,圖片尺寸

    怎么修改圖片尺寸,圖片尺寸 相關圖片二寸照片的尺寸是多少在設計網頁時,通常需要找到一張寬度和長度合適的圖片來填充塊,或者測試不同大小圖片的性能。這可能會浪費很多時間,甚至會自己制作一些特殊尺寸的圖片...

關注微信

变脸官网查询