DIV+CSS命名規範大全

2022-01-02 信獅職業培訓學校

我們在開發CSS+DIV網頁的時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什麼地方該如何命名，怎樣命名才好。

網頁製作中規範使用DIV+CSS命名規則，可以改善優化功效，特別是在團隊合作的時候可以明顯的提高合作的製作效率。

今天我們就來看一下

DIV+CSS的規範命名


所有的命名最好都小寫

屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss",id="divcss"

每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整

空元素要有結束的tag或於開始的tag後加上"/"

表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等

<h1>到<h5>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜尋引擎的查詢

給每一個表格和表單加上一個唯一的、結構標記id

給圖片加上alt標籤

儘量使用英文命名原則

儘量不縮寫，除非一看就明白的單詞

外套 wrap ---用於最外層

頭部 header -用於頭部

主要內容 main ---用於主體內容（中部）

左側 main-left ---左側布局

右側 main-right -右側布局

導航條 nav --網頁菜單導航條

內容 content 用於網頁中部主體

底部 footer --用於底部

網頁公共命名

CSS樣式命名

說明

#wrapper

頁面外圍控制整體布局寬度

#container或#content

容器,用於最外層

#layout

布局

#head, #header

頁頭部分

#foot, #footer

頁腳部分

#nav

主導航

#subnav

二級導航

#menu

菜單

#submenu

子菜單

#sideBar

側欄

#sidebar_a,   #sidebar_b

左邊欄或右邊欄

#main

頁面主體

#tag

標籤

#msg #message

提示信息

#tips

小技巧

#vote

投票

#friendlink

友情連接

#title

標題

#summary

摘要

#loginbar

登錄條

#searchInput

搜索輸入框

#hot

熱門熱點

#search

搜索

#search_output

搜索輸出和搜索結果相似

#searchBar

搜索條

#search_results

搜索結果

#copyright

版權資訊

#branding

商標

#logo

網站LOGO標誌

#siteinfo

網站信息

#siteinfoLegal

法律聲明

#siteinfoCredits

信譽

#joinus

加入我們

#partner

合作夥伴

#service

服務

#regsiter

註冊

arr/arrow

箭頭

#guild

指南

#sitemap

網站地圖

#list

列表

#homepage

首頁

#subpage

二級頁面子頁面

#tool, #toolbar

工具條

#drop

下拉

#dorpmenu

下拉菜單

#status

狀態

#scroll

滾動

.tab

標籤頁

.left .right   .center

居左、中、右

.news

新聞

.download

下載

.banner

廣告條(頂部廣告條)

電子貿易相關


CSS樣式命名

說明


.products

產品


.products_prices

產品價格


.products_description

產品描述


.products_review

產品評論


.editor_review

編輯評論


.news_release

最新產品


.publisher

生產商


.screenshot

縮略圖


.faqs

常見問題


.keyword

關鍵詞


.blog

博客


.forum

論壇


master.css,style.css

主要的

module.css

模塊

base.css

基本共用

layout.css

布局，版面

themes.css

主題

columns.css

專欄

font.css

文字、字體

forms.css

表單

mend.css

補丁

print.css

列印

1. CSS命名其它說明：

DIV+CSS命名小結：無論是使用「.」（小寫句號）選擇符號開頭命名，還是使用「#」(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用「#」(井號)選擇符號開頭命名，其它都用「.」（小寫句號）選擇符號開頭命名，同時考慮命名的CSS選擇器在HTML中重複使用調用。

通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導航條)、menu(菜單)、title(欄目標題、一般配合h1\h2\h3\h4標籤使用)、content (內容區)、footer(頁腳、底部)、logo（標誌、可以配合h1標籤使用）、banner（廣告條，一般在頂部）、copyRight（版權）。其它可根據自己需要選擇性使用。

2. CSS樣式文件命名如下：

主要的--master.css

布局，版面---layout.css

專欄 ----columns.css

文字font.css

列印樣式-print.css

主題 themes.css

以上為DIV+CSS的命名規則總結，相信通過規範的CSS命名給你以後網站網頁的維護帶來方便。


長按二維碼，識別、關注

99.9%的同學都不知道原來可以玩

相關焦點

  • HTML DIV+CSS 命名規範大全
    網頁製作中規範使用DIV+CSS命名規則，可以改善優化功效特別是團隊合作時候可以提供合作製作效率，具體DIV CSS命名規則CSS命名大全內容篇。常用DIV+CSS命名大全集合，即CSS命名規則我們開發CSS+DIV網頁（Xhtml）時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什麼地方該如何命名，怎樣命名才是好的方法。
  • Div+CSS 基礎入門教程
  • div和css
    比如字的屬性可以寫成函數形式，字（五號，宋體，黃色，。。。）等等，屬性是有窮的，也就是屬性的參數是有窮的。屬性的參數組成大部分都是由格式組成的。設置格式就是設置參數，格式是參數的一部分。格式是對象的一種參數設置。樣式與格式的區別，樣式是格式的組合體。比如word裡面，有一種默認的樣式。
  • 【原創】 實戰div css網頁布局
    5、通過css控制面板，對每個層進行定義，如它們的寬、高，邊框、背景、填充、邊界等。定義的時候，必須定義左浮動。 在我們通過css來定義div的時候，這個地方一定要對應。 比如要定義這個<div id="logo"></div>我們點擊右上角css樣式屬性裡的「+」圖標（如下圖）
  • 教程 | Web前端教程2:CSS+DIV頁面布局
    （2）使用 <div> 元素的 HTML 布局注釋：<div> 元素常用作布局工具，因為能夠輕鬆地通過 CSS 對其進行定位。參考3school有關div內容學習div+css界面布局得知識。
  • CSS 樣式書寫規範
    我覺得 CSS 代碼規範還是有存在的必要的，尤其是在團隊配合，多人協作下，規範就顯得尤為重要。本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規範，並不希望大家完全採用，而是希望可以結合自己的團隊需要，發展出一套適合自己的 CSS 代碼規範。也希望可以有更多的建議，共同的完善。本規範也可以在我的 Github 上看到，歡迎留言或者提 PR。
  • CSS中content屬性的妙用
    --html-->11<div class="container clear">12    <div class="left">左</div>13    <div class="right">右</div>14</div>父元素.container中兩個子元素.left
  • css動畫之@keyframes
  • 20 個讓你效率更高的 CSS 代碼技巧
    例如：HTML<div class="square red"></div><div class="square blue"></div>CSS.square { width: 80px; height: 80px;}.red { background-color: #F44336;
  • 50道CSS基礎面試題(附答案)
    6 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？例子：<div class="aside"></div><div class="text">    <div class="main"></div></div><!
  • vue+swiper+animate.css製作全屏滾動H5
    npm install swiper@3 npm install animate.css 2.在main.js中引入animate.cssimport Vue from "vue"import App from ".
  • 一批腦洞大開的CSS特效
    其實很早就想寫一篇關於 css 的文章了。（拖延症，一直沒寫。。。）css 發展到今天已經越來越強大了。其語法的日新月異，讓很多以前完成不了的事情，現在可以非常輕鬆的做到。"> <div class="j"></div> <div class="j"></div></div>css(scss)body { background: #000; overflow: hidden;
  • 你不知道的 CSS
    用 ~ / + 兄弟選擇器來美化表單元素css(3)中選擇器眾多，具體可參考CSS 選擇器參考手冊。不知什麼原因，在很多項目中，實現諸如單選，複選等（類似）功能（包括如圖標籤選擇器）時，為了美化其樣式，往往使用JS去實現，實際上，利用 label標籤和css的兄弟選擇器完全可以實現類似效果。其兼容性也並不差，至少兼容 IE8及其以上瀏覽器了。
  • css動畫創建及使用
    class="shape"></div>下面是菜鳥教程CSS3動畫頁面的CSS3動畫：<style type="text/css">#animated_div {: animated_div 5s; -webkit-animation: animated_div 5s; -o-animation: animated_div 5s; animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count
  • 49期:利用clip-path製作css動畫
    其代碼是下面這樣：<div class="wrap left-to-right">    <div class="shard-wrap">        <div class="shard"></div>    </div>    <div class="shard-wrap
  • 前端進階:css必知的幾個底層知識和技巧
    在介紹完問題學習法之後，進入我們今天的主題，接下來我會介紹css的一些底層的知識的現象，藉此來讓大家對css有更深入的理解。2.對於img元素，如果有css尺寸，則最終尺寸由css尺寸決定(css尺寸 > html尺寸 > 固有尺寸)3.當圖片的src屬性預設時，圖片不會有任何請求，是最高效的實現方式，如下展示的是使用此方式的圖片佔位代碼(對於firefox瀏覽器，src預設的img是一個普通的內聯元素，寬高設置無效)：
  • 可愛極了,用 CSS 實現一個超可愛的貓咪!
    介紹本期我們通過vite+scss去完成一個橘貓心情變化的創意動畫，這裡的邏輯我們將不使用任何js代碼，僅依靠css來完成，所以，通過本期的動畫，你可以到一些css動畫和繪製的一些技巧。廢話不多說，先康康效果~VID_20211030_184225.gif還比較可愛吧。
  • 新年煙花/表白/拜年/情人節/ html+css+js 放一場浪漫煙花秀(含音樂/定製相片)程式設計師表白必備煙花
    </div> </div> </div> <div class="btn-groups"> <div class="heart-btn"> <div id="yes" class="btn btn-a"
  • CSS各種姿勢實現Sticky Footer
    所以給footer使用flexbox吧，讓它的高度可以變大變小變漂亮~（≧∇≦）<body>  <div class="content">    content  </div>  <footer class="footer"></footer><
  • 純CSS實現常見的UI效果
    舉個例子，倘若你想創建多個半徑不同的同心圓，這個Mixin將會很有幫助aqua.cssaqua.css是筆者開源的一個優雅的、輕量級的CSS框架。裡面有很多常用的組件以及常用的樣式類，用它來寫CSS體驗將會非常爽在codepen上，筆者準備了一個aqua.css模版，大家可以用它來進行CSS的創作常見UI效果條紋效果