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

CSS模塊化:Normalize.css和LESS

移動(dòng)開(kāi)發(fā)
HTML5 Boilerplate選擇Normalize.css重置CSS。如果項(xiàng)目計(jì)劃引入Twitter Bootstrap、YUI 3這些前端框架的話則可以移除,因?yàn)檫@些框架已經(jīng)內(nèi)置了Normalize.css。在復(fù)雜應(yīng)用中,如果還手寫CSS的話將是一件痛苦的事情,大量的class前綴,復(fù)用樣式需要來(lái)回copy等等。為了更好的擴(kuò)展性,這里建議在項(xiàng)目中引入LESS或Sass。可以為CSS添加一些更像是編程語(yǔ)言的特性。這對(duì)于提高開(kāi)發(fā)效率是效果非常明顯的。

使用Normalize.css重置默認(rèn)樣式

CSS重置有助于根據(jù)所有設(shè)置的樣式建立一個(gè)基準(zhǔn)樣式。樣式重置有效重寫了瀏覽器某些元素(在瀏覽器里有很大的不同)默認(rèn)的樣式。

盡管CSS resets在過(guò)去的幾年里很受歡迎,但是,很多網(wǎng)站至今也沒(méi)有使用,這些網(wǎng)站CSS的可擴(kuò)展性因css resets會(huì)有很大的困難。

大多數(shù)人推薦使用normalize.css重置默認(rèn)樣式,而不是使用由Eric Meyer寫的非常流行的CSS Reset或者自己寫的Reset。Normalize.css給所有瀏覽器的元素設(shè)置了一個(gè)共同的樣式,而不是重置了這些元素的基本樣式??梢詤⒖?a target="_blank">github上normlize.css項(xiàng)目,它具有以下優(yōu)點(diǎn),不僅僅是CSS樣式重置:

  • 不像其他CSS resets,normalize.css保存了有用的默認(rèn)設(shè)置
  • 大范圍的規(guī)范了HTML元素樣式
  • 糾正了瀏覽器間的一些bug及不一樣的表現(xiàn)形式
  • 精心的改進(jìn)提高了可用性
  • 使用詳細(xì)的注釋解釋了代碼的作用

使用normalize.css替代一個(gè)標(biāo)準(zhǔn)的reset會(huì)使你編寫正確的代碼,在重新設(shè)置基本樣式上節(jié)省大量的時(shí)間。

使用LESS生成CSS

在復(fù)雜應(yīng)用中,如果還手寫CSS的話將是一件痛苦的事情,大量的class前綴,復(fù)用樣式需要來(lái)回copy等等。為了更好的擴(kuò)展性,這里建議在項(xiàng)目中引入LESSSass。這代表著:

  • 支持變量與簡(jiǎn)單運(yùn)算
  • 支持CSS片段復(fù)用
  • class/id樣式嵌套

等一些更像是編程語(yǔ)言的特性。這對(duì)于提高開(kāi)發(fā)效率是效果非常明顯的。

以LESS為例,簡(jiǎn)單介紹一下LESS在Windows下如何應(yīng)用到這個(gè)項(xiàng)目中:

  1. 下載Nodejs并安裝,nodejs會(huì)自動(dòng)將自己加入系統(tǒng)路徑。
  2. 在cmd運(yùn)行 npm install -g less
  3. 然后就可以通過(guò)lessc指令將less源文件編譯為css lessc avnpc.less avnpc.css
  4. 如果不使用nodeJs作為后端,最好在寫LESS時(shí)采用watch模式,每次保存自動(dòng)編譯為css。這里需要安裝一個(gè)輔助模塊recess: npm install -g recess 然后運(yùn)行watch recess avnpc.less:avnpc.css --watch

更多的LESS使用教學(xué)文章,可以下面兩篇文章:

LESS介紹及其與Sass的差異

初步認(rèn)識(shí) LESS

責(zé)任編輯:徐川 來(lái)源: 51CTO整理
相關(guān)推薦

2022-09-02 08:00:00

CSS開(kāi)發(fā)框架

2011-01-11 13:40:44

webcssdiv

2016-12-14 14:50:26

CSS預(yù)處理語(yǔ)言模塊化實(shí)踐

2021-12-28 14:10:41

開(kāi)發(fā)技能代碼

2021-01-13 08:06:50

SassFacebook Less

2019-08-28 16:18:39

JavaScriptJS前端

2010-08-02 08:54:53

Flex模塊化

2017-04-10 14:23:01

typescriptjavascriptwebpack

2013-08-20 15:31:18

前端模塊化

2017-05-18 10:23:55

模塊化開(kāi)發(fā)RequireJsJavascript

2020-09-17 10:30:21

前端模塊化組件

2015-10-10 11:29:45

Java模塊化系統(tǒng)初探

2020-09-18 09:02:32

前端模塊化

2022-03-11 13:01:27

前端模塊

2021-06-10 18:40:32

ES 標(biāo)準(zhǔn)模塊化

2021-12-02 05:57:04

模塊化UPS電源

2021-12-24 07:10:36

架構(gòu)分層模塊化

2017-03-06 17:56:20

webpack管理多頁(yè)應(yīng)用

2018-03-21 21:31:28

Java9編程Java

2022-09-05 09:01:13

前端模塊化
點(diǎn)贊
收藏

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