今天发现了这篇文章,个人觉得非常有用。
一些css常用的规范性命名,这些名字已经成了网页设计规范,在网页设计中我们应该遵循这些规范性的名字。
站点:site
首页:homepage
导航:nav
布局:layout
搜索:search
网页头部:head/header
二级页面/子页面:subpage
登录条:loginbar
侧栏:side/sidebar
广告:banner
子导航:subnav
当前位置导航:crumb
菜单:menu
子菜单:submenu
滚动:scroll
下拉:drop
表单:form
箭头:arr/arrow
下拉菜单:dropmenu
主题/外观:theme
页面主体:main
内容:content
标签页:tab
列表:list
工具条:tool/toolbar
转角/圆角:cor/corner
提示信息:msg
小技巧:tips
标题:title
特别的:spec
资源:source
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
关于我们:aboutus
网站地图:sitemap
合作伙伴:partner
友情链接:friendlink
网页底部:foot/footer
版权:copyright
提交:submit
搜索框:searchbox
文本框:textbox
统计:count
以上结构就可以组合使用,例如:左列标题lefttitle;底部导航footernav
规范不是说要所有人照一个样子来命名css,我们可以根据自己的需要定制命名规则,只要记住命名的规则,就可以根据网站本身的特点来创造具有自己风格的命名方式。
一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class,我们可以使用f即foot的头字母为前缀进行命名,如:
f-blue:表示蓝色字体样式
f-blod:表示粗体字体样式
对于网页中如新闻频道的一些新闻的现实样式,可以用n作为前缀进行样式设计,如:
n-title:新闻标题
n-list:新闻列表
二、我们还可以将代表各个部分的名字组合起来使用,如 ,对于上面的例子,我们可以这样命名:
fontBlue: 表示蓝色字体样式
newsTitle:表示新闻列表
这样的命名方式同样清晰明了,为大多网页设计师所接受,只不过要特别注意大小写的区分,css中是区别大小写的.开始时容易出错,多加注意便可.
按照这样的一些命名方式,我们可以非常明确的知道css中的每一个class的用途,便于使用和设计、维护。
————————-另外一个规范——————-
1.CSS ID 的命名
外 套: wrap
主导航: mainnav
子导航: subnav
页 脚: footet
整个页面: content
页 眉: header
页 脚: footer
商 标: label
标 题: title
主导航: mainbav(globalnav)
顶导航: topnav
边导航: sidebar
左导航: leftsidebar
右导航: rightsidebar
旗 志: logo
标 语: banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单: submenu
边导航图标:sidebarIcon
注释: note
面包屑: breadcrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: Login
功能区: shop(如购物车,收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写:
<– Footer –>
内容区
<– End Footer –>
3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css






TAG:
评分(