国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端規(guī)范(ES6BEMOOCSSSMACSS)

willin / 423人閱讀

摘要:前端規(guī)范在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。是定義了一種的命名規(guī)范,每個(gè)名稱及其組成部分都是存在一定的含義。

前端規(guī)范

在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。

Javascript

Javascript規(guī)范直接參考airbnb:

ES6 JavaScript Style Guide

ES5 JavaScript Style Guide

React/JSX Style Guide

CSS BEM

Block Element Modifier,它是一種前端命名方法,旨在幫助開發(fā)者實(shí)現(xiàn)模塊化、可復(fù)用、高可維護(hù)性和結(jié)構(gòu)化的CSS代碼。

BEM是定義了一種css class的命名規(guī)范,每個(gè)名稱及其組成部分都是存在一定的含義。

Block Element Modifier
獨(dú)立且有意義的實(shí)體, e.g. header, container, menu, checkbox, etc. Block的一部分且沒有獨(dú)立的意義, e.g. header title, menu item, list item, etc. Blocks或Elements的一種標(biāo)志,可以用它改變其表現(xiàn)形式、行為、狀態(tài). e.g. disabled, checked, fixed, etc.
Naming

由拉丁字母, 數(shù)字, -組成css的單個(gè)名稱.

Block

使用簡潔的前綴名字來命名一個(gè)獨(dú)立且有意義的抽象塊或組件。

e.g.

.block

.header

.site-search

Element

使用__連接符來連接BlockElement

e.g.

.block__element

.header__title

.site-search__field

Modifier

使用--連接符來連接BlockElementModifier

e.g.

.block--modifier

.block__element--modifier

.header--hide

.header__title--color-red

.site-search__field--disabled

實(shí)例

HTML

CSS

.form {
}
.form--theme-xmas {
}
.form--simple {
}
.form__input {
}
.form__submit {
}
.form__submit--disabled {
}
Buttons實(shí)例

HTML



CSS

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}
FAQ

BEM - FAQ

OOCSS

Object Oriented CSS,面向?qū)ο蟮腃SS,旨在編寫高可復(fù)用、低耦合和高擴(kuò)展的CSS代碼。

OOCSS是以面向?qū)ο蟮乃枷肴ザx樣式,將抽象和實(shí)現(xiàn)分離,抽離公共代碼。

區(qū)分結(jié)構(gòu)和樣式

在定義一個(gè)可重用性的組件庫時(shí),我們僅創(chuàng)建基礎(chǔ)的結(jié)構(gòu)(html)和基礎(chǔ)的類名,不應(yīng)該創(chuàng)建類似于border, width, height, background等樣式規(guī)則,這樣使組件庫更靈活和可擴(kuò)展性。組件庫在不同環(huán)境下的樣式所要求不一樣,若未能區(qū)分其結(jié)構(gòu)和樣式,給其添加樣式,會(huì)使其變成一個(gè)特定的組件庫,而難以重用。

e.g.

以下是一個(gè)基礎(chǔ)庫創(chuàng)建的樣式:

.metadata{
  font-size: 1.2em;
  text-align: left;
  margin: 10px 0;
}

若在給其添加更多的樣式:

.metadata{
    font-size: 1.2em;
    margin: 10px 0;
    /*在基礎(chǔ)組件上新加的樣式*/
    width: 500px;
    background-color: #efefef;
    color: #fff;
}

這樣就使前面創(chuàng)建的基礎(chǔ)組件metadata變成了一個(gè)特定的組件了,使其在其他場景下較難復(fù)用。

區(qū)分容器和內(nèi)容

把容器和內(nèi)容獨(dú)立分區(qū),使內(nèi)容能作用于任何容器下。

e.g.

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

上面我們定義了一個(gè)id為sidebarh3的樣式,但是我們發(fā)現(xiàn)在footerh3的樣式也基本一致,僅個(gè)別不一樣,那么我們可能會(huì)這樣寫樣式:

#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

甚至我們可能會(huì)用更糟糕的方式來寫這個(gè)樣式:

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

我們可以看到上面的代碼中出現(xiàn)了不必要的duplicating styles。而OOCSS鼓勵(lì)我們應(yīng)該思考在不同元素中哪些樣式是通用的,然后將這些通用的樣式從模塊、組件、對象等中抽離出來,使其能在任何地方能夠復(fù)用,而不依賴于某個(gè)特定的容器。

.title-heading {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
#footer .title-heading {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}
SMACSS

Scalable and Modular Architecture for CSS,可擴(kuò)展模塊化的CSS,它的核心就是結(jié)構(gòu)化CSS代碼,提出了一種CSS分類規(guī)則,分為五種類型:

Base

Layout

Module

State

Theme

SMACSS定義了一種css文件的組織方式,其橫向的切分,使css文件更具有結(jié)構(gòu)化、高可維護(hù)性。

Base

Base是默認(rèn)的樣式,是對單個(gè)元素選擇器(包括其屬性選擇器,偽類選擇器,孩子/兄弟選擇器)的基礎(chǔ)樣式設(shè)置,例如html, body, input[type=text], a:hover, etc.

e.g.

html, body {
  margin: 0;
  padding: 0;
}

input[type=text] {
  border: 1px solid #999;
}

a {
  color: #039;
}

a:hover {
  color: #03C;
}

CSS Reset/Normalize就是一種Base Rule的應(yīng)用.

Note:

在基礎(chǔ)樣式中不應(yīng)該使用!important

Layout

不明思議,是對頁面布局元素(頁面架構(gòu)中主要和次要的組件)的樣式設(shè)置,例如header, navigation, footer, sidebar, login-form, etc.

e.g.

.header, footer {
  margin: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.navs {
  display: inline-block;
  margin: 0 auto;
}
Modules

對公共組件樣式的設(shè)置,例如dropdown, tabs, carousels, dialogs, etc.

e.g.

.dropdown, .dropdown > ul {
  display: inline-block;
  border: 1px solid #283AE2;
}

.dropdown li:hover {
  background-color: #999;
}

.tabs {
  border: 1px solid #e8e8e8;
}

.tabs > .tab--active {
  border-bottom: none;
  color: #29A288;
}
State

對組件、模塊、元素等表現(xiàn)行為或狀態(tài)的樣式修飾,例如hide, show, is-error, etc.

e.g.

.hide {
  display: none;
}

.show {
  display: block;
}

.is-error {
  color: red;
}
Theme

對頁面整體布局樣式的設(shè)置,可以說是一種皮膚,它可以在特定場景下覆蓋base, layout等的默認(rèn)樣式。

e.g.

.body--theme-sky {
  background: blue url(/static/img/body--theme-sky.png) repeat;
}

.footer--theme-sky {
  background-image: blue url("/static/img/header--theme-sky.png") no-repeat center;
}
Others

SUITCSS

Atomic

Airbnb CSS Style Guide

Web Components

這么多CSS規(guī)范,貌似還是有沖突等問題,咋辦呀?

世上沒有完美方案,只有合適/最佳方案~

讓我門一起期待Web Components到來吧~

資源 在線實(shí)例 源代碼

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115259.html

相關(guān)文章

  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

    摘要:前端規(guī)范在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。是定義了一種的命名規(guī)范,每個(gè)名稱及其組成部分都是存在一定的含義。 前端規(guī)范 在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...

    Object 評論0 收藏0
  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

    摘要:前端規(guī)范在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。是定義了一種的命名規(guī)范,每個(gè)名稱及其組成部分都是存在一定的含義。 前端規(guī)范 在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...

    levy9527 評論0 收藏0
  • 前端規(guī)范(ES6BEMOOCSSSMACSS)

    摘要:前端規(guī)范在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。是定義了一種的命名規(guī)范,每個(gè)名稱及其組成部分都是存在一定的含義。 前端規(guī)范 在實(shí)際開發(fā)中,由于團(tuán)隊(duì)成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...

    xushaojieaaa 評論0 收藏0
  • 前端編碼規(guī)范之:樣式(scss)編碼規(guī)范

    摘要:前端編碼規(guī)范之使用規(guī)范前端編碼規(guī)范之樣式編碼規(guī)范前端編碼規(guī)范之結(jié)構(gòu)規(guī)范前端編碼規(guī)范之最佳實(shí)踐前端編碼規(guī)范之編碼規(guī)范命名的原則是通俗易懂,盡量保持不重復(fù)沖突,盡量不要用。我覺得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式用預(yù)處理器拼接出來的名稱,會(huì)生成。 前端編碼規(guī)范之:Git使用規(guī)范 前端編碼規(guī)范之:樣式(scss)編碼規(guī)范 前端編碼規(guī)范之:HTML結(jié)構(gòu)規(guī)范 前端編碼規(guī)范之:Vue最佳實(shí)踐 前端編碼規(guī)范...

    reclay 評論0 收藏0
  • 前端資源系列(4)-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要:特意對前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯(cuò)誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會(huì)及時(shí)更新,平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<