Web前端命名规范


基本单词

html英文释译:

title 标题

body  身体

list  列表

style 样式

image 图像

source资源

width  宽度

height 高度

line 行

link  链接

italic 斜体

bold  加粗

input 输入

under 下面的

top  顶部

CSS 英文释译:

font  字体

size  大小

text  文本

align 对齐

decoration 修饰

line  线

through 穿过

indent 缩进

italic 斜体

bold   加粗

weight 加重

width 宽

height 高

background 背景

repeat 重复

position 位置

display 显示类型

visibility 显示可见

hidden隐藏

visible显示

overflow 溢出

list列表

style样式

border 边框

line-height行高

margin  边界

padding 填充

normal  正常

CSS命名规范

一、页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

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

左右中:left right center

二、导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

三、功能

标志: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

友情链接:friendlink

版权:copyright

四、颜色

使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

五、字体大小

直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

六、对齐样式

使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

七、标题栏样式

使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

八、注意事项

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词.

九、样式文件命名

主要的 master.css

模块 module.css

基本共用 base.css

布局,版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

口令

1、类型

font-famly  字体

font-size    字体大小

font-style    字体样式

italic         斜体

oblique      偏斜体

line-height    行间距/行高

font-weight    字体粗细

font-variant    字体变形

small-caps  小型大写字母

text-transform 大小写

capitalize     首字母大写

uppercase     大写字母

lowercase      小写字母

text-decoration文本修饰

underline下划线

overline上划线

line-through删除线

blink    闪烁

none无

color颜色

2、背景

background-color背景颜色

background-image背景图片

background-repeat背景重复

backgrount-attachment  附件

fixed    固定的

scroll    滚动  

background-position(X)背景水平位置

background-position(Y)背景垂直位置

center居中对齐

left  左对齐

right  右对齐

3、区块

word-spacing单词间距

letter-spacing字母间距

vertical-align  垂直对齐

baseline       基线

sub下标

super上标

top   顶部

text-top   文本顶对齐

middle     中线对齐

bottom     底部

text-bottom  文本底对齐

text-align文本对齐

text-indent文本缩进

white-space   空格

pre      保留

nowrap     不换行

display显示

normal正常

inline内嵌

block块

list-item    列表项

run-in      追加部分

inline-block内联块

compact     紧凑

marker       标记

table         表格

inline-table    内嵌表格

table-row-group     表格行组

table-header-group    表格标题组

table-footer-group      表格注脚组

table-row             表格行

table-column-group    表格列组

table-column          表格列

table-cell               表格单元格

table-caption           表格标题

inherit                  继承

4、方框

width宽度

height高度

float浮动

clear清楚

padding填充

margin边界

right右

left左

top上

bottom下

5、边框

style样式

dotted    点划线

dashed虚线

solid实线

double    双线

groove     槽状

ridge      脊状

inset       凹陷

outset      突出

width宽度

color颜色

6、列表

list-style-type     类型

disc           圆点

circle          圆圈

square               方块

decimal              数字

lower-roman          小写罗马数字

upper-roman         大写罗马数字

lower-alpha           小写字母

upper-alpha          大写字母

list-style-image      项目符号图像

list-style-position        位置

inside                  内

outside                外     

7、定位

position位置

absolute绝对

fixed   固定

relative相对

static   静态

visibility显示

inherit     继承

visible可见

hidden隐藏

width宽度

z-index   Z轴

height高度

overflow溢出

scroll     滚动

placement   定位

clip       剪辑

8、扩展

page-break-before     之前

page-break-after        之后

auto自动

always                   总是

cursor                    光标

filter                      过滤器

letter-spacing             字符间距

分享到