前端CSS规范整理 命名规范的整理

运用有含义的或通用的ID和class命名：ID和class的命名应反映该元素的功用或运用通用称号，而不要用笼统的不流畅的命名。反映元素的运用意图是选；运用通用称号代表该元素不表特定含义，与其同级元素无异，通常是用于辅佐命名；运用功用性或通用的称号能够更适用于文档或模版改变的状况。
/* 不引荐: 无含义 */ #yee-1901 {}
/* 不引荐: 与款式有关 */ .button-green {}.clear {}
/* 引荐: 特别性 */ #gallery {}#login {}.video {}
/* 引荐: 通用性 */ .aux {}.alt {}
常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等
ID和class命名越简略越好，只需满意表达寓意。这样既有助于知道，也能进步代码功率。
/* 不引荐 */ #navigation {}.atr {}
/* 引荐 */ #nav {}.author {}
类型选择器防止一起运用标签、ID和class作为定位一个元素选择器；从功用上思考也应尽量削减选择器的层级。
/* 不引荐 */ul#example {}div.error {}
/* 引荐 */#example {}.error {}
命名时需求注意的点：
规矩命名中，一概选用小写加中划线的办法，不答应运用大写字母或 _
命名防止运用中文拼音，大概选用更简明有语义的英文单词进行组合
命名注意缩写，可是不能盲目缩写，详细请拜见常用的CSS命名规矩
不答应通过1、2、3等序号进行命名
防止class与id重名
id用于标识模块或页面的某一个父容器区域，称号有必要仅有，不要随意新建id
class用于标识某一个类型的方针，命名有必要要言不烦。
尽可能进步代码模块的复用，款式尽量用组合的办法
规矩称号中不大概包括色彩（red/blue）、定位（left/right）等与详细显现作用有关的信息。大概用含义命名，而不是款式显现成果命名。
1、常用id的命名：
(1)页面规划
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
节目：column
页面外围操控全体规划宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功用
象征：logo
广告：banner
登入：login
登录条：loginbar
注册：regsiter
查找：search
功用区：shop
标题：title
参加：joinus
状况：status
按钮：btn
翻滚：scroll
标签页：tab
文章列表：list
提示信息：msg
当时的: current
小窍门：tips
图标: icon
注释：note
攻略：guild
效劳：service
热门：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情连接：link
版权：copyright
2、常用class的命名：
(1)色彩:运用色彩的称号或许16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体巨细,直接运用”font+字体巨细”作为称号,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐款式,运用对齐方针的英文称号,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏款式,运用”种类+功用”的办法命名,如
.barnews { }
.barproduct { } 

当前标题：前端CSS规范整理 命名规范的整理
文章路径：https://www.cdcxhl.com/news9/167259.html

成都网站建设公司_创新互联，为您提供建站公司、网站设计公司、域名注册、静态网站、做网站、电子商务

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联