1. <em id="2qvri"><tr id="2qvri"></tr></em>
      1. 首頁»HTML/CSS»現代CSS進化史

        現代CSS進化史

        來源:繆斯的情人 發布時間:2018-04-09 閱讀次數:

          CSS一直被web開發者認為是最簡單也是最難的一門奇葩語言。它的入門確實非常簡單——你只需為元素定義好樣式屬性和值,看起來似乎需要做的工作也就這樣嘛!然而在一些大型工程中CSS的組織是一件復雜和凌亂的事情,你更改頁面上任意一個元素的一行CSS樣式都有可能影響到其他頁面上的元素。

          為了解決CSS錯綜復雜的繼承問題,開發者建立了各種不同的最佳實踐,問題是哪一個最佳實踐是最好的目前尚無定論,而且有些實踐相互之間是完全矛盾的。如果你第一次嘗試學習CSS,這對于你來說是相當迷惑的。

          這篇文章的目的是通過回顧CSS的歷史背景,介紹下時至2018年的今天CSS發展過程中的一些設計模式和工具的演變。通過對這些背景的理解,你將會更輕松的理解每個設計思想并且學以致用。接下來讓我們開始吧!

         CSS基本樣式使用

          我們從一個最簡單的網頁index.html 開始,這個文件中包含一個獨立的樣式文件index.css:

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Modern CSS</title>
          <link rel="stylesheet" href="index.css">
        </head>
        <body>
          <header>This is the header.</header>
          <main>
            <h1>This is the main content.</h1>
            <p>...</p>
          </main>
          <nav>
            <h4>This is the navigation section.</h4>
            <p>...</p>
          </nav>
          <aside>
            <h4>This is an aside section.</h4>
            <p>...</p>
          </aside>
          <footer>This is the footer.</footer>
        </body>
        </html>
        

          上面的HTML標簽中沒用使用任何class或者id。

          在沒有任何CSS樣式的情況下,我們的網站看起來是這個樣子:


        點擊查看在線demo

          功能可用,但看起來不好看,我們可以繼續在index.css加點CSS美化下排版:

        /* BASIC TYPOGRAPHY                       */
        /* from https://github.com/oxalorg/sakura */
        html {
          font-size: 62.5%;
          font-family: serif;
        }
        body {
          font-size: 1.8rem;
          line-height: 1.618;
          max-width: 38em;
          margin: auto;
          color: #4a4a4a;
          background-color: #f9f9f9;
          padding: 13px;
        }
        @media (max-width: 684px) {
          body {
            font-size: 1.53rem;
          }
        }
        @media (max-width: 382px) {
          body {
            font-size: 1.35rem;
          }
        }
        h1, h2, h3, h4, h5, h6 {
          line-height: 1.1;
          font-family: Verdana, Geneva, sans-serif;
          font-weight: 700;
          overflow-wrap: break-word;
          word-wrap: break-word;
          -ms-word-break: break-all;
          word-break: break-word;
          -ms-hyphens: auto;
          -moz-hyphens: auto;
          -webkit-hyphens: auto;
          hyphens: auto;
        }
        h1 {
          font-size: 2.35em;
        }
        h2 {
          font-size: 2em;
        }
        h3 {
          font-size: 1.75em;
        }
        h4 {
          font-size: 1.5em;
        }
        h5 {
          font-size: 1.25em;
        }
        h6 {
          font-size: 1em;
        }
        

          這地方大部分都是關于排版(字體、行高等)樣式的定義,也包含一些顏色和一個layout居中設置。為了讓每個屬性有個合理的值你需要學習點設計理論,但是這個地方我們用到的CSS本身并不復雜,你可以直接定義,結果如下所示:


        Click here to see a live example

          有所變化了吧!正如CSS許諾的一樣——用一種簡單的方式給文檔添加上樣式,不需要編程或者復雜的業務邏輯。不幸的是,實際情況會復雜的很多,我們不單單使用的是CSS的排版和顏色這種簡單的樣式定義。

         CSS的布局使用

          在20世紀90年代,CSS還未廣泛普及之前,對于頁面的布局沒有太多的選擇。HTML最初是被設計為創建純文本的一門語言,并不是包含側邊欄、列等布局的動態頁面。早期的時候,頁面布局通常使用的是HTML表格,在行和列中組織內容,這種方式雖然有效,但是把內容和表現雜糅在一塊了,如果你想改變網頁的布局就得需要修改大量的HTML代碼。

          CSS的出現推動了內容(寫在HTML中)和表現(寫在CSS中)的分離,人們開始把所有的布局代碼從HTML中移除放入到CSS中,需要注意的是,和HTML一樣CSS的設計也不是用來做網頁內容布局的,所以早期的時候試圖解決這種分離設計是很困難的。

          我們來用個實際例子來看下如何實現布局,在我們定義CSS布局前先重置下padding和margin(會影響布局的計算),不同的區域我們定義不同的顏色(不要太在意好看不好看只要不同區域間足夠醒目就可以)

        /* RESET LAYOUT AND ADD COLORS */
        body {
          margin: 0;
          padding: 0;
          max-width: inherit;
          background: #fff;
          color: #4a4a4a;
        }
        header, footer {
          font-size: large;
          text-align: center;
          padding: 0.3em 0;
          background-color: #4a4a4a;
          color: #f9f9f9;
        }
        nav {
          background: #eee;
        }
        main {
          background: #f9f9f9;
        }
        aside {
          background: #eee;
        }
        

          現在頁面應該看起來如下:


        Click here to see a live example

          接下來我們用CSS來布局下頁面內容,我們將按照時間順序采用三種不同的方式,先從最經典的浮動布局開始吧。

          基于浮動的布局

          CSS浮動屬性最初是為了將圖片浮動在一列文本的左側或者右側(報紙上經常看到)。早在21世紀初,web開發者將這個屬性的優勢擴展到了任意的元素,這意味著你可以通過div的內容浮動創建出行和列的錯覺。同樣,浮動也不是基于這樣的目的設計的,所以兼容性上會有很多問題。

          2006年,A List Apart上發表了一篇熱門文章In Search of the Holy Grail,文章概述了實現圣杯布局的詳細方法——一個頭部、三列內容和一個底部,你一定覺得一個簡單的布局被稱為圣杯布局很瘋狂吧,但是在當時純CSS的時代這的確很難實現。

          下面是一個基于浮動布局的例子,用到了我們文章中提到的一些技術點:

        /* FLOAT-BASED LAYOUT */
        body {
          padding-left: 200px;
          padding-right: 190px;
          min-width: 240px;
        }
        header, footer {
          margin-left: -200px;
          margin-right: -190px;   
        }
        main, nav, aside {
          position: relative;
          float: left;
        }
        main {
          padding: 0 20px;
          width: 100%;
        }
        nav {
          width: 180px;
          padding: 0 10px;
          right: 240px;
          margin-left: -100%;
        }
        aside {
          width: 130px;
          padding: 0 10px;
          margin-right: -100%;
        }
        footer {
          clear: both;
        }
        * html nav {
          left: 150px;
        }
        

          仔細看下CSS代碼,這里面為了讓它工作包含一些必須的hack方式(負邊距、clear: both、硬編碼的寬度計算等),稍后我們會對這些細節做詳細的解釋。最終的結果如下:


        Click here to see a live example

          看起來不錯了,但是通過三列的顏色可以看出來他們的高度不一樣,頁面的高度也沒有填充滿屏幕。這些問題是浮動布局導致的,所有的浮動只是將內容放在某一區塊的左邊或者右邊,但是沒法知道其他區塊的高度。這個問題一直沒有個好的解決方案,直到Flexbox布局的出現。

          基于Flexbox的布局

          flexbox CSS屬性實在2009年第一次提出來的,但直到2015年才得到瀏覽器的廣泛支持。Flexbox被設計為定義一個空間在行或者列上如何分布的,這讓它比浮動更適合用來做布局,這意味在使用浮動布局十多年后,web開發者終于不再使用帶有hack的浮動布局方式了。

          下面是一個基于Flexbox布局的例子。注意為了讓flexbox生效我們需要在三列的外面額外包裝一個div:

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Modern CSS</title>
          <link rel="stylesheet" href="index.css">
        </head>
        <body>
          <header>This is the header.</header>
          <div class="container">
            <main>
              <h1>This is the main content.</h1>
              <p>...</p>
            </main>
            <nav>
              <h4>This is the navigation section.</h4>
              <p>...</p>
            </nav>
            <aside>
              <h4>This is an aside section.</h4>
              <p>...</p>
            </aside>
          </div>
          <footer>This is the footer.</footer>
        </body>
        </html>
        

          下面是flexbox布局的CSS代碼:

        /* FLEXBOX-BASED LAYOUT */
        body {
          min-height: 100vh;
          display: flex;
          flex-direction: column;
        }
        .container {
          display: flex;
          flex: 1;
        }
        main {
          flex: 1;
          padding: 0 20px;
        }
        nav {
          flex: 0 0 180px;
          padding: 0 10px;
          order: -1;
        }
        aside {
          flex: 0 0 130px;
          padding: 0 10px;
        }
        

          這種方式和浮動布局相比更加緊湊了,雖然flexbox一些屬性和值初看起來有些困惑,但是好歹不需要像浮動布局那樣負邊距的hack方案了,這是個巨大的進步。最終結果如下:


        Click here for a live example

          效果好多了!所有的列高度都相同,并且占據了整個頁面的高度。從某種意義上來說這似乎是完美的了,但是這個方式也有些小問題,其中一個就是瀏覽器的兼容性——主流的現代瀏覽器都支持flexbox,但是一些舊的瀏覽器不兼容。幸運的是瀏覽器廠商也正在盡最大努力終止對舊版本瀏覽器的支持,為web開發者提供更一致的開發體驗。另一個問題是我們需要<div class="container">包裹HTML內容標簽,如果能避免會更完美。理想狀態下,任何CSS布局都不需要改變HTML標簽的。

          最大的缺點是CSS代碼本身——flexbox雖然去掉了浮動的Hack,但是代碼的可讀性上變得更差了。你很難去理解flexbox的CSS,并且不知道頁面上是如何去布局所有元素的。在寫flexbox布局代碼的時,有很多時候靠的是大量的猜測和嘗試。

          特別需要注意的是,flexbox被設計用來在單行或者單列中分割元素的——它不是設計用來給整個頁面做布局的!盡管它能很好的實現(相對于浮動布局好很多)。另一種不同的規范是用來處理多行或者多列布局的,我們稱之為CSS 網格。

          基于Grid的布局

          CSS網格最早在2011年提出的(比flexbox提案晚不了多久),但是花了好長時間才在瀏覽器上普及起來。截止2018年初,大多數現代瀏覽器都已經支持CSS grid(這比一兩年前有巨大的進步了)

          下面我們看一下基于網格布局的例子,注意在這個例子中我們擺脫了flexbox布局中必須使用<div class="container">的限制,我們可以簡單的使用原始的HTML,先看下CSS文件:

        /* GRID-BASED LAYOUT */
        body {
          display: grid;
          min-height: 100vh;
          grid-template-columns: 200px 1fr 150px;
          grid-template-rows: min-content 1fr min-content;
        }
        header {
          grid-row: 1;
          grid-column: 1 / 4;
        }
        nav {
          grid-row: 2;
          grid-column: 1 / 2;
          padding: 0 10px;
        }
        main {
          grid-row: 2;
          grid-column: 2 / 3;
          padding: 0 20px;
        }
        aside {
          grid-row: 2;
          grid-column: 3 / 4;
          padding: 0 10px;
        }
        footer {
          grid-row: 3;
          grid-column: 1 / 4;
        }
        

          雖然結果看起來和基于flexbox的布局一樣,但是CSS在很大程度上得到了改進,它清晰地表達出了期望的布局方式。行和列的大小和形狀在body選擇器中定義,每一項item直接通過他們所在行和列的位置定義。

          grid-column 這個屬性你可能覺得不太好理解,它定義了列的起點和終點。這個地方讓你覺得困惑的可能是明明有3列,卻為什么定義的范圍是1到4,通過下面的圖片你就能理解了:


        Click here to see a live example

          第一列是從1到2,第二列是從2到3,第三列從3到4,所以頭部的grid-column是從1到4占據整個頁面,導航的grid-column是從1到2占據第一列等等

          一旦你習慣了grid語法,你會覺得它是一種非常理想的CSS布局方式。唯一缺點就是瀏覽器支持,幸運的是過去一年中瀏覽器的支持又得到了進一步的提高。作為專為CSS設計的第一款真正的布局工具很難描繪它的重要性,從某種意義上來說,由于現有的工具需要太多的hack和變通方式去實現,因此web設計者過去對于布局的創意上一直很保守,CSS網格的出現有可能會激發出一批從未有過的創意布局設計——想想還是挺激動人心的!

         使用CSS預處理器擴展CSS語法

          到目前為止,我們介紹了CSS的基本樣式和布局,現在我們再來看下那些幫助CSS提升語言本身體驗的工具,先從CSS預處理器開始吧。

          CSS預處理器允許你使用不同的語言來定義樣式,最終會幫你轉換為瀏覽器可以解釋的CSS,這一點在當今瀏覽器對新特性支持緩慢的情況下很有價值。第一個主流的CSS預處理器是2006年發布的Sass,它提供了一個新的更簡潔的語法(縮進代替大括號,沒有分號等等),同時增加了一些CSS缺失的高級特性,像變量、工具方法還有計算。下面我們使用Sass變量實現下前面例子中帶顏色的區域定義:

        $dark-color: #4a4a4a
        $light-color: #f9f9f9
        $side-color: #eee
        body
          color: $dark-color
          
        header, footer
          background-color: $dark-color
          color: $light-color
          
        main
          background: $light-color
        nav, aside
          background: $side-color
        

          注意我們用$定義了可復用的變量,省略了大括號和分號,語法看起來更加清晰了。簡潔的語法讓Sass看起來很棒,但變量這樣的特性出現在當時來說意義更大,這為編寫整潔可維護的CSS代碼開辟了新的可能性。

          使用Sass你需要安裝Ruby(Ruby),這門語言主要是讓Sass編譯成正常的CSS,同時你需要安裝Sass gem,之后你就可以通過命令行把你的.sass文件轉成.css文件了,我們先看一個使用命令行的例子:

        sass --watch index.sass index.css
        

          這個命令定期把index.sass中的Sass代碼轉為CSS寫入到index.css文件中(--watch參數設定后會實時監聽.sass文件改動并執行編譯,非常方便)

          這個過程被稱為構建步驟。這在2006年的時候是非常大的一個障礙,如果你對Ruby這樣的編程語言熟悉的話,這個過程非常簡單。但是當時很多前端開發者只用HTML和CSS,他們不需要類似這樣的工具。因此,為了使用CSS預編譯的功能而讓一個人學習整個生態系統是很大的一個要求了。

          2009年的時候,Less CSS預編譯器發布。它也是Ruby寫的,并且提供了類似于Sass的功能,關鍵不同點是它的語法設計上更接近CSS。這意味著任何CSS代碼都是合法的Less代碼,同樣我們看一個用Less語法的例子:

        @dark-color: #4a4a4a;
        @light-color: #f9f9f9;
        @side-color: #eee;
        body {
          color: @dark-color;
        }
          
        header, footer {
          background-color: @dark-color;
          color: @light-color;
        }
          
        main {
          background: @light-color;
        }
        nav, aside {
          background: @side-color;
        }
        

          語法上幾乎是相同的(變量的定義使用@替代了$),但是Less和CSS一樣帶有大括號和分號,沒有Sass例子的代碼看起來漂亮。然而,和CSS相近的特性反而讓開發者更容易接受它,在2012年,Less使用了JavaScript(Node.js)重寫了替換了Ruby,性能上比Ruby編譯更快了,并且很多在工作中使用了Node.js的人更容易上手了。

          把這段代碼轉化為標準的CSS,你需要安裝Node.jsLess,執行的命令行如下:

        lessc index.less index.css
        

          這個命令把index.less文件中的Lessz代碼轉化為標準的CSS代碼寫入到index.css文件中,注意lessc命令不能監聽文件的變化(和sass不一樣),這意味著你需要安裝其他自動監聽和編譯的組件來實現該功能,增加了流程的復雜性。同樣,對于程序員來說使用命令行的方式并不難,但是對于其他只想使用CSS預編譯器的人來說還是個非常大的障礙。

          汲取了Less的經驗,Sass開發者在2010年發布了一個新的語法叫SCSS(與Less類似的一個CSS超集),同時發布了LibSass,一個基于C++擴展的Ruby引擎,讓編譯更快并且適配于多種語言。

          另外一個CSS預處理器是2010年發布的Stylus,使用Node.js編寫,和Sass或者Less相比更注重于清晰的語法。通常主流的CSS預編譯器就這三種(Sass,Less,Stylus),他們在功能方面非常相似,所以你不必擔心選擇哪一個會是錯誤的。

          然而,有些人認為使用CSS預處理器開始變得越來越沒必要,因為瀏覽器最終會慢慢實現這些功能(像變量和計算)。此外,還有一種稱為CSS后處理器的方法,有可能會讓CSS預處理器過時(顯然這存在些爭議),我們在后面會詳細介紹下。

         使用CSS后處理器的轉換功能

          CSS后處理器使用JavaScript分析并轉換你的CSS為合法CSS,從這方面來看和CSS預處理器很相似,你可以認為是解決同一個問題的不同方式。關鍵的不同點是CSS預處理器使用特殊的語法來標記需要轉換的地方,而CSS后處理器可以解析轉換標準的CSS,并不需要任何特殊的語法。舉一個例子來說明下,我們用最初定義的header標簽樣式來看一下吧:

        h1, h2, h3, h4, h5, h6 {
          **-ms-hyphens: auto;
          -moz-hyphens: auto;
          -webkit-hyphens: auto;**
          hyphens: auto;
        }
        

          粗體部分的屬性成為廠商前綴,廠商前綴是瀏覽器廠商對CSS新功能的實驗和測試使用的,在正式實現前提供給開發者使用CSS新屬性的一種方式。-ms代表IE瀏覽器,-moz是火狐瀏覽器,-webkit是基于webkit內核的瀏覽器。

          定義這些不同瀏覽器廠商的前綴屬性是非常煩人的,盡量使用生成工具自動添加廠商前綴。我們可以使用CSS預處理器來完成這個功能,例如,我們可以用SCSS來實現:

        @mixin hyphens($value) {
          -ms-hyphens: $value;
          -moz-hyphens: $value;
          -webkit-hyphens: $value;
          hyphens: $value;
        }
        h1, h2, h3, h4, h5, h6 {
          @include hyphens(auto);
        }
        

          這個地方使用了Sass的 mixin 功能,你可以定義一個CSS代碼塊然后在其他任何地方重用,當這個文件被編譯成標準的CSS的時候,所有的@include語句都被替換成與之匹配的@mixin中的CSS。總體來說,這個解決方案也不差,但是你仍然要為每個需要廠商前綴的的CSS屬性定義一個mixin,這些mixin的定義將需要不斷的維護,比如當瀏覽器支持了某個CSS屬性后你就要在你的定義中移除掉該屬性。

          比起寫mixin的方式,直接正常寫CSS然后由工具自動識別添加需要廠商前綴的屬性的方式顯然更優雅些。CSS后處理器就恰好能完成這樣的功能。比如,如果你使用 PostCSSautoprefixer 插件,你就可以直接寫正常的CSS并不需要指定瀏覽器廠商前綴,剩下的工作全交給后置處理器去處理:

        h1, h2, h3, h4, h5, h6 {
          hyphens: auto;
        }
        

          當你使用CSS后處理器運行這段代碼的時候hyphens: auto; 將被替換成包含所有瀏覽器廠商前綴的屬性,這意味著你可以正常寫CSS不用擔心各種瀏覽器兼容性問題,豈不是很棒!

          除了PostCSS的autoprefixer插件還有很多有意思的插件,cssnext 插件可以讓你體驗下一些實驗性質的CSS新功能,CSS modules 可以自動改變class的名字避免名稱沖突,stylelint 能檢查出你CSS代碼中一些定義錯誤和不符合規范的寫法。這些工具在過去一兩年里開始流行起來,給開發者提供了從未有過的工程化流程。

          然而,進程的發展總是有代價的,安裝和使用CSS后處理比CSS預處理器更復雜。你不僅要安裝、執行命令行,還需要安裝配置各個插件并且定義好各種復雜的規則(比如你的目標瀏覽器等)。很多開發者不再直接使用命令行運行PostCSS了,而是通過配置一些構建系統,像GruntGulpwebpack,他們可以幫助你管理前端開發工作中需要的各種構建工具。

          值得注意的是對于CSS后處理器存在些爭議,有人認為這個術語有些讓人迷惑(一種說法是建議都應該叫CSS預處理器,還有一種說法是應該都簡稱CSS處理器,等等),有人認為有了CSS后處理器完全可以不需要CSS預處理器,有人則主張兩者一起使用。不管怎么說,去了解下CSS后處理器的使用還是非常值得的。

         使用CSS設計模式

          CSS預處理器和CSS后處理器讓CSS開發體驗有了巨大的提升,但是單靠這些工具還不足以解決維護大型項目CSS代碼的問題。為了解決這個問題,人們編寫了一些關于如何寫CSS的指導方針,通常被稱為CSS規范。

          在我們深入分析CSS規范前,首先要搞清楚是什么讓CSS隨著時間推移變得更加難維護,關鍵點是CSS是全局性的——你定義的每個樣式都會全局應用到頁面的每個部分,用一個命名約定來保證class名稱的唯一性或者有特殊的規則來決定指定樣式應用到指定元素。CSS規范提供了一個有組織性的方式來避免大量代碼時出現的這些問題,讓我們按照時間順序來看看主流的一些規范吧

          OOCSS

          OOCSS(面向對象的CSS)是在2009年首次提出的,它是圍繞兩個原則建立的規范。第一個原則是結構和樣式分離,這意味著定義結構(布局)的CSS不應該和定義樣式(顏色、字體等)的CSS混雜在一起,這樣我們就可以很簡單的為一個應用定義新的皮膚了;第二個原則是容器和內容分離,把元素看成是一個可重用的對象,關鍵核心點是一個對象不管用在頁面的任何位置都應該看起來是相同的。

          OOCSS提供了成熟的指導規范,但是對于具體的執行規范并沒有明確指出。后來出現的SMACSS采用了它的核心概念,并且添加了更多的細節,使用起來更簡單了。

          SMACSS

          SMACSS(可擴展模塊化架構的CSS)是在2011年出現的一種設計模式,它將CSS分為5個不同的類別——基本規范、布局規范、模塊、狀態規范和樣式規范。SMACSS也有一些推薦的命名規則,對于布局規范使用l- 或者layout- 作為前綴;對于狀態規范,使用is-hidden 或者is-collapsed 作為前綴。

          相比OOCSS,SMACSS有了更多細節上的規范,但是CSS規則該劃分為哪一類別的規范中,這是個需要仔細考慮的問題。后來出現的BEM對這一方面進行了改進,讓它更易使用了。

          BEM

          BEM (塊, 元素, 修飾符)是在2010年出現的規范,它的思想主要是圍繞把用戶界面切分成獨立的塊。塊是一個可重用的組件(舉個例子像表單搜索,可以這樣定義<form class="search-form"></form>),元素是塊的一部分不能單獨重用(比如表單搜索中的button,<button class="search-form__button">Search</button>),修飾符是定義了塊或者元素外觀、狀態或者行為的實體(比如禁用搜索按鈕,定義為<button class="search-form__button search-form__button--disabled">Search</button>)。

          BEM的規范很容易理解,對于新手來說命名規則上也很友好,缺點就是可能會導致class名字非常長,并且沒有遵循傳統的命名規范。后來出現的Atomic CSS又把這個非傳統方式帶到了一個新的高度。

          Atomic CSS

          Atomic CSS (也稱為 功能性CSS)是2014年出現的一個規范,它的思想是基于可視化的方法創建小而功能單一化的class。這種規范與OOCSS、SMACSS和BEM完全相反——它并不是把頁面上的元素看做是可重用的對象,Atomic CSS忽略掉了這些對象,每一個元素使用了可重用的單一功能的class樣式集合。因此像<button class="search-form__button">Search</button> 就被替換成這樣的寫法了<button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">Search</button>

          如果你看到這個例子第一反應是被嚇的退縮了,沒關系你并不是唯一有這想法的人——很多人認為這種方式完全違背了CSS的最佳實踐,但是,關于這個有爭議的規范在不同場景下的應用也產出了一系列精彩的討論。這篇文章很清晰的分析了傳統的分離思想是CSS依賴于HTML創建(即使使用像BEM這類的規范),而Atomic的方式是HTML依賴于CSS創建,兩者都沒錯,但是仔細想想你會發現CSS和HTML徹底分離的想法是實現不了的。

          其他的CSS設計模式,像CSS in JS其實也包含了CSS和HTML相互依賴的思想,這也成為了一個飽受爭議的設計規范之一。

          CSS in JS

          CSS in JS 是2014年推出的一種設計模式,它的核心思想是把CSS直接寫到各自組件中,而不是單獨的樣式文件里。這種方式在React框架中引入的,最早是使用內聯樣式,后來又進化成了使用JavaScript生成CSS然后插入到頁面的style標簽中的方式。

          CSS in JS再一次違背了CSS中關于分離的最佳實踐,主要原因是web隨著時間推移發生了很大的變化。最初web大部分都是靜態網站——這種情況下HTML內容和CSS表現分離是很有意義的,但現在大部分應用都是動態web構建——這種情況下可重用的組件更加有意義了。

          CSS in JS設計的目標是定義邊界清晰包含自己HTML/CSS/JS的獨立組件,并且不受其他組件的影響。React是最早采用這種思想的框架,后續也影響到了其他框架像Angular、Ember和Vue.js。需要注意的是CSS in JS的模式相對來說比較新的,開發人員正在不斷的嘗試開發web應用組件時的一些CSS最佳實踐。

          五花八門的設計模式很容易讓你不知所措,最重要的記住一點——沒有銀彈。

         結論

          簡而言之這就是現代CSS。我們介紹了CSS基本排版樣式,浮動布局、flexbox和grid布局,了解了CSS預處理器為CSS提供的新語法,比如變量和mixins,還了解了CSS后處理器的轉換功能,像給CSS添加廠商前綴,并且使用CSS的一些設計模式克服了全局CSS的一些問題。在這里我們沒有時間去挖掘更多CSS其他功能了,CSS覆蓋面太廣了——任何一個說它簡單的人可能只是對它一知半解吧!

          現代CSS的多變和快速發展多少讓人感到有些沮喪,但是重要的是要記住web隨著時間推移進化的歷史背景,并且有一群聰明的人愿意為CSS向更好的方向的進化去創建一些工具和指導規范。作為一名開發者是一件幸運的事情,我希望這篇文章提供的信息能作為一個路線圖幫助你更好的暢行在CSS路程中!

        英文原文:https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525

        QQ群:WEB開發者官方群(515171538),驗證消息:10000
        微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
        提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
        CSS
        網友評論(共0條評論) 正在載入評論......
        理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
        登錄會員中心
        江苏快3投注技巧