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

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

作者: whidy

不可忘记初衷,不可迷失方向,所有一切都为梦想... http://www.whidy.net/about (updated 2014-5)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)