本文小編為大家詳細(xì)介紹“web前端樣式規(guī)范有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“web前端樣式規(guī)范有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

成都創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元浪卡子做網(wǎng)站,已為上家服務(wù),為浪卡子各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

命名規(guī)范

1.CSS 命名一般采用小寫英文字母或組合命名，單詞以單詞間以"-"分割；英文單詞不縮寫，除非一看就明白的單詞。

2.所有組件中的最外層元素都加一個(gè)以組件名+wrap命名的樣式，如：

orderList組件：

<template>

    <div class="order-list-wrap">

    </div>

</template>

3.class 必須代表相應(yīng)模塊或組件的內(nèi)容或功能，不得以樣式信息進(jìn)行命名，如：

<!-- good -->

<div class="sidebar">

</div>

<!-- bad -->

<div class="left">

</div>

4.css選擇器: 盡量用class選擇器，少用元素選擇器(如：div)

頁面結(jié)構(gòu)命名

wrap：代表整個(gè)頁面，用于最外層

container：一個(gè)整體容器，用于最外層

head,header 頁頭區(qū)域，用于頭部

nav：導(dǎo)航條

content：內(nèi)容，用于網(wǎng)站中部主體

main：網(wǎng)站中的主要區(qū)域，用于中部內(nèi)容。

sidebar：側(cè)欄

footer： 頁腳

導(dǎo)航命名

nav：導(dǎo)航條

topnav：頂部導(dǎo)航

mainnav：主導(dǎo)航

title：標(biāo)題

menu：菜單

submenu：子菜單

drop：下拉

dropmenu：下拉菜單

links：連接菜單

樣式順序規(guī)范

建議相關(guān)的屬性說明放在一組，提高代碼的可讀性。

布局方式、位置、相關(guān)屬性 (position、left、right、top、bottom、z-index)

盒子模型，相關(guān)屬性包括 (display、float、width、height、margin、padding、border、border-radius)

文本排版，相關(guān)屬性包括 (font、color、background、line-height、text-align)

視覺外觀，相關(guān)屬性包括 (color、background、list-style、transform、animation)

由于定義可以從正常的文檔流中移除元素，并且還能覆蓋盒模型相關(guān)的樣式，因此排在首頁。而盒模型決定了組件的尺寸和大小，所以排在第二位。文本和視覺對(duì)元素影響較小，所以放在第三，第四位。示例代碼如下：

.box {

    position: absolute;

    top: 0;

    left: 20%;

    z-index: 99;

    width: 100px;

    height: 100px;

    font-size: 20px;

    color: red;

    background-color: aqua;

}

小數(shù)點(diǎn)和單位

值在 -1 和 1 之間去掉小數(shù)點(diǎn)的 0，如果屬性值為數(shù)字 0，不加任何單位。

.box {

    width: 100px;

    height: 100px;

    margin: 0 10px 20px 0;

    opacity: .5;

}

引號(hào)

屬性選擇器或?qū)傩灾涤秒p引號(hào) ""括起來，而 URL 值 url() 不要使用任何引號(hào)。

.box {

    font-family: "open sans",arial,sans-serif;

    background-image: url(/upload/otherpic53/18093.jpg);

}

空格

在每個(gè)聲明快選擇器與左括號(hào)淺添加一個(gè)空格；

聲明快的右花括號(hào)應(yīng)當(dāng)單獨(dú)成行；

每條聲明語句的；后應(yīng)該插入一個(gè)空格，前面無空格；

.box {

    float: left;

    width: 100px;

    color: #333;

    background-color: #f5f5f5;

    text-align: center;

}

媒體查詢

將媒體查詢放在盡可能相關(guān)規(guī)則的附近，方便日后查閱。

.element { 

}

.element-avatar {

}

@media (min-width: 480px) {

    .element {

    }

    .element-avatar {

    }

}

注釋

在適當(dāng)?shù)奈恢媒o予代碼正確的注釋，讓他人更容易理解。好的代碼注釋傳達(dá)上下文和目標(biāo)

/*

   名稱

   各參數(shù)表示的含義 

*/

.modal-header {

}

全局樣式命名規(guī)范

全局樣式采用十六進(jìn)制進(jìn)行命名，例如：

$color-ffffff: #ffffff;

有透明度的情況，一般在其十六進(jìn)制的后面加多一個(gè)字母 a已視區(qū)別

$color-ffffffa: #ffffff;

如有相同十六進(jìn)制相同，那么在其十六進(jìn)制后面加多一個(gè)其代表的功能

讀到這里，這篇“web前端樣式規(guī)范有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：web前端樣式規(guī)范有哪些
文章路徑：http://www.chinadenli.net/article32/gepopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、云服務(wù)器、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、定制網(wǎng)站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)