最前端

我的工作,我的生活,点点滴滴...

标签 ‘ css

关于css的书写顺序

很喜欢说“人不能太懒了”,工作更是如此,一开始懒了,乱了,后面麻烦自然而然就来了,一步慢,步步慢。写css时,对此深有体会,尤其在需求和设计不断变化的情况下,更是痛苦不堪。在项目开始的前期,团队认真沟通,仔细考虑好css的书写格式等规范,或许能减少项目后期维护的很多烦恼。这里就简单地总结一下自己css书写的顺序。

css order

一个css文件内容的书写顺序,包括三方面:

  1. 各组选择器的顺序,如:

    /*布局或模块化时的顺序*/
    .header{...}/*1*/
    .main{...}/*2*/
    .side{...}/*3*/
    .footer{...}/*4*/
     
    /*伪类的顺序*/
    a:link{...}/*1*/
    a:visited{...}/*2*/
    a:hover{...}/*3*/
    a:active{...}/*4*/
  2. 每个选择器里,各属性的顺序,如:

    .header{
    	color:#333;/*1*/
     
    	width:960px;/*2*/
    	height:250px;
     
    	background-color:#fff;/*3*/
    }
  3. 每个属性的子属性顺序,如:

    .header{
    	/*顺序为:background-color || background-image || background-repeat || background-position || */
    	background:#fff url(images/header.jpg) repeat-x center top;
    }

这里着重讨论一下第二个方面,即每个选择器里,各属性的顺序。每个人在写css的时候,这个顺序都不同,也没有官方的说法,Mozilla Firefox方面貌似推荐过一个简单的顺序Mozilla suggested css order,不太官方,但值得参考。我推荐的是如下 顺序:

/*一般HTML标签的选择器*/
.normal{
    /*定位*/
    position:relative;
    left:10px;
    top:10px;
    z-index: 1;
 
    /*布局*/
    display:block;
    float: left;
        /*其它
        clear:left;
        overflow:scroll;
        visibility:visible;*/
 
    /*尺寸大小,由内而外*/
    width:100px;
    height:100px;
    padding:10px;
    border:1px;
    margin:10px;
        /*其它
        min-width:100px;
        min-height:100px;
        max-width:200px;
        max-height: 200px;*/
 
    /*背景*/
    background:#fff url(../images/body.jpg;) left top repeat-x;
    opacity:0.5;
 
    /*文本*/
    text-align:left;
    vertical-align:middle;
    text-indent:-9999px;
    text-overflow:ellipsis;
    word-break:break-all;
 
    /*字体*/
    font:12px Tahoma,Helvetica,Arial,sans-serif;
    line-height:1.5em;
    text-decoration:underline;
        /*其它
        caption:first-letter;
        letter-spacing:1px;
        text-shadow:1px 1px 1px #ccc;
        word-spacing:5px;*/
/*列表表格等特有属性统一放在后面*/
.list{
	list-style:disc outside;
}
.table{
	border-collapse:collapse;
	table-layout: fixed;
}

这里的属性的顺序是由外到内的,定位->布局->尺寸->背景->文本->字休,也可以简单地说顺序是布局->盒子->内容,也就是先渲染全局,再渲染自身。我不知道各大浏览器是不是按这样顺序渲染的,但至少这样分组管理和维护起来更方便和不容易出错。肯定还有很多不合理的地方,发现问题的朋友多多指教哈,比如说css3的新属性如何分块,它们的书写顺序是怎么样的。

关于博客的font-family

font-family

最近没事折腾了下本博客,主要是为了养眼点,虽然文章不多。设计咱不专业啊,就修改一下css了,其中为了body的一个font-family属性来来回回修改了不下十次,自己觉得不错了,给同事一看,完了!每个人都有不同的审美观啊。算了,大道至简这是我的经典借口之一吧,于是乎找到了很久之前读到的一遍关于font-family的系列文章谈谈网页设计中的字体应用 并且重新温习了一遍,选了一套比较经典的且适合自我感觉本博客的font-family。

font-family: Tahoma, Helvetica, Arial, sans-serif;

这套font-family之所有经典,有以下几个特点:

  1. Tahoma是Windows 2000、Windows XP、Windows Server 2003的默认字体,圆滑,修正了Arial字体的一些令人难以阅读的毛病,比如大写I,小写i和l的视觉上的混淆。
  2. Helvetica是苹果电脑的默认字体,简洁优雅,它甚至还有一部记录片–《赫维提卡体》;Helvetica
  3. Arial是一般系统都有安装的字体,即使Mac OS,虽然它不是很完美;
  4. Sans-serif在以上字体都没有的时候,提供一个无衬线的通用字体类族名称作为最后的选择。通用字体类族有:”serif”、”sans-serif”、”cursive”、”fantasy”、”monospace”等,这一点好像腾讯cdc也没有注意到可能问题不大?
    font-family:Tahoma,"宋体";/*腾讯cdc的font-family*/

CSS类是HTML标签的扩展?

sexy css

CSS类的命名是一件麻烦的事,有人提到了CSS类命名的语义化[1],这个建议从某些方面来说确实比以结构来命名CSS类好多了。而且我发觉语义化的CSS类甚至成为了HTML标签的一个扩展,HTML标签是有限的,而网页有语义的部分是无限的,使用HTML的语义化只能是基于有限的HTML标签及其属性来实现语义化。比如:

<div class="logo">
<h1 class="blog-name"><a href="http://www.bq69.com">最前端的生活</a></h1>
<h2 class="blog-description">关注web前端,关心web前端工程师</h2>
</div>

h1的语义能说明这是一个一级标题,h2的语义能说明这是一个二级标题,如果我需要一个详细的语义呢,比如:“博客的名字”,“博客的描述”等,显示h1,h2是不足够的。从上面的代码HTML标签h1,h2的语义,搜索引擎知道了两个标题;而从CSS类logo,blog-name,blog-description得知这个博客的logo,标题和博客描述(注:请先忘记header的部分标签,另外我我相信google能做到这个)。

不知道CSS类从这个方面来看,能不能算是HTML标签的扩展,但我相信CSS类的语义化的确有利于SEO的。

参考资料