一站式百度SEO排名優化!-找老劉博客 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

首頁>>前端開發

優化 CSS 代碼的12個小技巧

首頁 2022-11-26 前端開發 809 ℃Tags: css


今天來分享 12 個優化 CSS 代碼小技巧!

css文字漸變色_css文字顏色漸變的3種實現方式

1. 避免高消耗屬性

分析表明,一些CSS屬性的渲染速度比其他屬性慢,因此應該謹慎使用。包括以下屬性:

  • box-shadow
  • border-radius
  • position: fixed
  • transform
  • :nth-child
  • filter

上述屬性都是對性能要求比較高的。如果這些屬性使用較少,那這就不是問題。但是如果一個頁面出現幾百次,那么整體的CSS可能會受到影響,所以要謹慎使用。

2. 使用 <link> 代替 @import

@import 規則主要用于導入資源或者CSS文件。它會阻止其他文件并行下載,并可能會導致網站速度變慢。

? 不要在CSS中這樣操作:

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

可以使用多個HTML 中的<link>標簽來代替@import,它將并行加載CSS文件,可以在一定程度上提高應用的加載的速度。

? 可以在HTML這樣操作:

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

3. 簡化選擇器

我們知道,有很多方法可以對 HTML 元素進行樣式設置,而最復雜的 CSS 選擇器可能需要幾毫秒的時間來解析。降低選擇器的復雜性就可以減少瀏覽器的負載并保持代碼簡潔明了。

? 避免這么寫:

.container > div.links-container ul li .link {

}

? 可以這么寫:

.container .link {

}

4. 避免使用 !Important

在一些時候,可以使用!Important 來提高樣式的優先級,以使樣式生效。除非沒有別的辦法,否則不要使用!Important。

添加 !Important CSS聲明將覆蓋掉其他對應的樣式聲明,如果CSS的規則中 !Important 太多,瀏覽器就必須對代碼進行額外的檢查,這可能會降低頁面的加載速度。所以,盡量避免使用!Important。在很多情況下我們是可以通過選擇器來實現樣式重寫的,除非是想要對第三方庫的CSS進行重寫。

5. CSS實現特效和SVG代替圖片

頁面中加載圖像很可能需要很長的時間,尤其是在圖像未針對web進行優化的情況下。在實現背景圖、漸變、幾何圖形時,盡量少使用圖片,而是使用CSS代碼實現。使用 CSS 代碼實現就會比圖片加載速度更快。

還可以使用SVG來代替PNG或者JPG圖片:

  • 可以給圖片添加效果;
  • 圖像加載速度更快;
  • 圖像自動適應用戶屏幕。

6. 壓縮 CSS

我們可以通過壓縮CSS文件來刪除文件中所有的空白和不必要的代碼來減少文件的大小。CSS文件變小了,加載的時間自然就變少了,頁面的加載速度就會變。

7. 使用0而不是0px

當一個屬性的值為0時,我們可以不添加任何單位。即不要這么寫:0rem,0em,0px等。

當然,這么寫是沒有錯的,但是這些單位是沒有用的,當處理一個巨大的CSS文件時,沒有單位會比有單位時文件小一點。

8. 使用十六進制而不是顏色名稱

當我們將顏色設置為顏色名稱時,瀏覽器就會花費更多時間來找出顏色的十六進制值。假如想使用紅色,那設置為color:red之后,不同的瀏覽器顯示效果可能是不一樣的,作為開發人員,我們不能讓瀏覽器來決定網頁將如何顯示。

因此,盡量使用使用十六進制(例如紅色#ff0000)來定義顏色,就能確保在所有瀏覽器中以相同的色調準確得顯示想要的顏色。

9. 避免過多 font-family

為每個選擇器去定義字體并不是一個好的辦法,它會導致代碼很難維護,假如以后想要更改字體,就不得不在每個選擇器中更改它。

因此不要像下面這樣來定義字體:

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

.selection {
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  font-family"Times New Roman", Times, serif;
}

可以在正文中定義要使用的字體,如果想要在其他選擇器中覆蓋該字體,就可以通過在該選擇器中使用所需的字體來實現:

body{
  font-family: Arial, Helvetica, sans-serif;
}

footer{
  font-family"Times New Roman", Times, serif";
}

如果頁面中很多部分的字體都不盡相同,就可以將字體定義在 class 中,然后在需要的HTML標簽上使用該class即可:

.font-helvetica {
  font-family: Arial, Helvetica, sans-serif;
}

.font-times {
  font-family"Times New Roman", Times, serif";
}

10. 使用備用字體

有些情況下,應用中使用的字體可能在用戶設備上不可用。在這種情況下,可以指定使用其他備用字體:

p{
  font-family'Open Sans', Arial, Helvetica, sans-serif;
}

這樣,瀏覽器就會按順序進行解析,直到解析到第一個可用的字體,如果都不可用,就會使用瀏覽器的默認字體。

11. 使用 CSS 重置

每個瀏覽器都有自己的 HTML 元素默認樣式。假如有一個沒有任何樣式的 H1 元素,那么在默認情況下,在Firefox中,會給它一個上下為21.433px,左右為 0 的margin值。而在Safari中,會給它一個上下為21px,左右為 0 的margin值。

因此,重置CSS樣式,一個很好的做法就是從頭開始定義樣式。很多開發人員會使用通用選擇器(*)來執行基本重置:

* {
  margin0;
  padding0;
  box-sizing: border-box;
}

在使用通用選擇器 (*) 進行重置有時會導致性能問題,因為它會針對每個標簽去設置其樣式。

可以使用一些常用的CSS重置代碼庫,比如normalize。也可以參考一些CSS重置的最佳實踐。

12. 減少重復代碼

當兩個元素或選擇器具有相同的 CSS 屬性時,可以使用逗號來組合這些選擇器,而不是重復聲明樣式,這樣它們將共享 CSS 樣式。

? 避免這樣寫:

.header {
  background-color#fefefe;
  padding20px 0;
}

.footer {
  background-color#fefefe;
  padding20px 0;
}

? 建議這樣寫:

.header,
.footer {
  background-color#fefefe;
  padding20px 0;
}


搜索
分類
熱門標簽
  • 首頁
  • 電話
  • QQ
  • ?
    聯系老劉手機
    1043025812
    聯系老劉微信
    掃描微信二維碼
    色成年激情久久综合|中文国产成人精品久久不卡|综合一区久久k极品视觉盛宴|亚洲人成影院在线 国产精品1024 99久久久无码国产aaa精品 52色鲁超碰这里只有精品网址 久久精品国产厕所嘘嘘 精品国产三级A在线观看 国内揄拍高清国内精品对白 国产欧美精品一区 久久久精品免费免费 国产精品视频YJIZZ