css命名规范前端技术须知

按web标准来进行网站设计时,尤其是比较大型的门户站,会发现用的css会特别多,名字随意命名,别人根本看不明白,有时候连自己都会找不着北.看一个人做的网站专业不专业，css的取名也可以反映出来，所以我觉得css命名习惯要做好,我也慢慢的为自己建立一个自己的css命名习惯,总结如下:

1.公共部分和经常要用到的样式

整个容器: container

外围整体布局:wrap

页头部分:head/header/top

内容:content

页脚部分:foot/footer/bottom

栏目:column

主体部分:main

左/中/右三栏main_left/main_mid/main_right或者main_l/main_m/mian/r

侧栏:sidebar

左右两栏sidebar_l/sidebar_r或者leftsidebar/rightsidebar

左/中/右:left/center/right

标签页:tag

首页:homepage

二级页面:subpage

网站标识:logo 商标:brand

主导航:nav/navi

二级导航:subnav

顶部导航:topnav

侧导航:sidenav

左/右导航:leftsidenav/rightsidenav

子导航:subnav

菜单:menu

子菜单:submenu

标题:title

摘要:summary

下拉:drop

下拉菜单:dropmenu

搜索:search

热门搜索:hotsearch

关键字:keyword

搜索输入框:search_input

搜索条:searchbar

搜索结果:search_result

状态:status

登录条:loginbar

忘记密码:foreget_password

会员:member

友情链接:friendlink/link

版权信息:copyright

投票:vote

合作伙伴:partner

服务:servic

指南:guid

网站信息:siteinfo

网站地图:sitemap

网站帮助:sitehelp

法律声明:siteinfolegal

信誉:siteinfocredits

加入我们:joinus

关于我们:aboutus

联系我们:contantus

常见问题:faq

博客:bolg

论坛:forum/bbs

按钮:button/but

功能区:shop

图标:icon

箭头:arrow/arr

提示信息:message/msg

小技巧:tips

注释:note

当前的:current

滚动:scroll

工具条:toolbar/tool

放大:zoom

内容:content

时间:time

日期:data

热点:hot

新闻:news

下载:download

产品:products/pro

缩略图:screenshot

产品价格:pro_prices

产品描述:pro_description

产品评论:pro_review

编辑评论:editor_review

最新产品:news_release/newspro

生产商:publisher

……2,一些常用样式的命名习惯

1)首先定义公共部分的css

如：*{font-size:12px}

body{color:#666}

ulli{list-sytle:none}

form{margin:0;paddingL0}

input{color:#333}

label

a:hover

dl,dd,dt

文章标题按主次大小依次h1,h2,h3,h4,h5,h6

……

2)区域块:box/area

区域块样式类别+box/area,比如新闻区域块:newsbox/newsarea产品区域块:probox/proarea

标题栏:bar

标题栏样式类别+bar,比如新闻标题栏:newsbar产品标题栏:probar

列表:list

列表样式类别+list,比如新闻列表newslist 产品列表:prolist

3)对齐样式,如:

.left{float:left}

.right { float:right}

4)定义行高样式,如定义一个行高为9px的样式:.lineheight9px { lineheight:9px}

5)定义字体大小颜色,如定义一个颜色为红色、14号字体粗体.font12red_b {font:700 14px "SimSun"; color:red}

6)定义按钮样式,but/button+属性或者功能，

如定义一个绿色按钮button_green/but_green

搜索按钮button_search/but_search

7)输入框样式,input+属性或者功能如定义搜索框样式：.input_search { border:1px solid #ccc; height:20px}

8)定义图片样式，img+属性或者功能

如：.img_border{border:1pxsolid#ccc}

.img_float { float:left}

9)清屏:

.clear{clear:both}

.over { overflow:hidden}

……

3,一些注意事项：

1)一律小写字母；

2)尽量用英文；

3)不加中杠，有必要用下化线区分；

4)css注释/*ffff*/注意要加空格，我就碰到过因为不小心没加上空格，在JSP读取下会忽略掉注释下的第一个css

5)css文件最好用utf-8

6)页面居中：margin:0 auto; 居右：margin:0 0 0 auto; 居左：margin:0 auto 0;

4.css文件名命名

1)如果是一个小型网站或一个企业网站，只要一个css文件就可以,我一般取名为:style.css/main.css/layout.css

2)如果是个大型的门户网站，css一般分三个文件区分出来,用的最常用的css和公共部分的css 放在common.css;一些主要的其他css放在 content.css;字体放在font.css

css命名规范前端技术须知

相关推荐