信息化 频道

符合WEB标准 CSS也要语义化

    【IT168 信息化

    首先声明的我不是反对关于设计的网格化,我是反对重构的网格化。这里应该特指是YUI方式的类名绑定式的网格化。大家可以看看下面的一段代码:

    Example Source Code [www.52css.com]
    <div id="yui-main"> 
    <div class="yui-b"> 
    <div class="yui-g"> 
    <div class="yui-u first"></div> 
    <div class="yui-u"></div> 
    </div> 
    </div> 
    </div>

    大家可以很清晰的看到这里的yui-u,或者yui-g他的名称是并无意义的。还有与表现相关的first。不知道大家都看过的《网站重构》一书当时配同的PPT里面的一句话——“把页面中的外观标记去除以后,重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出,你只需要改动一下样式表就行了,而完全不必改动页面本身。”像上面的那段代码不能达到结构、表现、行为三者分离,如果强行改变会出现下面的一些问题:

    改变表现的时候必须动到html,一次美观上面的修改要动到三条工作线,极大的人力资源耗费。 

    会出现排在第五个的叫做“first”的框 
    会出现实际为240宽的叫做“180宽”的框 
    会出现实际为三列的叫做“四列”的布局 
    会出现实际为红色的叫做“blue”的字 

    这些也就是相当于现在很多人流行的“left_box”和“right_box”,快速改版以后变成了在左边的“right_box”。这不就是相当于歪曲事实的真理么?但其实最重要的是第一点,这样的工作方式和我们以往的table布局工作方式有差别么?你提个改个样式需求,全公司(设计、页面、开发、功能测试、CE数据监测)都跟着你去跑,这是很不智的。

  写到这里回看下,顺带改了改标题变成《这将是一场革命》系列的第二篇关于CSS的文章算了。上面说完不对的,下面给大家看看一个我最近刚接手的一个新版项目代码段:

    Example Source Code [www.52css.com]
    <div id="index_news" class="mode"> 
    <h3 class="title">公益新闻</h3> 
    <div class="content"> 
    <ul> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> 
    </ul> 
    </div> 
    <a class="more" href="#">更多</a> </div>

    Example Source Code [www.52css.com]
    .mode{ 
    position:relative; 
    float:left; 
    font-size:12px; 
    } 
    .mode h3.title, 
    .mode h4.title{ 
    color:#234C00; 
    padding:5px 10px; 
    font-size:14px; 
    } 
    .mode .more{ 
    top:5px; 
    right:10px; 
    font-size:12px; 
    color:#4282ab; 
    position:absolute; 
    } 
    .mode .content{ 
    clear:both; 
    } 
    .mode .content:after { 
    content:""; 
    display:block; 
    height:0; 
    line-height:0; 
    clear:both; 
    visibility:hidden; 
    } 
    #index_news.mode, 
    #index_bbs.mode, 
    #index_area.mode{ 
    background:url(small_gray_grid.png) repeat-y -400px bottom; 
    width:200px; 
    margin:5px 0 5px 5px; 
    } 
    #index_news.mode h3.title, 
    #index_bbs.mode h3.title{ 
    background:url(small_gray_grid.png) no-repeat -200px top; 
    } 
    #index_news.mode .content, 
    #index_bbs.mode .content, 
    #index_area.mode .content{ 
    background:url(small_gray_grid.png) no-repeat -600px bottom; 
    display:table; 
    }

 

0
相关文章