<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-20閱讀:?1111標簽:?css作者:?轉載

          前言

          提高網站整體加載速度的一個重要手段就是提高代碼文件的網絡傳輸速度。之前提到過,所有的代碼文件都應該是經過壓縮了的,這可提高網絡傳輸速度,提高性能。除了壓縮代碼之外,精簡代碼也是一種減小代碼文件大小的手段。以下將討論CSS代碼相關的代碼精簡方案。


          定義簡潔的CSS規則

          CSS的每條規則中都包含了規則的屬性及屬性值。定義簡潔的CSS規則主要是指合并相關規則和定義簡潔的屬性值。

          1. 合并相關CSS規則

          CSS中的某些樣式是由多個規則組成的,比如字體樣式,就包含:font-family、font-style、font-size、font-variant、font-weight及line-height。如下是使用這些規則定義一個元素的字體樣式:

          p.reader-title {
          font-family: Georgia, serif;
              font-size: 12px;
              font-style: italic;
              font-weight: bold;
              line-height: 30px;
          }    
          

          其實,這些字體相關的樣式規則可以合并為一個樣式規則,即font樣式。如下是合并后的樣式:

          p.reader-title {
              font:italic bold 12px/30px Georgia, serif;
          }
          

          合并后的樣式更簡潔,代碼量縮減了很多。類似的樣式還有:background、border、margin、padding、text、list-style、transform、transition、animation等。可以在CSS規范中查看各樣式對應的子規則。

          2. 定義簡潔的屬性值

          在CSS樣式中,有些屬性值可以使用更簡潔的方式來展示,比如顏色和尺寸:

          p.reader-title {
              color: #FFFFFF;
              font-size: 0.8em;
              padding: 0em;
          }
          

          顏色值#FF33EE可以簡化為#F3E,尺寸值0.8em可以省略小數點之前的0,即簡化為.8em。如果尺寸值為0,則可以省略單位。經過簡化后,上面的樣式定義即為:

          p.reader-title {
              color: #F3E;
              font-size: .8em;
              padding: 0;
          }
          


          合并相同的定義

          很多時候在CSS代碼中,定義的規則會有相同的部分。可以合并這些相同的樣式定義,達到代碼重用和縮減代碼的目的。比如如下的CSS代碼:

          .library-title {
              text-align: center;
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #FFF;
              font-size: 1.2em;
              line-height: 2em;
          }
          .search-title {
              text-align: center;
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #FFF;
              font-size: 1.4em;
              line-height: 2.5em;
          }
          

          以上的代碼中,定義了兩個CSS規則,這兩個規則中大部分的定義是相同的,在這種情況下,即可合并定義這些相同部分,優化后的代碼如下:

          .library-title,.search-title {
              text-align: center;
              font-weight: 700;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #FFF;
          }
          .library-title {
              font-size: 1.2em;
              line-height: 2em;
          }
          .search-title {
              font-size: 1.4em;
              line-height: 2.5em;
          }
          

          在CSS中,有些屬性是可以繼承的,比如color、font、line-height、list-style、text-align、text-indent、text-transform 等。如果某個父元素的多個子元素上設置了相同的可繼承屬性定義,則可以把相同的定義合并,且設置在父元素上。在網頁設計中常見的問題是在CSS代碼中字體設置混亂,并且會重復設置相同的字體。一般情況下,同一個網頁中會有一個主要的字體,只需要把這個主字體設置在網頁的body標簽上即可。個別子元素的字體和主字體不同,則單獨定義即可覆蓋主字體。


          刪除無效的定義

          CSS代碼中的無效定義,并不會影響頁面的功能展示,但會影響頁面展示的性能。無效的定義在增加代碼量的同時,也增加了瀏覽器對樣式的解析時間,瀏覽器會根據CSS樣式構建樣式樹,樣式樹中當然也包括了無效的樣式。

          無效的定義包括無效的規則及無效的樣式屬性。無效的規則一般是在開發過程中引入的,比如,在開發過程中,失效的CSS規則并沒有得到及時的刪除,而從直觀上無法判斷某個CSS規則是否已經失效,這應該也是CSS規則沒有被刪除的原因之一。對于這種情況,可以使用工具來進行查找,比如,用Chrome瀏覽器自帶的開發工具就可以查找CSS代碼中的無效樣式,如下圖所示。


          圖 使用Chrome瀏覽器自帶的開發工具查找無效樣式規則的結果圖

          當然,查找的結果只能作為參考,因為很多時候CSS規則對應的模塊并沒有加載,或者有些元素上的CSS類是通過JavaScript代碼動態設置的,這需要在刪除規則時仔細考慮。

          無效的樣式屬性指的是設置的樣式并沒有起作用。比如設置內邊距為負值等,以及一些因手誤引起的屬性值拼寫錯誤等。如下是一些常見的無效樣式屬性:

          .invalid-css {
              padding-top:-20px;/* 無效的屬性值 */
              border: 1px soild #DDD;/* 拼寫錯誤 */
          }
          

          同樣,使用Chrome自帶的開發工具可以檢測無效的屬性定義,下圖是使用此工具的一個檢測結果。


          圖 使用Chrome瀏覽器自帶的開發工具查找無效樣式屬性及屬性值的結果圖

          使用此工具需要注意的是,工具檢測時列出了Chrome無法識別的CSS屬性或者選擇器,某些屬性或者選擇器是為其他瀏覽器添加的,并不是真正的無效定義,比如以上圖中的選擇器input:-ms-input-placeholder等。


          站長推薦

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

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

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

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

          如何通過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

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

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