modules
總結前端三劍客裡，無疑css和html的重視程度遠低於js，一方面是因為js是開發中的核心，js水平的高低往往決定了天花板的高度。另一方面css比較簡單，做出符合產品需求的樣式並不難，而且前端領域不缺輪子，搬搬**也是極好的（筆者也屬於其中）。但大部分都誤解的是，css雖然好掌握，但也同樣功能強大，css模組化也隨著前端發展而不斷向前。
回想一下，在開發過程中，令人頭疼的css是不是存在以下幾個問題呢。
全域性汙染，樣式衝突。明白人都知道，說來都是淚，樣式垮掉，多半是這問題。
命名。複雜元件或頁面裡，命名衝突，冗雜。
無變數。2023年以後才在css裡引入變數，早些時候是沒有的。
less、scss、styluscss預編譯語言，提供了譬如變數、巢狀、混合、運算、佔位符等方法，對css樣式復用、樣式抽離起了極大的促進作用。
bem流行的class命名規則，為了解決命名衝突提供了良好的思路。但命令過於冗雜。
css in js顧名思義，css不在於js抽離。最為流行的 styled-component開源庫。
css modules極大的避免樣式衝突，全域性汙染等問題，存在作用域，利於樣式復用。
scoped可直接在vue等裡使用，會生成帶唯一屬性來區分。一般情況下是唯一的，不會重複。
值得注意的是，父元件的樣式不會應用到子元件中。除非：子元件的頂層container類名和父級
裡某個類名相同。
// child.vue
="red"
>
// 頂層container 類名存在於父級 渲染出來時紅色
this is a child page<
/h1>
<
/div>
<
/template>
.red
// father.vue
="red"
>this is a test page<
/h1>
<
/child>
<
/div>
<
/template>
.red
<
/style>
另外如果只是單純的使用選擇器，而不是class或id會造成效能的丟失。
在使用第三方庫，想修改第三方ui樣式。有兩種選擇，
1、不在scoped裡做樣式；2、深度選擇器
v-html生成的內容不受scoped樣式影響,可選擇深度選擇器
書寫上用$styles.classname繫結class。
modules不會存在scoped的問題，即使類名相同，也不會影響。
modules可以搭配scss、less使用，功能更加強大和豐富。
在vue裡需要額外配置
}]
}
class
="$style.red"
>
this is a child page<
/h1>
<
/div>
<
/template>
.red
<
/style>
// 不會被編譯hash字串
:global(.color)
// 會被編譯成hash
:local(.color)
// 效果一樣
.color
1、元件化開發，不僅僅是元件，css也同樣可以做到復用抽離。sass提供強大的@mixin、@extend等功能相當實用。
2、盡量使用class、id選擇器，不要使用元素選擇器。用著一時爽，改時兩行淚。
3、貼近專案。不應一味追求使用什麼，而應該致力於解決了什麼。保質保量完成專案，才是工作的核心。
css個人總結
ccs cascading style sheet 層疊樣式表 主要作用 介面布局 和 美化介面 1.2.1 選擇器 高階選擇器 優先順序 多級依次比較 1.2.2 使用方式 1.2.3 路徑字型屬性 font 文字屬性 text 盒子模型 6大屬性 border 邊框 padding 內邊距 特殊...
個人開發總結
軟體工程課程終於至此結束，最後經過半個多月的衝刺，最後終於拿出了乙個可以用的產品。當然我們在其中也出現了很多問題。2.後期混亂，果然如同老師所說，我們的暑假並沒有像之前想的那樣時間充足，大家實際上還是又有著各種各樣自己的事情，有去老美做暑研的，有的去亞研院實習的，有的忙著找保研的老師，大家真正用於開...
css的個人總結
理解css的關鍵在於能夠設想每個html元素的周圍都有乙個看不見的盒子。引用外部css檔案 link標籤，這是乙個空元素，也就是不需要結束標籤，它位於head元素中。href 該特性表明css的路徑檔案 type 表明引用檔案的型別 text css rel stylesheet.表明css檔案和h...