CSS 命名规范参考及书写注意事项

CSS书写顺序

/*显示属性*/

display

position

float

clear

cursor

…

/*盒模型*/

margin

padding

width

height

/*排版*/

vertical-align

white-space

text-decoration

text-align

…

/*文字*/

color

font

content

/*边框背景为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便，哈哈。*/

border

background

}

下表顺序为从上到下，从左到右：

========================

display || visibility

list-style : list-style-type || list-style-position || list-style-image

position

top || right || bottom || left

z-index

clear

float

width

max-width || min-width

height

max-height || min-height

overflow || clip

margin : margin-top || margin-right || margin-bottom || margin-left

padding : padding-top || padding-right || padding-bottom || padding-left

outline : outline-color || outline-style || outline-width

border

background : background-color || background-image || background-repeat || background-attachment || background-position

color

font : font-style || font-variant || font-weight || font-size || line-height || font-family

text-overflow

text-align

text-indent

line-height

white-space

vertical-align

cursor

CSS命名规则：

一．文件命名规范

全局样式：global.css；

　　框架布局：layout.css；

　　字体样式：font.css；

　　链接样式：link.css；

　　打印样式：print.css；

主要的 master.css

专栏 columns.css

主题 themes.css

主要的 master.css

模块 module.css

基本共用 base.css

表单 forms.css

补丁 mend.css

　二．页面结构

容器: container

页头：header

内容：content

页面主体：main

页尾：footer

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

　三．导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

摘要: summary

四．功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

Container div	#container	容器
Layout	#layout	布局
Header or banner div	#head, #header	页头部分
Footer div	#foot, #footer	页脚部分
Navigation list	#nav	主导航
Sub-navigation list	#subNav	二级导航
Menu	#menu	菜单
Sub Menu	#submenu	子菜单
Left or right side columns	#sidebar_a, #sidebar_b	左边栏或右边栏
Main div	#main	页面主体
Tag	#tag	标签
Message	#msg #message	提示信息
Tips	#tips	小技巧
Vote	#vote	投票
Friend Link	#friendlink	友情连接
Title	#title	标题
Summary	#summary	摘要
Search input	#searchInput	搜索输入框
Search output	#search_output	搜索输出和搜索结果相似
Search	#search	搜索
Search bar	#searchBar	搜索条
Search results	#search_results	搜索结果
Copyright information	#copyright	版权信息
brand	#branding	商标
branding-logo	#logo	LOGO
Site information	#siteinfo	网站信息
Copyright information etc.	#siteinfoLegal	法律声明
Designer or other credits	#siteinfoCredits	信誉
Join us	#joinus	加入我们
Partnership opportunities	#partner	合作伙伴
Services	#service	服务
Regsiter	#regsiter	注册
Arrow	arr/arrow	箭头
Little	#little	标题
Website map	#sitemap	网站地图
List	#list	列表
Home page	#homepage	首页
Sub page	subpage	二级页面子页面
Toolbar	#tool, #toolbar	工具条
Next pulls	#drop	下拉
Next pulls menu	#dorpmenu	下拉菜单
Status	#status	状态
Container div	#container	容器
Header or banner div	#header	页头部分
Main or global navigation div	#mainNav	主导航
Menu	#menu	菜单
Sub Menu	#submenu	子菜单
Left or right side columns	#sidebarA, #sidebarB	左边栏或右边栏
Main div	#main	页面主体
Content div	#content	内容部分
The main content area	#contentMain	主要内容区域
Footer div	#footer	页脚部分
Tag	#tag	标签
Message	#msg #message	提示信息
Tips	#tips	小技巧
Vote	#vote	投票
Friend Link	#friendlink	友情连接
Title	#title	标题
Summary	#summary	摘要
Sub-navigation list	#subNav	二级导航
Search input	#searchInput	搜索输入框
Search output	#searchOutput	搜索输出和搜索结果相似
Search	#search	搜索
Search results	#searchResults	搜索结果
Copyright information	#copyright	版权信息
brand	#branding	商标
branding-logo	#brandingLogo	LOGO
Site information	#siteinfo	网站信息
Copyright information etc.	#siteinfoLegal	法律声明
Designer or other credits	#siteinfoCredits	信誉
Join us	#joinus	加入我们

CSS 命名规范参考及书写注意事项相关推荐

html语言书写注意事项,CSS命名规范参考及书写注意事项
CSS书写顺序 *{ /*显示属性*/ display position float clear cursor - /*盒模型*/ margin padding width height /*排版*/ ...
CSS命名规范参考及书写注意事项(下)
注意事项: 1. id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:newRelease(最新产品/new+Release) 常用类的命名应尽量以常见英 ...
css命名规范和书写规范
1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(f ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
CSS命名规则--参考表
CSS命名规则--参考表 **************************************************** CSS命名规则 ************************** ...
关于css命名规范一些小技巧或经验
前言通过前边自己进行了一周自适应招聘官方网站PC端和移动端的开发,自己在开发过程中也遇到了一些css命名规范的令人头疼的事情,自己回过头来看自身的代码认真思考并总结了一些不成熟的经验,下文将向大家介 ...
我认为最节省时间的CSS命名规范
CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...
About EDW 命名规范参考
数据仓库模型命名规范参考: 整体命名格式 [库名/层名][主题/DBNAME][具体表名]_[模型更新周期][全量/增量标识] (1)[库名/层名]: stg: 贴源数据表名采用 stg_dbnam ...
前端开发规范（二）——CSS 命名规范
css规范代码规范 1.代码格式化紧凑格式 .jdc{display: block; width: 50px;} 展开格式 .jdc {display: block;width: 50px; } ...

CSS 命名规范参考及书写注意事项

CSS 命名规范参考及书写注意事项相关推荐

最新文章

热门文章