<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          如何編寫輕量級 CSS 框架

          時間:?2017-11-16閱讀:?670標簽:?css作者:?nzbin

          前言

          這篇文章我已經醞釀了半年之久,或者說拖沓了這么久吧。想說的東西很多,卻又無從說起。如今輕量級框架如雨后春筍,層出不窮。我想每個人都應該歸納總結工作中的常見需求,編寫一套適合自己的 CSS 框架。在之前的文章中,我提到了面向對象的 CSS(比如 BEM、OOCSS、SMACSS,詳見 http://vanseodesign.com/css/d...)。這是一種思想,并不涉及具體的 CSS 問題,主要是類命名的策略!現在仍然有很多人對于前端框架的認識還停留在表面,認為 Bootstrap 是后端人員專用,前端沒必要等等。我不知道這種說法從何而來,我最開始也不喜歡使用框架,或許和很多人的想法一樣,畏懼新知識、害怕難以駕馭、遇到問題的時候無法解決等等。最關鍵的一點是很多人認為框架的樣式是固定的,修改起來太麻煩,還不如自己根據設計圖寫起來方便。


          為什么使用框架

          為什么使用框架?答案顯而易見,效率。除此之外,使用框架或者研究框架的意義還有很多,比如面向對象思想的具體實現。在上一家公司工作的時候,開始的幾個項目我也是用最原始的方法書寫 CSS 。項目之中最讓我頭疼的就是類的命名。我想大多數人都是根據功能去命名,這就造成了很多的冗余,相同的組件可能寫很多次。簡單舉一個例子,如下圖,個人中心的登錄界面。

          很多人包括我剛開始的時候可能會選擇下面的類命名及布局方式,其通用性非常差

          <div class="login-area">
              <div class="login-img">
              <img src="..." />
            </div>
              <div class="login-text">
              <a href="...">請點擊登錄</a>
            </div>
          </div>

          然而了解 Bootstrap 的人應該一眼就發現上圖就是一個 media 對象,無非一些小細節需要調整一下

          <div class="media">
              <div class="media-left">
                  <img src="..." />
              </div>
              <div class="media-body media-middle">
                  <a href="...">請點擊登錄</a>
              </div>
          </div>

          為了讓文字與圖片居中對齊,我們可以使用 Bootstrap 的 .media-middle 的輔助類。如果在工作中還要根據需求自定義一些輔助類調整細節,當然這是一個移動端的例子,可以選擇移動端框架相關的 media 對象。

          另外,在項目改版的時候,原始的方法的修改更是慘不忍睹,可以說是噩夢,冗長的 CSS 文件、混亂的功能劃分、類名、色值等等。最后也只能硬著頭皮一點一點修改。那一刻我才體會到框架的意義以及前端工具的重要性。我從工作中總結出,要么你可以熟練的使用某一個框架,要么就自己實現一個框架


          前端框架對比

          目前市面上前端框架主要分重量級與輕量級。重量級主要有 Bootstrap、Semantic、UIkit、Foundation 等,輕量級有 Pure、Skeleton、Miligram 等。經常關注前端動態的工程師會發現輕量級框架每年都層出不窮。在我上面提到的主流輕量級框架之外還有很多類似的框架。我一直問自己,為什么要重復造輪子。經過研究,我發現這些輕量級框架其實大多都不能勝任工作需求,而且模仿的痕跡很重,基本上都或多或少的有 Bootstrap 的影子。那么這些輕量級框架有沒有意義呢?當然有。但是就我個人觀點,選擇輕量級框架反倒不如自己實現一個框架。因為大多輕量級框架就像是工作總結,是根據自己的業務需求實現的。所以大多不具有通用性。

          前端框架的對比主要以 Bootstrap、Semantic、UIkit 為主,因為我個人感覺這三個最具有代表性,而且設計風格各有特色。Foundation 也有很多大公司在用,但以我個人觀點,無論是框架的易用性還是設計風格,相比其它幾個框架稍遜一籌。

          其中 Bootstrap 和 Semantic 是面向對象的最好體現。

          我先說一下 Bootstrap 的優勢,不是設計風格,不是模塊,不是特效,而是柵格,響應式柵格。Bootstrap 的柵格在與其它框架對比中占有絕對優勢,無論是柵格的劃分還是類名的風格都堪稱經典。如果讀者有心看一下 Bootstrap 的 Less 源文件,就會感受到 Bootstrap 對于響應式柵格的獨具匠心。其實在 Bootstrap 之前也有很多柵格方案,但是給人的感覺就是不夠利索,類名繁瑣不好記。而后來的很多框架,尤其輕量級的框架大多都有 Bootstrap 的影子。

          下面我們通過對比幾個框架的柵格和按鈕來看一下類命名的策略。

          Bootstrap

          <div class="row">
            <div class="col-md-8"></div>
            <div class="col-md-4"></div>
          </div>
          
          <button class="btn btn-primary" type="submit">Button</button>

          Semantic

          <div class="ui grid">
            <div class="ten wide column"></div>
            <div class="six wide column"></div>
          </div>
          
          <button class="ui primary basic button">Primary</button>

          Foundation

          <div class="row">
            <div class="small-3 columns"></div>
            <div class="small-9 columns"></div>
          </div>
          
          <button type="button" class="primary button">Primary</button>

          UIkit

          <div class="uk-grid">
              <div class="uk-width-1-2"></div>
              <div class="uk-width-1-2"></div>
          </div>
          
          <button class="uk-button uk-button-primary" type="button">Primary</button>

          Pure

          <div class="pure-g">
              <div class="pure-u-1-2"></div>
              <div class="pure-u-1-2"></div>
          </div>
          
          <button class="pure-button pure-button-primary">A Primary Button</button>

          通過上面的對比,大家應該已經發現了這些框架的命名策略的不同。不可否認,Bootstrap 的命名最經典。

          之前在網上看到有人討論關于框架的易用性,有人說 Bootstrap 的類名太長,然而通過上面幾個框架的對比,Bootstrap 的類并不繁瑣,而且用預處理器編寫框架時嵌套會比較靈活。

          Semantic 的類名最簡潔,通過多個定語的修飾組成一句話,確實很有意思。但是過多的修飾類在編寫框架時會稍顯凌亂,有利有弊,因人而異吧。

          Foundation 的柵格應該是最豐富的,策略上類似 Bootstrap,只是對公共屬性進行了拆分,大家也可以看看其中的具體細節。

          UIkit 和 Pure 的策略相同,都加了前綴以區分其它框架,但是很顯然類名過于冗長了。我在編寫框架時也這樣想過,但是最終放棄了這種方式。


          關于 CSS 預處理器

          CSS 預處理器早已不是什么新鮮事,但是真正能夠在工作中運用的人有多少呢?熟練使用預處理器特性的人又有多少呢?

          我之前工作的時候也沒有用預處理器,因為不用,所以也意識不到預處理器的好處。主要是覺得麻煩,因為要使用編譯器編譯一下,還不如直接寫 CSS 方便。但是在項目維護的時候就意識到預處理器的好處。后來在幾個項目中嘗試了預處理器,但是對于模塊化的寫法不太明確。預處理器作為工具,可以實現模塊化編寫 CSS,那么應該如何劃分模塊?另外,預處理器有很多特性,但是大多數人剛開始只用到變量和嵌套,其它的特性幾乎很少用到。我相信在自己動手實現一個輕量級框架的過程中,我們可以對預處理器有一個全面的了解。

          目前流行的預處理器有 Less,Sass,Stylus 三個,選擇哪個完全是看自己的習慣。我最開始因為 Bootstrap 了解的 Less,但是因為習慣選擇了 Sass,其次 Sass 的功能要更全面一些。

          無論是工作還是自己寫項目,都要搭建一個項目環境,也就是安裝一系列的 npm 包。相比刀耕火種的開發方式,使用工具開發的前期準備過程稍顯麻煩,然而一旦環境建好,后期的開發將會游刃有余。

          Miligram 這個輕量級框架在 Github 上有很高人氣,但是說實話,用處并不大。不過這個框架的構建方式非常值得學習。雖然 CSS 對于很多人來說很簡單,但是真要去寫一個框架,還是非常棘手,這時候就需要借鑒一些優秀的框架。

          編寫框架大致會用到的 npm 如下:

          --autoprefixer
          --node-sass
          --npm-run-all
          --rimraf
          --onchange

          其實最主要的就是一個 node-sass,其它的都是輔助 CSS 文件的生成修改,大家感興趣的話可以去 npm 官網搜索這些插件,了解具體用法,如有不懂可以給我留言,我就不啰嗦了。


          編寫輕量級框架

          終于到了本篇文章的重頭戲。

          簡單介紹一下,我給自己編寫的框架取名 Snack,原意“快餐”,主要表達簡單之意。雖然是輕量級框架,但我并不想拿輕量級做為噱頭,畢竟體量輕意味著某些功能的缺失以及疏漏。這個框架的意義更多的是交流學習,我試圖借鑒其它框架的優秀之處,盡量簡化類名,以及嘗試探索一些更通用的組件。

          大多數的輕量級框架只是 CSS 框架,不涉及 JS 部分,主要用于網頁的布局。我之所以打算自己編寫框架,是因為工作中重復的東西太多,通過框架可以很好的將這些零散組件整合到一起。另一方面,寫個小項目,學點新知識是一件趣事。

          編寫框架是去年想做的事情,但因為時間原因,拖了很久。寫框架之初我曾陷入一個誤區,我打算設計一些比較前衛的樣式,立體的按鈕、浮動的面板等,比如下圖中的風格。

          https://dribbble.com/shots/524593-Soft-Interface-Black

          但是在斷斷續續編寫框架的過程中,我逐漸找到了方向,上圖的樣式只是一種皮膚,編寫框架之初不應該把重點放在這上面。當然,好的 UI 設計也是框架成功的一部分。


          模塊劃分

          編寫框架的第一步就是要確定框架應該包含哪些模塊。因為是輕量級框架,所以模塊肯定沒有重量級框架那么全面,只有核心的一些組件。通過比較一些輕量級框架以及工作總結,大致常用的模塊包括柵格、媒體、按鈕、排版、表單、表格、面板以及輔助工具。

          在常用的這幾個組件中,需要重點關注的是柵格、表單及面板,媒體組件也很重要,但是自由發揮的空間不大,我直接用了 Bootstrap 的媒體組件。


          命名策略

          首先是類命名的層次與結構。類命名一直是我比較糾結的地方,剛開始工作的時候為了起一個見名知意又簡潔的類名總是抓耳撓腮。我在編寫框架時盡量避免與 Bootstrap 的類名重疊,但也不能完全避免。對比其他框架會發現,這種情況不可避免的會出現,畢竟類名會有一定的規律性以及層次性。在這一點上我比較喜歡 Bootstrap 的風格。下面和 Bootstrap 的表單做一個對比。

          Bootstrap 的表單結構及類名

          --div.form-horizontal
            --div.form-group
              --label.control-label
              --input.form-control

          Snack 的表單結構及類名

          --div.form-horizontal
            --div.form-group
              --label.control-label
              --input.form-control

          這個表單結構整體而言還算不錯,只是個別地方需要修改。有一些框架不給 input 等元素起類名,而是給父元素一個類名,個人對這種做法表示疑問,不起類名會降低框架編寫及使用的靈活性。

          第二個策略是組件的修飾,比如按鈕及面板都存在多個語境(顏色、大小等),在這一點上我編寫框架時做了一些簡化,風格上有些 Semantic 的影子。

          <button class="btn primary">primary</button>
          <table class="table bordered striped">...</table>
          <div class="boxes primary">...</div>

          關于修飾類的策略是一個仁者見仁智者見智的問題,至于哪種方法更好,還需要在編寫框架的過程中摸索。


          柵格系統

          演示示例: https://nzbin.github.io/snack/#grid

          任何框架必須建立在柵格的基礎上才能靈活布局。我在前面提到了 Bootstrap 的精華就是柵格系統。柵格系統的編寫需要使用預處理器的循環功能,否則就要做無謂的重復勞動了。我遇到過一些輕量級框架是用 Less 編寫的,其柵格系統就沒有用循環,這樣的源碼稍顯唐突,可能是作者對 Less 的循環功能不熟,當然 Less 本身的循環比較弱,用起來有些別扭。關于預處理器的循環,可以參照我之前翻譯的《CSS 預處理器中的循環》,比較詳細地對比了三種流行預處理器的循環功能。簡單說一下,Less 沒有循環,但可以用遞歸實現,而 Sass 和 Stylus 有真循環。

          我編寫的柵格系統也是默認 12 列,但是后來發現 12 列的柵格缺少最常用的列寬(比如 10%、20%、30%等),比如下面 CodePen 展示的例子用 12 列柵格是無法完成的,所以我又添加了 10 列柵格,但仍然無法面面俱到,不過已經很靈活了。

          柵格的使用和 Bootstrap 是一樣的,除了 12 列柵格外,10 列柵格以及均分柵格都要添加 .cols- 類

          <!-- 默認 12 列柵格,所以省略 cols-12 -->
          <div class="row">
              <div class="col-5"></div>
              <div class="col-7"></div>
          </div>
          
          <!-- 10 列柵格 -->
          <div class="row cols-10">
              <div class="col-3"></div>
              <div class="col-7"></div>
          </div> 

          這個柵格并沒有響應式,只有一個斷點,小屏手機上的話所有柵格都會單行顯示。一方面,這樣的設計符合大多數輕量級框架的初衷;另一方面,我打算再寫一個針對移動端的框架,畢竟 Web 端和移動端的風格差距較大,按照業務需求分開會更好。不過最近我更改了源文件,為響應式預留了擴展方式。


          表單

          演示示例: https://nzbin.github.io/snack/#forms

          在上面的命名策略中已經展示了 Snack 表單的基本結構,基本表單除了結構之外,樣式上并沒有太多可以討論的地方。在此說一下表單中 checkbox 的結構調整,先看一下 Bootstrap 的 checkbox 結構。

          <!-- checkbox -->
          <div class="checkbox">
            <label>
              <input type="checkbox" value=""> checkbox
            </label>
          </div>
          
          <!-- checkbox-inline  -->
          <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox1" value="option1"> checkbox
          </label>

          以上兩種結構不能有偏差,稍有偏差樣式就會錯亂,靈活性較差。其次我在想兩種結構能不能整合在一起,增強靈活性。想了很久,找到了方法,Snack 結構如下:

          <!-- checkbox -->
          <div class="checkbox">
            <label>
              <input type="checkbox" value=""> checkbox
            </label>
          </div>
          
          <!-- checkbox-inline -->
          <div class="checkbox inline">
            <label>
              <input type="checkbox" value=""> checkbox
            </label>
          </div>

          也可以將樣式直接加到 label 標簽上。另外,如果將 input 移到 label 標簽外也是沒有問題的,如下:

          <!-- checkbox -->
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" value="">
            <label for="checkbox1">checkbox</label>
          </div>
          
          <!-- checkbox-inline -->
          <div class="checkbox inline">
            <input type="checkbox" id="inlineCheckbox1" value="">
            <label for="inlineCheckbox1">checkbox</label>
          </div>

          這種結構有一個好處,就是可以自定義 input 樣式,詳見下面的 CodePen 的 scss 文件。radio 的設置和 checkBox 是一樣的。


          輔助類

          輔助類是一系列類的組合,比如字號大小、顏色值、padding、margin 以及左右浮動等。在一些 Bootstrap 搭建的后臺管理系統中尤為常見,這樣布局起來就會比較靈活。以下是一個邊框的輔助類。

          .border-left-right {
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
          }
          .border-top-bottom {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
          }
          .border-left {
            border-left: 1px solid #eee;
          }
          .border-right {
            border-right: 1px solid #eee;
          }
          .border-top {
            border-top: 1px solid #eee;
          }
          .border-bottom {
            border-bottom: 1px solid #eee;
          }

          關于輔助類的更多內容可以閱讀這篇文章《如何編寫通用的 Helper Class


          盒組件

          演示示例: https://nzbin.github.io/snack/#boxes

          盒組件是我整個框架中比較滿意的一個模塊。之所以要做這個組件主要是覺得 Bootstrap 的 list 組件和 panel 組件可以整合到一起。當然,這樣的做法有利有弊。盒組件在后臺管理系統的布局中表現的尤為突出。其命名也是多種多樣,比如 panel、widget、portlet、ibox、card等,每個后臺管理系統框架都會對這個組件進行深度開發,可見其在布局上的重要性。給一個組件起一個合適的類名也很關鍵,想了很久,最后用了 box 的類名,當然一般情況下盡量不要用 box,因為這個類名比較寬泛。下面的 CodePen 模擬了 Bootstrap 的 list 及 panel 組件。


          主題

          給框架添加主題是一件有趣的事情。Snack 的默認主題是白色,因為喜歡黑色,最后添加了暗夜主題,編寫主題只需改變組件的顏色。演示文檔 的頁面用了暗夜主題,點擊上方的紅色按鈕可以切換主題。


          總結

          如果大家問我那個框架更好,我會毫不猶豫的選擇 Bootstrap。在工作中可以根據需求的難易進行框架選擇,如果業務比較重,最好根據 Bootstrap 進行二次開發;反之,可以選擇一些輕量級框架,最好還是根據自己的需求造輪子,如果大家愿意選擇或是借鑒我的框架,那會是我的榮幸。


          Github: https://github.com/nzbin/snack
          Demo:  https://nzbin.github.io/snack
          轉載來源:https://segmentfault.com/a/1190000012013908
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/119

          如何通過CSS向JS傳參?

          CSS中有很多媒體查詢的用法,例如設備尺寸判別,是否支持鼠標行為,是否是黑暗模式,是否是省電模式等。CSS可以自動檢測,但是有時候,在JS中,我們也需要根據不同的系統主題,然后實現不同的交互邏輯,或者渲染出不一樣的內容。

          Javascript可以控制css嗎?

          JavaScript可以直接控制css。JavaScript中可以直接設置style的屬性、改變class、設置cssText、創建引入新的css樣式文件等方法來控制css樣式。

          為什么 CSS 這么難?

          我同 CSS 打交道已經有幾年了,每當需要就會用到它。最近我想明白了一個問題,那就是為什么做好 CSS 樣式如此之難。如果你一直都在 CSS 中苦苦掙扎,你要知道自己并不是一個人。本文就是要告訴你為什么 CSS 這么難

          css常用代碼

          禁止div點擊;鼠標放置顯示“小手”手勢,并顯示提示文字;超出區域的文字顯示省略號;div+css控制圖片等比例縮放;設置元素在另一個元素的最底部;設置背景顏色,不透明度

          六種組織CSS的方式

          Ben Frain曾經說過,寫css代碼很容易,但是擴展和維護卻很難。本文就介紹了一套方案來解決這個問題。OOCSS 意為面向對象的CSS。這種方法有兩種主要 觀點:結構與設計分離,容器和內容分離

          不為人知的七個CSS知識點

          如果你在日常工作中使用CSS,那么你的主要目標很可能集中在使事情看起來是正確的。最終得到的正確結果遠比如何實現更重要。這意味著相比正確的語法和視覺效果我們更少關注CSS的實現原理。

          Web前端-CSS必備知識點

          css基本內容,類選擇符,id選擇符,偽類,偽元素,結構,繼承,特殊性,層疊,元素分類,顏色,長度,url,文本,字體,邊框,塊級元素,浮動元素,內聯元素,定位。

          css加載會造成阻塞嗎?

          js執行會阻塞DOM樹的解析和渲染,那么css加載會阻塞DOM樹的解析和渲染嗎?所以,接下來我就來對css加載對DOM樹的解析和渲染做一個測試。為了完成本次測試,先來科普一下,如何利用chrome來設置下載速度

          react中使用css的7種方式

          react中使用css的7種方式:在組件中直接使用style、在組件中引入[name].css文件、在組件中引入[name].scss文件、在組件中引入[name].module.css文件、在組件中引入 [name].module.scss文件、使用styled-components

          CSS 解析原理_你知道瀏覽器CSS是如何解析嗎?

          作為前端,我們每天都在與CSS打交道,那么CSS的原理是什么呢? 瀏覽器渲染過程分為了兩條主線:其一,HTML Parser 生成的 DOM 樹;其二,CSS Parser 生成的 Style Rules ;

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网