CSS-命名总结

CSS-命名总结

CSS书写命名总结

一、命名原则:

不要通过视觉外观来给元素命名，而是根据功能给元素命名。

ID具有唯一性，Class具有可重复性。让所有的Class元素都成为外围ID元素的子级或孙级。

网页模块化，利于网站代码的控制，维护和修改

a.外围架构使用ID控制

b.内部结构使用Class控制

二、命名规则:

 

a.骆驼命名法

指混合使用大小写字母来构成变量和函数的名字,首写字母小写

myData

b.帕斯卡命名法

指混合使用大小写字母来构成变量和函数的名字,首写字母大写

MyData

c.匈牙利命名法

标识符的名字以一个或者多个小写字母开头作为前缀，标识出变量的作用域，类型等。前缀之后的是首字母大写的一个单词或多个单词组合或者符号，该单词要指明变量的用途。

txtMyData

d.下划线或中划线命名法

树状结构的命名

层叠式命名

每一个逻辑断点都有一个下划线或中划线来标记

DWMenu_Insert_Animals

DWMenu_Insert_Animals_Dog

DWMenu_Insert_Animals_Cat

DWMenu_Insert_Animals_Monkey

DWMenu-Insert-Animals

DWMenu-Insert-Animals-Dog

DWMenu-Insert-Animals-Cat

DWMenu-Insert-Animals-Monkey

txt-MyData

e.常量命名

SQL_SELECT_CATEGORIES

 

 

三、CSS推荐命名方式

[模块前缀(模块标识|区域标识)]+[功能标识]+[模块后缀(状态|位置|[A-Z]:多风格标识|[0-9]:行标识|[a-z]:列标识)]

wrapperDetails

detailsLeft

detailsRight

section01

section02

section03

sectionYoulike

sectionTel

sectionNews

 

list01

list02

list03

listPro

listArt

listMedia

itemArticle

itemMedia

item

bgBody

btnAdd

btnDel

btnSubmit

btnSubmit01

btnSubmit02

btnSubmit03

 

 

四、常用的样式文件命名

全局样式表:base.css

页面级别样式表:style.css

五、

1、页面框架:

页面主体:container|icontainer

页眉:header

页中:pagebody

侧栏:aside|sidebar

正文:content

页脚:footer

版块:section

行:sectionR|column

栏:sectionC|row

article

dialog

figure

details

datagrid

nav

menu

command

video

audio

2、结构元素

Wrapper

外框:wrapper

外框内套:iWrapper

导航:menu

标签页:tab

容器:pannel

列表:list

内容的内套:inner

上:[top]-[T]

中:[middle]-[M]

下:[bottom]-[B]

左:[left]-[L]

中:[center]-[C]

右:[right]-[R]

多行多列:[part]-[P]

3、模块item

 

元素选择:

一行多列:li + 属性命名   list控制

一行两列和多行一列:dl dt dd + 属性命名 list控制

多行多列:div          item控制

三种状态:[A][B][C][on]

Layout-版式:

上:[top]-[T]-[IT]

中:[middle]-[M]-[IM]

下:[bottom]-[B]-[IB]

左:[left]-[L]-[IL]

中:[center]-[C]-[IC]

右:[right]-[R]-[IR]

多行多列:-[part]-[P]

Property-属性命名:

Profile-色彩|背景

六、网站常用模块中英文对照表

版权:copyright

导航:nav

顶导航:topNav

主导航:mainNav

子导航:subNav

用户导航:userNav

菜单:menu

主菜单:mainMenu

子菜单:subMenu

右键菜单:contentMenu

快捷菜单:shortcutMenu

搜索:search

登录:login

登录条:loginbar

功能区:shop

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

友情链接:friendlink

网站导航 Site Map

公司简介 Profile or Company

公司设备 Equipment Equipment

公司荣誉 Glories Glories

企业文化 Culture Culture

产品展示 Product Product

资质认证 Quality Certification

企业规模 Scale Scale

营销网络 Sales Network

组织机构 organization organization

合作加盟 Join In Cooperation

技术力量 Technology Technology

经理致辞 Manager`s oration

发展历程 Development History

工程案例 Engineering Projects

业务范围 Business Scope

分支机构 Branches

供求信息 Supply & Demand

经营理念 Operation Principle

产品销售 Sales Sales

联系我们 Contact Us Contact Us

信息发布 Information Information

返回首页 Homepage Homepage

产品定购 order order

分类浏览 Browse By Category

电子商务 E-business

公司实力 Strength Strength

版权所有 Copy Right

友情连结 Hot Link

应用领域 Application Fields

人力资源 Human Resource Hr

领导致辞 Leader`s oration

企业资质 Enterprise Qualification

行业新闻 Trade News

行业动态 Trends

客户留言 Customer Message

客户服务 Customer Service

新闻动态 News & Trends

公司名称 Company Name

销售热线 Sales Hot-Line

联系人 Contact Person

您的要求 Your Requirements

建设中 In Construction

证书 Certificate Certificate

地址 ADD Add

邮编 Postal Code Zipcode

电话 TEL Tel

传真 FAX Fax

产品名称 Product Name

产品说明 Description Description

价格 Price

品牌 Brand

规格 Specification

尺寸 Size

生产厂家 Manufacuturer Manufacturer

型号 Model

产品标号 Item No.

技术指标 Technique Data

产品描述 Description

产地 Production Place

销售信息 Sales Information

用途 Application

论坛 Forum

在线订购 On-line order

招商 Enterprise-establishing

 

招标 Bid Inviting

综述 General

业绩 Achievements

招聘 Join Us

求贤纳士 Join Us

大事 Great Event

动态 Trends

服务 Service

投资 Investment

行业 Industry

规划 Programming

环境 Environment

发送 Delivery

提交 Submit

重写 Reset

登录 Enter

注册 Login

社区 Community

业务介绍 Business Introduction

在线调查 Online Inquiry Inquiry

下载中心 Download

会员登陆 Member Entrance

意见反馈 Feedback

常见问题 FAQ

中心概况 General Profile

教育培训 Education & Training

游乐园 Amusement Park

在线交流 Online Communication

专题报道 Special Report