武汉web培训
达内武汉中心

18571612865

热门课程

武汉web培训:CSS架构最新最佳实践

  • 时间:2016-06-07 09:57
  • 发布:九月枫林
  • 来源:web前端网

大家都已意识到了,在过去的几年里,前端开发领域取得了很大的进展,一些新的思想已经实践出新的方法来解决由来已久的问题。本文介绍了前端编程一些最新最佳的实践方法,很大程度上能够帮助大家编写良好的样式表和HTML文件。
使用Normalize.css重置默认样式

CSS重置有助于根据所有设置的样式建立一个基准样式。样式重置有效重写了浏览器某些元素(在浏览器里有很大的不同)默认的样式。尽管CSS resets在过去的几年里很受欢迎,但是,很多网站至今也没有使用,这些网站CSS的可扩展性因此会有很大的困难。

大多数人推荐使用normalize.css重置默认样式,而不是使用由Eric Meyer写的非常流行的CSS Reset或者自己写的Reset。Normalize.css给所有浏览器的元素设置了一个共同的样式,而不是重置了这些元素的基本样式。可以参考github上normlize.css项目,它具有以下优点,不仅仅是CSS样式重置:

    不像其他CSS resets,normalize.css保存了有用的默认设置
    大范围的规范了HTML元素样式
    纠正了浏览器间的一些bug及不一样的表现形式
    精心的改进提高了可用性
    使用详细的注释解释了代码的作用

使用normalize.css替代一个标准的reset会使你编写正确的代码,在重新设置基本样式上节省大量的时间。

使用clear fix清除浮动

如果你还在你的文档中使用下面列出的方法来清楚浮动,那我们真的需要谈谈了:
<div class="clear">
... .clear { clear: both; }

推荐使用其他清除浮动的方法,而不是这个。这个方法是在大概10年前,CSS浮动布局第一次开始使用的时候设计出来的清除浮动的方法之一。

在HTML5 Boilerplate里使用的Micro Clearfix是最新、兼容性最好、前端编码里最好的实践方法。Micro Clearfix支持firefox 3.5、safari 4、chrome、opera 9、IE6及以后的版本。这里有个例子:
.cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { *zoom:1; }

清除浮动类.cf应该被加在所有包含浮动元素的元素上。在这种情况下,旧式的空div带有clear样式的元素(<div class=”clear”>)可以永远从你保留的方法里退出了。
使用overflow:hidden怎么样呢?

另一个清除浮动流行的技术是使用overflow:hidden。因为在IE7及以下版本里使用overflow:hidden时有时会有问题,所以Micro Clearfix是最强烈推荐使用的。

尽管使用overflow:hidden几乎是每个人目前最喜欢的清除浮动的技术,但它会引起诸如下面的一些问题:

    当浏览窗口比它容器小时,容器不会出现滚动条,这样会隐藏容器内的内容和子元素。
    对margin、border、outline和绝对定位的png图片产生干扰。
    影响CSS3属性的应用,比如box-shadow,text-shadow,transform等。

HTML5 and CSS3 for the Real World一书的合著者Louis Lazaris暗示使用overflow:hidden在复杂布局里会引起问题,推荐避免使用它,支持使用Micro Clearfix。

如果你还是决定使用“overflow:hidden”来清除浮动,建议你使用下面的版本,这可保障在IE下触发hasLayout:
.container { overflow: hidden; zoom: 1; display: block; } 空div

说道不正确的使用空div,你应该停止使用作为页面的分隔符的、带有clear和边框的空


<div class="divider">
... div.divider { border-top: 1px solid #ABAA9A; clear: both; }

是的,你知道这段代码作为清晰的可视化的页面分隔符确实不错,但是它缺少语义。 OOCSS创始人、CSS大师Nicole Sullivan建议使用<hr>元素分割页面不同的部分,并且给<hr>元素加上一些必要的样式。

所以你应该使用下面的代码,而不是前面提到的:
<hr class="divider"> ... .divider { border-top: 1px solid #ABAA9A; clear: both; }使用图标元素

在你的页面里,你可能会使用<span></span>作为一种放置图标的方式,就像这样:
<li class="favorite"> <span class="icon favorite"></span> <span id="favorite-insert-point" class="favorite"></span>

如果是这样,看看这样是不是好点:图标应该使用一个图标(icon)元素,可以使用<i>标签。随着在Twitter Bootstrap中使用,这个方法已经越来越流行了。
<p><i class="icon icon-comment"></i>23 comments

... .icon { background-image: url( sprites.png ); } .icon-comments { background-position: 0 -30px; }

使用<i>标签比使用标准的<span>标签更有语义,并且可以容易的找到页面中图标的位置。
使用CSS3

网站经常在一些元素上使用图片,但这并不是必须的,这样使页面图片变得臃肿。使用CSS3可以极大的有助于消除这些图片,同时为网站转向响应式设计做好准备。对大多数网站来说,任何圆角、阴影、文字阴影、渐变和box-sizing的实例都是CSS3的一个福音。

但是,CSS3有两个消极点:首先,CSS3规范的很多部分没有确定,因此现代浏览器对CSS3的属性需要加上浏览器前缀。其次,CSS3不被流行的旧浏览器支持,这样的话就需要可靠的机制或者辅助脚本。
CSS3兼容性

很不幸,旧版本的IE和CSS3存在最大兼容性问题。当前,CSS3只有部分属性被IE9支持(最明显的就是CSS3选择器,可以查看HTML5和CSS3支持,获取最新的支持列表),IE6到IE8完全不支持。如果你打算使用任何CSS3属性,对使用IE9,IE8或者更低版本的用户来说,我推荐安装合适的可靠的处理机制。

很幸运,有一些脚本可以使用,达到效果。以下这些脚本有助于CSS3在IE里得到支持。

    IE9.js.这里有一个IE9.js影响的属性和问题修正的解释。
    Selectivizr
    CSS3 Pie
    CSS Sandpaper
    Modernizr

这些脚本不好的一面就是会增加页面的大小和加载事件,但是这个代价是值得的。

CSS3工具

CSS3概述和哪些属性可以放心的使用可能是另一篇文章要谈论的。使用CSS3最重要的步骤之一是要紧跟最新规范和浏览器实现规范的变化。跟踪这些变化可能有点痛苦,所以我建议使用http://css3please.com/和http://html5please.com网站了解最新的语法变化和浏览器支持情况。对大多数的属性,CSS3, Please!是个超级棒的网站资源。对于渐变,Ultimate CSS Gradient Generator是一个非常不错的工具,它可以生成合适的、具有良好支持的渐变代码。

如果你自己特别懒,不想记住怎么写浏览器前缀,Prefixr会帮你在代码里添加的。你也可以使用由Lea Verou写的prefix-free,在服务器上上传了这个脚本后,就会在你的代码里添加所有的前缀。

制定网格

如果你的网站目前还没有建立一个网格系统,从此你必须敦促自己建立一个。如果你的代码有大量width、margin、padding的实例,并且相同大小的元素间不在相同的尺寸内,那么你的网站早就需要一个网格系统了。

你可以使用你自己的元素尺寸建立一个网格系统,或者你也可以使用一个CSS网格框架(很多CSS网格框架,使用任何一种都行,甚至可以使用一个响应式的框架)。

制作流体网格和图片

建立网格的最后一个方面(如果你提前想到了未来友好的设计)就是将固定的像素网格转换成百分比(或者em)。决定百分比大小的最好方式是采用Ethan Marcotte的响应式网站设计黄金法则:target=content/context。很感激,有计算器可以帮计算RWD网格的尺寸。我推荐一个工具RWD Calculator。

对友好设计同样重要的是使图像自适应容器的大小。实现的主要方法是下面一行简单的代码:
img { max-width: 100%; height: auto; }

这样,图像在流式容器里就不会超出或缩小。

马上预约七天免费试听课

姓名:

电话:

上一篇:JavaScript事件冒泡简介及应用
下一篇:武汉web培训:html中的Doctype

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
江西省

贵州省

广西省

海南省

有位老师想和您聊一聊