<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • 簡述什么是css以及css的作用(詳解css概念和作用)


    這幾個CSS概念,你了解嗎?

    聊起css,印象最深刻的就是剛畢業那會剛開始從事前端開發崗位工作的時候,身為一名 cut picture boy (切圖仔),在頁面布局及還原設計圖中廣泛使用css來開發頁面,我記得剛開始接觸最多的就是Bootstrap(用于開發響應式布局、移動設備優先的 WEB)。然而隨著前端突飛猛進的編進,諸如element,ant design等優秀的ui庫出現,在對比中感到審美疲勞。言歸正傳,css近年來了也催生了蠻多新的解決方案,比如 CSS Modules、styled-components(css in js )、Functional CSS、CSS 原子類、CSS沙盒等等

    1. CSS Module

    CSS Module 顧名思義就是 CSS 模塊化,為什么需要模塊化?我們知道隨著基于vue、react開發SPA的web應用,本質上是由多組件搭建而成,就好比用積木來搭房子,如果這個時候兩個組件的樣式類名重復了,那豈不是就沖突了?為了解決沖突就需要進行模塊化區分,沒有了命名沖突,更好地讓組件間沙箱化,而CSS Module就是css模塊化的實現方式之一

    CSS Module 在打包的時候會將類名轉換成帶有hash值的新類名,根據命名規矩,從而杜絕css類名沖突的問題。

    啊呆同學:CSS Module是不是就是Vue: scoped 樣式的實現方式呢?

    答:不是的,CSS Scope是通過限制作用域來實現,樣式在局部生效,而不是真正意義上的css Module

    我們知道,當一個style標簽擁有scoped屬性時候,它的css樣式只能用于當前的Vue組件,它的實現原理是通過PostCSS來實現,通過給相對應的dom新增一個屬性,同時給css選擇器新增一個對應的屬性,來對應這個唯一的dom,如下所示

    這幾個CSS概念,你了解嗎?

    而css module 是怎么樣實現的呢,以vue為例子,如何使用CSS module

    • webpack 直接 引入 vue-loader 使用文檔??[1]
    • vue-cli3內置,可以直接開箱即用, 只需要在style標簽標記module,就可以在組件內使用CSS Modules了,更多操作看文檔使用文檔[2]

    下面我們看看CSS Module在vue項目中的編譯效果

    這幾個CSS概念,你了解嗎?

    我們可以看到,CSS Modules在最終構建頁面時會自動重命名class,用vue官方描述就是,這個 module 特性指引 Vue Loader 作為名為 $style 的計算屬性,向組件注入 CSS Modules 局部對象。然后你就可以在模板中通過一個動態類綁定來使用它了

    啊樂同學:你說CSS Module是 css 模塊化的一種實現方式,還有其他CSS模塊化實現方式嗎?

    有的,比如BEM 命名規范,還有下節會介紹的 CSS in JS

    這里簡單介紹下BEM

    這幾個CSS概念,你了解嗎?

    拓展閱讀:

    • CSS Modules 用法教程[3]
    • BEM 官方規范[4]

    2. CSS in JS

    CSS in JS,顧名思義就是將應用的CSS樣式寫在JavaScript文件里面,使用JS語言來寫CSS,包括替代原先寫后綴為.css、.less、.scss等文件

    2.1 styled-components

    styled-components 是 CSS in JS 實現方案中比較知名的,大多用于React,通過使用es6語法的標簽模板字符串語法為component定義css屬性,我們不用在設置className類名啦~ 我們看看那下面這個demo

    這幾個CSS概念,你了解嗎?

    啊雪同學:styled-components是為React而生的,那Vue能使用嗎?

    答:可以的,styled-components team 專門為Vue開發了一個 vue-styled-components,和React的styled-components用法非常相似,有興趣可以玩玩,我玩得不溜(不過這個倉庫?也是有點少,看來很小眾, style-component寫起來確實有點別扭)但我始終覺得 CSS-in-JS 會越來越流行 文檔鏈接??[5]

    拓展:

    styled-components 官網[6]

    3.CSS 原子類

    其實這個概念已經很老了,本質上也是一種編寫 CSS 的思想,簡而言之就是通過用原子類構造選擇器,比如我們定義一個base.css 文件,里面定義了公共復用高的選擇器,諸如mgt20(來表示 margin-top: 20px )等等,好處在于便于抽出復用代碼,提高代碼復用程度,但是過度的抽象也會帶來了維護上的巨大成本。

    3.1 tailwind

    這幾個CSS概念,你了解嗎?

    tailwind 官網鏈接[7]其實本質上也是一種原子類思維,一個 class 代表一種 CSS 屬性。優點在于它把 class 拆分到足夠細,粒度很小,很好很「原子」。在國外很吃香,因為自定義屬性強且類名語義話強,你再也不用為取class的名字很犯愁(畢竟單獨一個組件開發我們就可能需要n個類),自定義就像搭積木一樣,但國內爭議比較大,早期原子類在國內基本被噴,到2020年后卻態度有所改觀。我們看下下面這段demo,官方事例如何實現一個卡片

    這幾個CSS概念,你了解嗎?

    我這一眼完全好多類名,但是確實看起來簡單就能構建,但這粒度也太小了吧~問題也隨著暴露,難記,用著用著,你就好比小時候要拿起字典來查閱單詞,tailwind寶典請查收 查閱鏈接 [8]

    輪落地應用,當前twitter就是基于tailwind進行改版的,我們可以在控制臺清晰看到

    這幾個CSS概念,你了解嗎?

    話說這個實驗室還蠻有錢,贊助了vite的廣告位

    這幾個CSS概念,你了解嗎?

    拓展閱讀:

    • 如何評價CSS框架TailwindCSS?[9]

    3.2 bulma

    這幾個CSS概念,你了解嗎?

    Bulma 是一個基于 Flexbox 布局技術的免費、開源的現代 CSS 框架,早期接觸的時候是在社區看到基于Bulma的Vue.js的輕量級UI組件buefy。它完全基于CSS,不需要javascript。這也是他跟boostrap的最大區別。不過現在也不是很主流,這里不做過多闡述,感興趣同學可以深入了解,可以看下面這個例子

    這幾個CSS概念,你了解嗎?

    學習使用CSS框架并不是最終目的,它只是一個提升生產力的工具,工具的目的是用來提升我們開發效率,最終賦能到我們的產品中去,所以不用太糾結有沒有使用過這些框架,畢竟那么多個框架你是不可能每個都會用。換句話講了解原理也是可以的, 能提升自己的認知

    拓展閱讀:

    • CSS 框架 Bulma 教程[10]

    4.CSS Sandbox(沙盒)

    css沙盒簡而言之就是起到樣式隔離的作用,互不干擾,前端接觸比較多的就是微前端了,畢竟要保證每個集成進來的應用樣式互不干擾。因為應用可能是不同團隊成員開發,正常是會有類名沖突的情況出現。

    最早期的實現方式應該就是iframe了,iframe自帶天然隔離,但是這種方式局限性也很多,還有就像上文我們提及的幾個點,比如

    • scoped CSS:通過定義屬性scoped來就能結合 DOM 樹限制 CSS 作用范圍
    • CSS in js 及 CSS Module 是通過工具把樣式編譯成腳本
    • 移除head內標簽:這也是qiankun(微前端框架) 的 css 沙箱的原理,通過記錄子項目運行時新增的 style/link 標簽,卸載子項目時移除這些標簽。重新添加新載入子項目的標簽來實現
    • shadow DOM:你可以理解為dom中的dom,是 Web components一個重要屬性,它允許將隱藏的 DOM 樹附加到常規的 DOM 樹中,弊端就是兼容性較差,你可以看下兼容情況

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费