自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

2021 年你需要知道的 CSS 工程化技術(shù)

作者：一只圖雀
開(kāi)發(fā) 前端
最近業(yè)務(wù)調(diào)整，組內(nèi)開(kāi)啟了前端工程化方面的基建，我主要負(fù)責(zé) CSS 技術(shù)選型這一塊，針對(duì)目前業(yè)界主流的幾套方案進(jìn)行了比較完善的調(diào)研與比較，分享給大家。

[[435182]]

大家好，我是皮湯。最近業(yè)務(wù)調(diào)整，組內(nèi)開(kāi)啟了前端工程化方面的基建，我主要負(fù)責(zé) CSS 技術(shù)選型這一塊，針對(duì)目前業(yè)界主流的幾套方案進(jìn)行了比較完善的調(diào)研與比較，分享給大家。

目前整個(gè) CSS 工具鏈、工程化領(lǐng)域的主要方案如下：

而我們技術(shù)選型的標(biāo)準(zhǔn)如下：

  • 開(kāi)發(fā)速度快
  • 開(kāi)發(fā)體驗(yàn)友好
  • 調(diào)試體驗(yàn)友好
  • 可維護(hù)性友好
  • 擴(kuò)展性友好
  • 可協(xié)作性友好
  • 體積小
  • 有最佳實(shí)踐指導(dǎo)

目前主要需要對(duì)比的三套方案：

  • Less/Sass + PostCSS 的純 CSS c側(cè)方案
  • styled-components / emotion 的純 CSS-in-JS 側(cè)方案
  • TailwindCSS 的以寫(xiě)輔助類為主的 HTML 側(cè)方案

純 CSS 側(cè)方案

介紹與優(yōu)點(diǎn)

  • 維護(hù)狀態(tài)：一般
  • Star 數(shù)：16.7K
  • 支持框架：無(wú)框架限制
  • 項(xiàng)目地址：https://github.com/less/less.js

Less/Sass + PostCSS 這種方案在目前主流的組件庫(kù)和企業(yè)級(jí)項(xiàng)目中使用很廣，如 ant-design 等

它們的主要作用如下：

  • 為 CSS 添加了類似 JS 的特性，你也可以使用變量、mixin，寫(xiě)判斷等
  • 引入了模塊化的概念，可以在一個(gè) less 文件中導(dǎo)入另外一個(gè) less 文件進(jìn)行使用
  • 兼容標(biāo)準(zhǔn)，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等

這類工具能夠與主流的工程化工具一起使用，如 Webpack，提供對(duì)應(yīng)的 loader 如 sass-loader，然后就可以在 React/Vue 項(xiàng)目中建 .scss 文件，寫(xiě) sass 語(yǔ)法，并導(dǎo)入到 React 組件中生效。

比如我寫(xiě)一個(gè)組件在響應(yīng)式各個(gè)斷點(diǎn)下的展示情況的 sass 代碼：

  1. .component { 
  2.  
  3.   width: 300px; 
  4.  
  5.   @media (min-width: 768px) { 
  6.  
  7.     width: 600px; 
  8.  
  9.     @media  (min-resolution: 192dpi) { 
  10.  
  11.       background-image: url(/img/retina2x.png); 
  12.  
  13.     } 
  14.  
  15.   } 
  16.  
  17.   @media (min-width: 1280px) { 
  18.  
  19.     width: 800px; 
  20.  
  21.   } 
  22.  
  23. } 

或?qū)胍恍┯糜跇?biāo)準(zhǔn)化瀏覽器差異的代碼：

  1. @import "normalize.css";  
  2.  
  3.  
  4.  
  5. // component 相關(guān)的其他代碼 

不足

這類方案的一個(gè)主要問(wèn)題就是，只是對(duì) CSS 本身進(jìn)行了增強(qiáng)，但是在幫助開(kāi)發(fā)者如何寫(xiě)更好的 CSS、更高效、可維護(hù)的 CSS 方面并沒(méi)有提供任何建議。

  • 你依然需要自己定義 CSS 類、id，并且思考如何去用這些類、id 進(jìn)行組合去描述 HTML 的樣式
  • 你依然可能會(huì)寫(xiě)很多冗余的 Less/Sass 代碼，然后造成項(xiàng)目的負(fù)擔(dān)，在可維護(hù)性方面也有巨大問(wèn)題

優(yōu)化

  • 可以引入 CSS 設(shè)計(jì)規(guī)范：BEM 規(guī)范，來(lái)輔助用戶在整個(gè)網(wǎng)頁(yè)的 HTML 骨架以及對(duì)應(yīng)的類上進(jìn)行設(shè)計(jì)

可以引入 CSS Modules，將 CSS 文件進(jìn)行 “作用域” 限制，確保在之后維護(hù)時(shí)，修改一個(gè)內(nèi)容不會(huì)引起全局中其他樣式的效果

BEM 規(guī)范

B (Block)、E(Element)、M(Modifier)，具體就是通過(guò)塊、元素、行為來(lái)定義所有的可視化功能。

拿設(shè)計(jì)一個(gè) Button 為例：

  1. /* Block */ 
  2.  
  3. .btn {} 
  4.  
  5.  
  6.  
  7. /* 依賴于 Block 的 Element */ 
  8.  
  9. .btn__price {} 
  10.  
  11.  
  12.  
  13. /* 修改 Block 風(fēng)格的 Modifier */ 
  14.  
  15. .btn--orange {} 
  16.  
  17. .btn--big {} 

遵循上述規(guī)范的一個(gè)真實(shí)的 Button：

 

  1. <a class="btn btn--big btn--orange" href="#"> 
  2.  
  3.   <span class="btn__price">$3</span> 
  4.  
  5.   <span class="btn__text">BIG BUTTON</span> 
  6.  
  7. </a> 

可以獲得如下的效果：

CSS Modules

CSS Modules 主要為 CSS 添加局部作用域和模塊依賴，使得 CSS 也能具有組件化。

一個(gè)例子如下：

  1. import React from 'react'; 
  2.  
  3. import style from './App.css'; 
  4.  
  5.  
  6.  
  7. export default () => { 
  8.  
  9.   return ( 
  10.  
  11.     <h1 className={style.title}> 
  12.  
  13.       Hello World 
  14.  
  15.     </h1> 
  16.  
  17.   ); 
  18.  
  19. }; 
  1. .title { 
  2.  
  3.   composes: className; 
  4.  
  5.   color: red; 
  6.  
  7. } 

上述經(jīng)過(guò)編譯會(huì)變成如下 hash 字符串：

  1. <h1 class="_3zyde4l1yATCOkgn-DBWEL"> 
  2.  
  3.   Hello World 
  4.  
  5. </h1> 
  1. ._3zyde4l1yATCOkgn-DBWEL { 
  2.  
  3.   color: red; 
  4.  
  5. } 

CSS Modules 可以與普通 CSS、Less、Sass 等結(jié)合使用。

純 JS 側(cè)方案

介紹與優(yōu)點(diǎn)

  • 維護(hù)狀態(tài)：一般
  • Star 數(shù)：35.2K
  • 支持框架：React ，通過(guò)社區(qū)支持 Vue 等框架
  • 項(xiàng)目地址：https://github.com/styled-components/styled-components

使用 JS 的模板字符串函數(shù)，在 JS 里面寫(xiě) CSS 代碼，這帶來(lái)了兩個(gè)認(rèn)知的改變：

  • 不是在根據(jù) HTML，然后去寫(xiě) CSS，而是站在組件設(shè)計(jì)的角度，為組件寫(xiě) CSS，然后應(yīng)用組件的組合思想搭建大應(yīng)用
  • 自動(dòng)提供類似 CSS Modules 的體驗(yàn)，不用擔(dān)心樣式的全局污染問(wèn)題

同時(shí)帶來(lái)了很多 JS 側(cè)才有的各種功能特性，可以讓開(kāi)發(fā)者用開(kāi)發(fā) JS 的方式開(kāi)發(fā) CSS，如編輯器自動(dòng)補(bǔ)全、Lint、編譯壓縮等。

比如我寫(xiě)一個(gè)按鈕：

  1. const Button = styled.button` 
  2.  
  3.   /* Adapt the colors based on primary prop */ 
  4.  
  5.   background: ${props => props.primary ? "palevioletred" : "white"}; 
  6.  
  7.   color: ${props => props.primary ? "white" : "palevioletred"}; 
  8.  
  9.  
  10.  
  11.   font-size: 1em; 
  12.  
  13.   margin: 1em; 
  14.  
  15.   padding: 0.25em 1em; 
  16.  
  17.   border: 2px solid palevioletred; 
  18.  
  19.   border-radius: 3px; 
  20.  
  21. `; 
  22.  
  23.  
  24.  
  25. render( 
  26.  
  27.   <div> 
  28.  
  29.     <Button>Normal</Button> 
  30.  
  31.     <Button primary>Primary</Button> 
  32.  
  33.   </div> 
  34.  
  35. ); 

可以獲得如下效果：

還可以擴(kuò)展樣式：

  1. // The Button from the last section without the interpolations 
  2.  
  3. const Button = styled.button` 
  4.  
  5.   color: palevioletred; 
  6.  
  7.   font-size: 1em; 
  8.  
  9.   margin: 1em; 
  10.  
  11.   padding: 0.25em 1em; 
  12.  
  13.   border: 2px solid palevioletred; 
  14.  
  15.   border-radius: 3px; 
  16.  
  17. `; 
  18.  
  19.  
  20.  
  21. // A new component based on Button, but with some override styles 
  22.  
  23. const TomatoButton = styled(Button)` 
  24.  
  25.   color: tomato; 
  26.  
  27.   border-color: tomato; 
  28.  
  29. `; 
  30.  
  31.  
  32.  
  33. render( 
  34.  
  35.   <div> 
  36.  
  37.     <Button>Normal Button</Button> 
  38.  
  39.     <TomatoButton>Tomato Button</TomatoButton> 
  40.  
  41.   </div> 
  42.  
  43. ); 

 可以獲得如下效果：

不足

雖然這類方案提供了在 JS 中寫(xiě) CSS，充分利用 JS 的插值、組合等特性，然后應(yīng)用 React 組件等組合思想，將組件與 CSS 進(jìn)行細(xì)粒度綁定，讓 CSS 跟隨著組件一同進(jìn)行組件化開(kāi)發(fā)，同時(shí)提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復(fù)用 JS 社區(qū)的最佳實(shí)踐等。

但是它仍然有一些不足：

  • 仍然是是對(duì) CSS 增強(qiáng)，提供非常大的靈活性，開(kāi)發(fā)者仍然需要考慮如何去組織自己的 CSS
  • 沒(méi)有給出一套 “有觀點(diǎn)” 的最佳實(shí)踐做法
  • 在上層也缺乏基于 styled-components 進(jìn)行復(fù)用的物料庫(kù)可進(jìn)行參考設(shè)計(jì)和使用，導(dǎo)致在初始化使用時(shí)開(kāi)發(fā)速度較低
  • 在 JS 中寫(xiě) CSS，勢(shì)必帶來(lái)一些本屬于 JS 的限制，如 TS 下，需要對(duì) Styled 的組件進(jìn)行類型注釋
  • 官方維護(hù)的內(nèi)容只兼容 React 框架，Vue 和其他框架都由社區(qū)提供支持

整體來(lái)說(shuō)不太符合團(tuán)隊(duì)協(xié)作使用，需要人為總結(jié)最佳實(shí)踐和規(guī)范等。

優(yōu)化

  • 尋求一套寫(xiě) CSS 的最佳實(shí)踐和團(tuán)隊(duì)協(xié)作規(guī)范
  • 能夠擁有大量的物料庫(kù)或輔助類等，提高開(kāi)發(fā)效率，快速完成應(yīng)用開(kāi)發(fā)

偏向 HTML 側(cè)方案

介紹與優(yōu)點(diǎn)

  • 維護(hù)狀態(tài)：積極
  • Star 數(shù)：48.9K
  • 支持框架：React、Vue、Svelte 等主流框架
  • 項(xiàng)目地址：https://github.com/tailwindlabs/tailwindcss

典型的是 TailwindCSS，一個(gè)輔助類優(yōu)先的 CSS 框架，提供如 flex 、pt-4 、text-center 、rotate-90 這樣實(shí)用的類名，然后基于這些底層的輔助類向上組合構(gòu)建任何網(wǎng)站，而且只需要專注于為 HTML 設(shè)置類名即可。

一個(gè)比較形象的例子可以參考如下代碼：

  1. <button class="btn btn--secondary">Decline</button> 
  2.  
  3. <button class="btn btn--primary">Accept</button> 

上述代碼應(yīng)用 BEM 風(fēng)格的類名設(shè)計(jì)，然后設(shè)計(jì)兩個(gè)按鈕，而這兩個(gè)類名類似主流組件庫(kù)里面的 Button 的不同狀態(tài)的設(shè)計(jì)，而這兩個(gè)類又是由更加基礎(chǔ)的 TailwindCSS 輔助類組成：

  1. .btn { 
  2.  
  3.   @apply text-base font-medium rounded-lg p-3; 
  4.  
  5. } 
  6.  
  7.  
  8.  
  9. .btn--primary { 
  10.  
  11.   @apply bg-rose-500 text-white; 
  12.  
  13. } 
  14.  
  15.  
  16.  
  17. .btn--secondary { 
  18.  
  19.   @apply bg-gray-100 text-black; 
  20.  
  21. } 

上面的輔助類包含以下幾類：

  • 設(shè)置文本相關(guān)：text-base 、font-medium 、text-white 、text-black
  • 設(shè)置背景相關(guān)的：bg-rose-500 、bg-gray-100
  • 設(shè)置間距相關(guān)的：p-3
  • 設(shè)置邊角相關(guān)的：rounded-lg

通過(guò) Tailwind 提供的 @apply 方法來(lái)對(duì)這些輔助類進(jìn)行組合構(gòu)建更上層的樣式類。

上述的最終效果展示如下：

可以看到 TailwindCSS 將我們開(kāi)發(fā)網(wǎng)站的過(guò)程抽象成為使用 Figma 等設(shè)計(jì)軟件設(shè)計(jì)界面的過(guò)程，同時(shí)提供了一套用于設(shè)計(jì)的規(guī)范，相當(dāng)于內(nèi)置最佳實(shí)踐，如顏色、陰影、字體相關(guān)的內(nèi)容，一個(gè)很形象的圖片可以說(shuō)明這一點(diǎn)：

TailwindCSS 為我們規(guī)劃了一個(gè)元素可以設(shè)置的屬性，并且為每個(gè)屬性給定了一組可以設(shè)置的值，這些屬性+屬性值組合成一個(gè)有機(jī)的設(shè)計(jì)系統(tǒng)，非常便于團(tuán)隊(duì)協(xié)作與共識(shí)，讓我們開(kāi)發(fā)網(wǎng)站就像做設(shè)計(jì)一樣簡(jiǎn)單、快速，但是整體風(fēng)格又能保持一致。

TailwindCSS 同時(shí)也能與主流組件庫(kù)如 React、Vue、Svelte 結(jié)合，融入基于組件的 CSS 設(shè)計(jì)思想，但又只需要修改 HTML 上的類名，如我們?cè)O(shè)計(jì)一個(gè)食譜組件：

  1. // Recipes.js 
  2.  
  3. import Nav from './Nav.js' 
  4.  
  5. import NavItem from './NavItem.js' 
  6.  
  7. import List from './List.js' 
  8.  
  9. import ListItem from './ListItem.js' 
  10.  
  11.  
  12.  
  13. export default function Recipes({ recipes }) { 
  14.  
  15.   return ( 
  16.  
  17.     <div className="divide-y divide-gray-100"> 
  18.  
  19.       <Nav> 
  20.  
  21.         <NavItem href="/featured" isActive>Featured</NavItem> 
  22.  
  23.         <NavItem href="/popular">Popular</NavItem> 
  24.  
  25.         <NavItem href="/recent">Recent</NavItem> 
  26.  
  27.       </Nav> 
  28.  
  29.       <List> 
  30.  
  31.         {recipes.map((recipe) => ( 
  32.  
  33.           <ListItem key={recipe.id} recipe={recipe} /> 
  34.  
  35.         ))} 
  36.  
  37.       </List> 
  38.  
  39.     </div> 
  40.  
  41.   ) 
  42.  
  43. } 
  44.  
  45.  
  46.  
  47. // Nav.js 
  48.  
  49. export default function Nav({ children }) { 
  50.  
  51.   return ( 
  52.  
  53.     <nav className="p-4"> 
  54.  
  55.       <ul className="flex space-x-2"> 
  56.  
  57.         {children} 
  58.  
  59.       </ul> 
  60.  
  61.     </nav> 
  62.  
  63.   ) 
  64.  
  65. } 
  66.  
  67.  
  68.  
  69. // NavItem.js 
  70.  
  71. export default function NavItem({ href, isActive, children }) { 
  72.  
  73.   return ( 
  74.  
  75.     <li> 
  76.  
  77.       <a 
  78.  
  79.         href={href} 
  80.  
  81.         className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`} 
  82.  
  83.       > 
  84.  
  85.         {children} 
  86.  
  87.       </a> 
  88.  
  89.     </li> 
  90.  
  91.   ) 
  92.  
  93. } 
  94.  
  95.  
  96.  
  97. // List.js 
  98.  
  99. export default function List({ children }) { 
  100.  
  101.   return ( 
  102.  
  103.     <ul className="divide-y divide-gray-100"> 
  104.  
  105.       {children} 
  106.  
  107.     </ul> 
  108.  
  109.   ) 
  110.  
  111. } 
  112.  
  113.  
  114.  
  115. //ListItem.js 
  116.  
  117. export default function ListItem({ recipe }) { 
  118.  
  119.   return ( 
  120.  
  121.     <article className="p-4 flex space-x-4"> 
  122.  
  123.       <img src={recipe.image} alt="" className="flex-none w-18 h-18 rounded-lg object-cover bg-gray-100" width="144" height="144" /> 
  124.  
  125.       <div className="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20"> 
  126.  
  127.         <h2 className="text-lg font-semibold text-black mb-0.5"> 
  128.  
  129.           {recipe.title} 
  130.  
  131.         </h2> 
  132.  
  133.         <dl className="flex flex-wrap text-sm font-medium whitespace-pre"> 
  134.  
  135.           <div> 
  136.  
  137.             <dt className="sr-only">Time</dt> 
  138.  
  139.             <dd> 
  140.  
  141.               <abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr> 
  142.  
  143.             </dd> 
  144.  
  145.           </div> 
  146.  
  147.           <div> 
  148.  
  149.             <dt className="sr-only">Difficulty</dt> 
  150.  
  151.             <dd> · {recipe.difficulty}</dd> 
  152.  
  153.           </div> 
  154.  
  155.           <div> 
  156.  
  157.             <dt className="sr-only">Servings</dt> 
  158.  
  159.             <dd> · {recipe.servings} servings</dd> 
  160.  
  161.           </div> 
  162.  
  163.           <div className="flex-none w-full mt-0.5 font-normal"> 
  164.  
  165.             <dt className="inline">By</dt>{' '} 
  166.  
  167.             <dd className="inline text-black">{recipe.author}</dd> 
  168.  
  169.           </div> 
  170.  
  171.           <div class="absolute top-0 right-0 rounded-full bg-amber-50 text-amber-900 px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1"> 
  172.  
  173.             <dt className="text-amber-500"> 
  174.  
  175.               <span className="sr-only">Rating</span> 
  176.  
  177.               <svg width="16" height="20" fill="currentColor"> 
  178.  
  179.                 <path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" /> 
  180.  
  181.               </svg> 
  182.  
  183.             </dt> 
  184.  
  185.             <dd>{recipe.rating}</dd> 
  186.  
  187.           </div> 
  188.  
  189.         </dl> 
  190.  
  191.       </div> 
  192.  
  193.     </article> 
  194.  
  195.   ) 
  196.  
  197. } 

 上述食譜的效果如下：

可以看到我們無(wú)需寫(xiě)一行 CSS，而是在 HTML 里面應(yīng)用各種輔助類，結(jié)合 React 的組件化設(shè)計(jì)，既可以輕松完成一個(gè)非常現(xiàn)代化且好看的食譜組件。

除了上面的特性，TailwindCSS 在響應(yīng)式、新特性支持、Dark Mode、自定義配置、自定義新的輔助類、IDE 方面也提供非常優(yōu)秀的支持，除此之外還有基于 TailwindCSS 構(gòu)建的物料庫(kù) Tailwind UI ，提供各種各樣成熟、好看、可用于生產(chǎn)的物料庫(kù)：

因?yàn)樾枰远ǖ?CSS 不多，而需要自定義的 CSS 可以定義為可復(fù)用的輔助類，所以在可維護(hù)性方面也是極好的。

不足

  • 因?yàn)橐胍粋€(gè)額外的運(yùn)行時(shí)，TailwindCSS 輔助類到 CSS 的編譯過(guò)程，而隨著組件越來(lái)越多，需要編譯的工作量也會(huì)變大，所以速度會(huì)有影響
  • 過(guò)于底層，相當(dāng)于給了用于設(shè)計(jì)的最基礎(chǔ)的指標(biāo)，但是如果我們想要快速設(shè)計(jì)網(wǎng)站，那么可能還需要一致的、更加上層的組件庫(kù)
  • 相當(dāng)于引入了一套框架，具有一定的學(xué)習(xí)成本和使用成本

優(yōu)化

  • Tailwind 2.0 支持 JIT[1]，可以大大提升編譯速度，可以考慮引入
  • 基于 TailwindCSS，設(shè)計(jì)一套符合自身風(fēng)格的上層組件庫(kù)、物料庫(kù)，便于更加快速開(kāi)發(fā)
  • 提前探索、學(xué)習(xí)和總結(jié)一套教程與開(kāi)發(fā)最佳實(shí)踐
  • 探索 styled-components 等結(jié)合 TailwindCSS 的開(kāi)發(fā)方式

參考鏈接

CSS 工程化發(fā)展歷程[2]

參考資料

[1]JIT: https://blog.tailwindcss.com/tailwindcss-2-1

本文轉(zhuǎn)載自微信公眾號(hào)「程序員巴士」

 

責(zé)任編輯：姜華 來(lái)源： 程序員巴士
CSS 技巧工程化技術(shù)
相關(guān)推薦

2021-12-09 11:30:46

CSS技術(shù)前端

2013-03-04 09:34:48

CSSWeb

2023-01-09 17:23:14

CSS技巧

2022-04-28 12:17:26

瀏覽器連字符hyphens

2011-09-20 10:56:35

云計(jì)算PaaS

2018-09-10 09:26:33

2022-04-29 09:00:00

Platform架構(gòu)內(nèi)核線程

2022-08-10 09:03:35

TypeScript前端

2010-02-23 10:35:39

開(kāi)源服務(wù)器技術(shù)

2016-01-20 10:40:55

2016物聯(lián)網(wǎng)

2022-11-28 00:07:47

2023-05-12 14:49:47

CSS框架前端

2014-07-31 17:13:50

編碼程序員

2020-03-27 12:30:39

python開(kāi)發(fā)代碼

2024-06-04 16:51:11

2018-05-30 15:15:47

混合云公共云私有云

2019-10-23 10:36:46

DevSecOpsDevOps

2022-12-30 11:04:23

科技人工智能

2020-12-30 11:22:11

Node.js前端模塊

2018-02-08 08:08:12

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)