前端命名规范-CSS

一，规则说明

1）、所有的命名最好采用一种命名规范，比方全部小写或者驼峰命名
2）、属性的值一定要用双引号("")括起来，且一定要有值，例如class=“web”,id=“web”
3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4）、表现与结构一定分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
5）、<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
6）、给每一个表格和表单加上一个唯一的、结构标记id，给图片加上alt标签
7）、尽量使用英文命名原则，尽量不缩写，除非一看就明白的单词

二，CSS命名规则参考表

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广告条(顶部广告条)

.products产品

.products_prices产品价格

.products_description产品描述

.products_review产品评论

.editor_review编辑评论

.news_release最新产品

.publisher生产商

.screenshot缩略图

.faqs常见问题

.keyword关键词

.blog博客

.forum论坛

CSS文件命名

说明

master.css,style.css主要的

.module.css模块

base.css基本共用

layout.css布局，版面

themes.css主题

columns.css专栏

font.css文字、字体

forms.css表单

mend.css补丁

print.css打印

三，借助翻译工具

如果遇到不常用的一些名称，可以借助翻译工具进行翻译取其英文命名。平时我用的比较多的就是有道翻译或者谷歌在线翻译。

谷歌在线翻译：http://translate.google.cn/
有道在线翻译：http://fanyi.youdao.com/

我们为了规范命名最好使用英文命名，通常命名与自己布局内容相符。

四，常用CSS代码

css的属性虽然很多，但是我们经常使用的属性，真的不多的，这个也是我自己之前收集整理的一些CSS常用属性代码，希望可以帮助到一些新人，对于老司机就忽略吧。

字体属性：(font)

大小 {
   font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {
   font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高 {
   line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {
   font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {
   font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {
   text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {
   text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体：
(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性：(background)

色彩 {
   background-color: #FFFFFF;}

图片 {
   background-image: url();}

重复 {
   background-repeat: no-repeat;}

滚动 {
   background-attachment: fixed;}(固定) scroll;(滚动)

位置