CSS命名规则经验之常用的CSS类名举例

最近又开始慢慢花更多静力去学习CSS了.好久没有看CSS的文章了,突然发现自己连CSS类名都不知道是什么了.于是随便找了一下资料,其实类名原来就是CSS类的命名嘛…

今天分享一篇常用CSS类名的举例.

首先说说这个敲代码,最忌讳的就是敲完后连自己都看不懂,那么命名很重要,规范更重要,英语不好的同学的确还是要好好的学习一下.当然好的class至少是要别人看得懂,更重要的是有自己的规范,方便,简洁,明了.

• class=”fixed” fixed这个class几乎出现在没个样式文件中,用在为包含浮动子元素的容器元素清除浮动,样式如下:

  .fixed:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  .fixed{display:block;}
  /* \*/
  .fixed{min-height:1%;}
  * html .fixed{height:1%;}
  

  这个样式就可以用在下面的情形，每个li都是浮动的：

  <ul class="fixed">
  <li><img src="images/img_01.jpg" alt="First Thumb" /></li>
  <li><img src="images/img_02.jpg" alt="Second Thumb" />
  ...</li>
  </ul>
  

• class=”alt”  alt是”alternative”(交替)的简称,这个class用在有一组样式一样的元素,需要为其中的某几个设定特别的样式,比如一组向左浮动的图片中需要有一张是向右浮动,可以这样:

  #content img{float:left;display:inline;margin-right:10px;border:1px solid #ccc;padding:1em 0;background:#fff;}
  #content img.alt{float:right;margin-right:0;margin-left:10px;}
  

• class=”selected”  这个比较常见了,一般用于事件触发的样式,例如mouseover或选中元素的效果.

  <li class="selected"><a href="/about">About Us</a></li>
  <!-- 选项卡制作的时: -->
  <dl>
  <dt class="selected">Tag Cloud</dt>
  ...
  </dl>
  

• class=”first”, class=”last”  毕竟目前:first-child和:last-child这两个伪类有时候的确不好用.这里不详解(可参考之前写过CSS选择器)
• class=”inner”  inner也是经常使用的class,而且大部分上是用来制造视觉上的额外效果,用来给嵌套在容器里的子容器定义样式(比如制作双背景图片效果).
• class=”section”  一般用在为指定内容中特定部分添加特定的样式:

  <div class="section">
  content here...
  </div>
  

差不多想到的就这么多了,部分也是从互联网上看到的,当然其实看到上面几个.也有很多人知道,也不可能全记下来.这里把网上找到的可能也不算特别完整的分享出来,自己也多看看加深印象.

样式文件命名规范

主要：master.css, style.css, main.css
布局：layout.css
专栏：columns.css
文字：font.css
打印：print.css
主题：themes.css

CSS ID 的命名

页头：header
登录条：loginbar
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
页脚：footer
版权：copyright
外套：wrap
主导航：mainnav
子导航：subnav
页脚：footer
整个页面：content
页眉：header
页脚：footer
商标：label
标题：title
主导航：mainbav（globalnav）
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
旗志：logo
标语：banner
菜单内容1：menu1content
菜单容量：menucontainer
子菜单：submenu
边导航图标：sidebarIcon
注释：note
面包屑：breadcrumb(即页面所处位置导航提示）
容器：container
内容：content
搜索：search
登陆：Login
功能区：shop(如购物车，收银台)
当前的：current

好了差不多就这么多了有空多看看多背背…这是初级知识哟