CSS规范命名

来源:互联网 发布:匡恩网络b轮融资 编辑:程序博客网 时间:2024/05/08 11:57

  CSS命名对于网页的开发管理的重要性往往被人忽略,很多初学者认为,css命名没什么,就是个名字而已,随便根据自己的意愿写就行了,因

  为它对于网页的表现没有任何影响。可是有过网页制作和网站管理经验的人都会知道,css的命名对于网站的清晰和日后的管理很重要,初学者

  应该从一开始就学习和尊重这些规范,形成良好的代码编写习惯,对于以后网站的建设、维护和改造有着至关重要的影响。下面是作者列出的

  一些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的用途,便于使用和设计、维护。
想一想,你要想出很多名字来命名css也很麻烦的,是吧?