用好這20個css技巧快速提升你的CSS技能

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

隨著前端開發越來越關注效率：通過選擇器的使用和簡化代碼來快速加載渲染。像Less、SCSS這樣的預處理器在工作的時候，需要繞的路較長，而直接使用css速度會更快。這里涵蓋了20個css技巧來幫助你減少重復規則和復寫，在布局中標準化樣式流程，不僅可以幫助你高效地創建自己的框架，而且可以解決許多常見的問題。

如何提升你的CSS技能？掌握這20個css技巧即可[完整版]

如果您對CSS比較陌生，看看這篇文章CSS選擇器如此之多，你了解多少？

1、使用CSS重置（reset）

css重置庫如normalize.css已經被使用很多年了，它們可以為你的網站樣式提供一個比較清晰的標準，來確保跨瀏覽器之間的一致性。大多數項目并不需要這些庫包含的所有規則，可以通過一條簡單的規則來應用于布局中的所有元素，刪除所有的margin、padding改變瀏覽器默認的盒模型。

*{ 
 box-sizing:border-box; 
 margin:0; 
 padding:0 
}

使用box-sizing聲明是可選擇，如果你使用下面繼承的盒模型形式可以跳過它

2、繼承盒模型

讓盒模型從html 繼承：

html { 
 box-sizing: border-box; 
} 
*, *:before, *:after { 
 box-sizing: inherit; 
}

3、使用flexbox布局來避免margin的問題（Get Rid of Margin hacks width Flexbox）

當你多少次試著去設計柵格布局如：組合或者圖片畫廊，如果使用浮動的方式，那么就需要去清除浮動和重置外邊距來使其分解成所需要行數。為了避免nth-、first-、last-child 問題，可以使用flexbox 的space-between 屬性值

.flex-container{ 
 display:flex; 
 justify-content:space-between; 
} 
.flex-container .item{ 
 flex-basis:23%; 
}

4、使用:not() 解決lists邊框的問題

在web設計中，我們通常使用：last-child nth-child 選擇器來覆蓋原先聲明應在父選擇器上的樣式。比如說一個導航菜單，通過使用borders 來給每個鏈接Link創建分割符，然后再在加上一條規則解除最后一個link的border

.nav li { 
 border-right: 1px solid #666; 
} 
.nav li:last-child { 
 border-right: none; 
}

這是一種很混亂的方式，它不僅強制瀏覽器以一種方式渲染，然后又通過特定的選擇器來撤銷它。這樣覆蓋樣式是不可避免的。然而，最重要的是，我們可以通過使用：not偽類(pseudo-class) 在你想聲明的元素上僅僅只使用一種樣式：

.nav li:not(:last-child) { 
 border-right: 1px solid #666; 
}

上面就是，除了最后一個li以外，所有的 .nav li 都加上了border樣式，是不是很簡單！當然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是：not是更有語義化（semantic）和容易理解的。

如何提升你的CSS技能？掌握這20個css技巧即可[完整版]

5、body上加入line-height樣式

導致低樣式效率（inefficient stylesheets）的一件事就是不斷的重復聲明。最好是做下項目規劃和組合規則，這樣CSS會更流暢。實現這一點，就需要我們理解級聯（cascade）,以及如何在通用選擇器寫的樣式可以繼承在其他地方。行間距（line-height）可以作為給你的整個項目設置的一個屬性，不僅可以減小代碼量，而且可以讓你的網站的樣式給一個標準的外觀

body { 
 line-height: 1.5; 
}

請注意，這里的聲明沒有單位，我們只是告訴瀏覽器讓它渲染行高是渲染字體大小的1.5倍

6、垂直居中任何元素 (vertical-center anything)

在沒有準備使用CSSGrid 布局的時候，設置垂直居中布局的全局規則是一個很好的方式，可以為優雅（elegantly）的設置內容布局奠定一個基礎

html, body { 
 height: 100%; 
 margin: 0; 
} 
body { 
 -webkit-align-items: center; 
 -ms-flex-align: center; 
 align-items: center; 
 display: -webkit-flex; 
 display: flex; 
}

這15種CSS居中的方式，你都用過哪幾種？

7、使用SVG icons

SVG使用于所有分辨類，并且所有瀏覽器也都支持。所以可以將.png .jpg .gif 等文件丟棄。FontAwsome5中也提供了SVG的圖標字體。設置SVG的格式就跟其他圖片類型一樣：

.logo { 
 background: url("logo.svg"); 
}

溫馨提示：如果將SVG用在可交互的元素上比如說button，SVG 會產生無法加載的問題。可以通過下面這個規則來確保SVG可以訪問到（確保在HTML中已設置適當的aria屬性）

.no-svg .icon-only:after { 
 content: attr(aria-label); 
}

如何提升你的CSS技能？掌握這20個css技巧即可[完整版]

8、使用 “OWL選擇器”

使用通用選擇器（universal selector）* 和相鄰的兄弟選擇器（adjacent sibling selector）+ 可以提供一個強大的的CSS功能，給緊跟其他元素中的文檔流中的所有元素設置統一的規則

* + * { 
 margin-top: 1.5rem; 
}

這是一個很棒的技巧，可以幫你創建更加均勻的類型跟間距。在上面的列子中，跟在其他元素后面的元素，比如說H3后面的H4，或者一個段落之后的一個段落，他們之間至少1.5rems的間距（大約為30px）

9、一致的垂直結構（Consistent Vertical Rhythm）

一致的垂直節奏提供了一種視覺美學，使內容更具可讀性。如果owl選擇器過于通用，請在元素內使用通用選擇器（*）為布局的特定部分創建一致的垂直節奏：

.intro > * { 
 margin-bottom: 1.25rem; 
}

10、對更漂亮的換行文本使用 box-decoration-break

假設您希望對換行到多行的長文本行應用統一的間距、邊距、突出顯示或背景色，但不希望整個段落或標題看起來像一個大塊。Box Decoration Break屬性允許您僅對文本應用樣式，同時保持填充和頁邊距的完整性。如果要在懸停時應用突出顯示，或在滑塊中設置子文本樣式以具有突出顯示的外觀，則此功能尤其有用：

.p { 
 display: inline-block; 
 box-decoration-break: clone; 
 -o-box-decoration-break: clone; 
 -webkit-box-decoration-break: clone; 
}

內聯塊聲明允許將顏色、背景、頁邊距和填充應用于每行文本，而不是整個元素，克隆聲明確保將這些樣式均勻地應用于每行。

11、等寬表格單元格

表格可能很難處理，所以嘗試使用table-layout：fixed來保持單元格相等寬度：

.calendar { 
 table-layout: fixed; 
}

如何提升你的CSS技能？掌握這20個css技巧即可[完整版]

12、強制使用屬性選擇器顯示空鏈接

這對于通過CMS插入的鏈接特別有用，CMS通常不具有類屬性，并幫助您在不影響級聯的情況下對其進行特定樣式設置。例如，<a>元素沒有文本值，但href屬性有一個鏈接：

a[href^="http"]:empty::before { 
 content: attr(href); 
}

13、樣式“默認”鏈接

說到鏈接樣式，您可以在幾乎每個樣式表中找到一個通用的A樣式。這迫使您為子元素中的任何鏈接編寫額外的覆蓋和樣式規則，并且在使用像WordPress這樣的CMS時，可能會導致您的主鏈接樣式比按鈕文本顏色更容易出現問題。嘗試這種較少干擾的方式為“默認”鏈接添加樣式：

a[href]:not([class]) { 
 color: #999; 
 text-decoration: none; 
 transition: all ease-in-out .3s;
}

14、比率框

要創建具有固有比率的框，您需要做的就是將頂部或底部填充應用于div：

.container { 
 height: 0; 
 padding-bottom: 20%; 
 position: relative; 
} 
.container div { 
 border: 2px dashed #ddd; 
 height: 100%; 
 left: 0; 
 position: absolute; 
 top: 0; 
 width: 100%; 
}

使用20％進行填充使得框的高度等于其寬度的20％。無論視口的寬度如何，子div都將保持其縱橫比（100％/ 20％=5：1）。

如何提升你的CSS技能？掌握這20個css技巧即可[完整版]

15、風格破碎的圖像

這個技巧不是關于代碼縮減，而是關于細化設計細節的。破碎的圖像發生的原因有很多，要么不雅觀，要么導致混亂（只是一個空元素）。用這個小小的CSS創建更美觀的效果：

img { 
 display: block; 
 font-family: Helvetica, Arial, sans-serif; 
 font-weight: 300; 
 height: auto; 
 line-height: 2; 
 position: relative; 
 text-align: center; 
 width: 100%; 
} 
img:before { 
 content: "We're sorry, the image below is missing :("; 
 display: block; 
 margin-bottom: 10px; 
} 
img:after { 
 content: "(url: " attr(src) ")"; 
 display: block; 
 font-size: 12px; 
}

16、使用rem進行全局大小調整；使用em進行局部大小調整

在設置根目錄的基本字體大小后，例如html字體大小：15px；，可以將包含元素的字體大小設置為rem:

article { 
 font-size: 1.25rem; 
} 
aside { 
 font-size: .9rem; 
}

然后將文本元素的字體大小設置為em

h2 { 
 font-size: 2em; 
} 
p { 
 font-size: 1em; 
}

現在，每個包含的元素都變得分區化，更易于樣式化、更易于維護和靈活。

web開發中該用 em 還是 rem 呢？

如何提升你的CSS技能？掌握這20個css技巧即可[完整版]

17、隱藏未靜音的自動播放視頻

當您處理無法從源代碼輕松控制的內容時,這對于自定義用戶樣式表來說是一個很好的技巧。這個技巧將幫助您避免在加載頁面時自動播放視頻中的聲音干擾訪問者，并再次提供了精彩的：not（）偽選擇器：

video[autoplay]:not([muted]) { 
 display: none; 
}

18、靈活運用root類型

響應布局中的字體大小應該能夠自動調整到視區，從而保存編寫媒體查詢的工作，以處理字體大小。可以使用:not和視區單位，根據視區高度和寬度計算字體大小：

:root { 
 font-size: calc(1vw + 1vh + .5vmin); 
}

現在，您可以使用根em單位，該單位基于:not：

body { 
 font: 1rem/1.6 sans-serif; 
}

結合上面的rem/em技巧以獲得更好的控制。有關管理Safari舊版本的提示，請參閱CSS Fix for iOS VH Unit Bug。

19、在表單元素上設置字體大小，以獲得更好的移動體驗

為了避免移動瀏覽器（iOS Safari等）在點擊<select>下拉列表時放大HTML表單元素，請在添加font-size樣式：

input[type="text"], 
input[type="number"], 
select, 
textarea { 
 font-size: 16px; 
}

20、CSS變量

最后，最強大的CSS級別來自于CSS變量，它允許您聲明一組公共屬性值，這些值可以通過樣式表中任何位置的關鍵字重用。你可能有一套顏色在整個項目中使用，以保持一致性。在CSS中反復重復這些顏色值不僅是件煩人的事情，而且還容易出錯。如果某個顏色在某個時刻需要改變，你就不得不去尋找和替換，這是不可靠或不快速的，當為最終用戶構建產品時，變量使得定制變得容易得多。例如：

如何提升你的CSS技能？掌握這20個css技巧即可[完整版]

:root { 
 --main-color: #06c; 
 --accent-color: #999; 
} 
 
h1, h2, h3 { 
 color: var(--main-color); 
} 
a[href]:not([class]), 
p, 
footer span{ 
 color: var(--accent-color); 
}

公告

喜歡小編的點擊關注，了解更多知識！

文共3019字，預計學習時長9分鐘

來源：Pexels

JavaScript是目前最流行的編程語言之一。就像任何其他編程語言一樣，它有許多讓人馬上就能學會的小技巧。

每一個技巧都能完成大多數開發人員每天需要完成的工作。根據經驗，讀者可能已經知道了其中一些，然而仍會對其他的技巧大吃一驚。

本文將介紹一系列技巧，而這些技巧能將讀者打造為一名更好的開發人員，并增強JavaScript技能。

我們一起來看看吧~

1.對象解構

開發人員一旦了解了對象解構，就可能每天都會用到。

但什么是解構呢？

解構是一個JavaScript表達式，允許將數組、對象、映射和集合中的數據提取到其自己的變量中。它允許您一次從一個或多個對象中提取屬性。

一起看看以下示例，其中有一個用戶對象。如果要將用戶名(name)存儲在變量中，則必須將其賦給新行上的變量。如果想把性別(gender)也存儲在一個變量中，就必須重復上述操作。

const user={
    name: 'Frank',
    age: 23,
    gender: 'M',
    member: false
}const name=user.name
const gender=user.gender

使用解構，就可以通過以下語法直接獲取對象屬性的變量：

const { name, age, gender, member }=user;console.log(name)   // Frank
console.log(age)    // 23
console.log(gender) // M
console.log(member) // false

2.使用設備性能以更好地調試

來源：Pexels

作為一名開發人員，做的最多的事情就是調試。但是調試不僅僅是使用console.log在控制臺打印出一堆日志信息這么簡單。

知道控制臺對象有分析代碼片段性能的好辦法嗎？大多開發人員只知道用標準的console.log方法來調試代碼。

控制臺對象有很多有用的功能。它有一個time和timeEnd函數，可以幫助分析性能。其工作原理非常簡單。

在被測試的代碼前調用console.time函數。此函數有一個參數，接受一個描述被分析內容的字符串。在被測試代碼的末尾，調用console.timeEnd函數。給這個函數與第一個參數相同的字符串。然后，運行代碼所需的時間將會在控制臺中顯示。

console.time('loop')  for (let i=0; i < 10000; i++) {  
    // Do stuff here
}  console.timeEnd('loop')

3. Every和 some函數

Every和some函數并不是為所有開發人員熟知。然而，它們在某些情況下非常有用。先來講講every函數。如果想要知道數組中的所有元素是否都通過了某個測試，那就可以應用此函數。本質上，這是在遍歷數組中的每個元素，并且檢查它們是否屬性都為真。

這聽起來可能有些抽象，所以請看以下示例。并沒有那么復雜。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false

Every函數返回一個布爾值。如果數組中的所有元素都通過了測試，則返回“真”(true)。如果數組中的某個元素未通過測試，則返回“假” (false)。

也可以使用一個匿名函數作為測試函數：

random_numbers.every((number)=>{
    return number > 0
})

some函數與every函數的工作原理幾乎完全相同。兩個函數只有一個主要區別：some函數測試的是數組中是否至少有一個元素通過了測試。

回顧上述實例，如果使用some函數而不是every函數，那么兩個數組都將返回“真”(true)，因為兩個數組都包含一個正數。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true

4.有條件地設置一個變量

有條件地設置一個變量很簡單，而且能使代碼更漂亮。在應用這個技巧的時候并不需要編寫if語句——這是筆者最喜歡的JavaScript技巧之一。

所以要如何有條件地設置一個變量？

const timezone=user.preferred_timezone || 'America/New_York'

上述例子是檢查用戶是否有首選時區。如果用戶有首選時區，則使用該時區。如果用戶沒有首選時區，則使用默認時區，即“美國/紐約”(‘America/New_York’)。

這段代碼看起來比使用if語句要干凈得多。

let timezone='America/New_York'if(user.preferred_timezone) {
    timezone=user.preferred_timezone
}

更簡潔了，不是嗎？

來源：Pexels

5.將值轉換為字符串數組

有時需要將所有的值轉換為字符串數組。例如，當使用Triple equal（===）運算符檢查數組中是否存在某個數字時，可能會出現這種情況。

筆者最近遇到了一個問題，其包含multi-select控件。Select選項的HTML值是字符串而不是整數，而這是有意義的，選定值的數組如下所示：

let selected_values=[ '1', '5','8' ]

問題在于，沒能成功檢查所選值的數組中是否存在某個整數。筆者使用了一個Intersect函數，它使用了triple equals(===)運算符。并且由于‘5’ !==5 ，而必須找到一個解決辦法。

在筆者看來，最漂亮的解決方案是將數組中的所有值都轉換為整數。當筆者進行嘗試時，偶然間發現了一個極其簡單，卻又漂亮的解決辦法。

selected_values=selected_values.map(Number)// [ 1, 5, 8 ]

與將所有值轉換為整數不同，可以通過簡單地更改map函數的參數，將數組中的值轉化為布爾值。

selected_values=selected_values.map(Boolean)

來源：Pexels

美好的未來在召喚你~干巴爹~

留言點贊關注

我們一起分享AI學習與發展的干貨

如轉載，請后臺留言，遵守轉載規范

創建 Web 應用程序時應始終考慮性能。為了幫助你開始，本文列舉了有效提高應用程序性能的 12 種方法。

性能是創建網頁或應用程序時最重要的一個方面。沒有人想要應用程序崩潰或者網頁無法加載，或者用戶的等待時間很長。根據 Kissmetrics，47％的訪問者希望網站在不到 2 秒的時間內加載，如果加載過程需要 3 秒以上，則有 40％的訪問者會離開網站。

考慮到以上這些數字，你在創建 Web 應用程序時應始終考慮性能。為了幫助你開始，以下提供了有效提高應用程序性能的 12 種方法：

1. 在瀏覽器中緩存

要這樣做有兩種選擇。第一種是使用 JavaScript Cache API，我們可以安裝 service worker 來使用它。第二種是使用 HTTP 協議緩存。

訪問某個對象通常要用腳本。通過把重復訪問的對象存儲在用戶定義的變量中，以及在后續對該對象的引用中使用變量，可以立即實現性能的提升。

2. 定義執行的上下文

為了有效地衡量你在程序中加入的任何改進，你必須創建一組定義良好的環境，以便測試代碼的性能。

對所有 Javascript 引擎的所有版本進行性能測試和優化實際上是不可行的。但是，在單一的環境中進行測試并非一個好習慣，因為你可能會得到片面的結果。因此，建立多個定義良好的環境并測試代碼是否有效非常重要。

3. 刪除未使用的 JavaScript

此步驟不僅會縮短傳輸時間，還會縮短瀏覽器分析和編譯代碼所需的時間。為此，你必須考慮以下幾點：

如果你檢測到一個用戶未使用的功能，最好刪除所有與之相關的 JavaScript 代碼，這樣網站的加載速度會更快，用戶也會有更好的體驗。
還有可能，你錯誤地加入了一個并不需要的庫，或者你有依賴項，這些依賴項提供的功能在所有瀏覽器中原本就有，那么你無需再增加多余的代碼。

4. 避免使用太多內存

你應該始終給內存加一條限制，那就是只有絕對必須的內容才能使用內存，因為你無法知道運行應用程序的設備到底需要多少內存。只要你的代碼要求瀏覽器保留新的內存，瀏覽器的垃圾收集器就會被執行，并停止 JavaScript 的運行。如果經常發生這種情況，頁面將變慢。

5. 推遲不必要的 JS 加載

用戶希望頁面快速加載，但并非所有函數都需要在頁面的初始加載時就可用。如果用戶必須執行某個操作才能執行某個函數（例如，通過單擊某個元素或更改選項卡），那么你可以將該函數的加載推遲到初始頁面加載之后。

通過這種方式，你可以避免加載和編譯那些會延遲頁面初始顯示的 JavaScript 代碼。頁面完全加載后，我們可以再開始加載這些功能，以便它們在用戶開始交互時立即可用。在RAIL 模型中，Google 建議將此延遲加載以 50 毫秒為單位進行，這樣就不會影響用戶與頁面的交互。

6. 避免內存泄漏

點擊“了解更多”閱讀原文

在線咨詢

上一篇：ASP.NET Web Forms-HTML 頁面
下一篇：把HTML轉成PDF的4個方案及實現方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用好這20個css技巧快速提升你的CSS技能

前言

1、使用CSS重置（reset）

2、繼承盒模型

3、使用flexbox布局來避免margin的問題 （Get Rid of Margin hacks width Flexbox）

4、使用:not() 解決lists邊框的問題

5、body上加入line-height樣式

6、垂直居中任何元素 (vertical-center anything)

7、使用SVG icons

8、使用 “OWL選擇器”

9、一致的垂直結構（Consistent Vertical Rhythm）

10、對更漂亮的換行文本使用 box-decoration-break

11、等寬表格單元格

12、強制使用屬性選擇器顯示空鏈接

13、樣式“默認”鏈接

14、比率框

15、風格破碎的圖像

16、使用rem進行全局大小調整；使用em進行局部大小調整

17、隱藏未靜音的自動播放視頻

18、靈活運用root類型

19、在表單元素上設置字體大小，以獲得更好的移動體驗

20、CSS變量

公告

1.對象解構

2.使用設備性能以更好地調試

3. Every和 some函數

4.有條件地設置一個變量

5.將值轉換為字符串數組

1. 在瀏覽器中緩存

2. 定義執行的上下文

3. 刪除未使用的 JavaScript

4. 避免使用太多內存

5. 推遲不必要的 JS 加載

6. 避免內存泄漏

您的項目需求

3、使用flexbox布局來避免margin的問題（Get Rid of Margin hacks width Flexbox）