学习笔记 CSS书写规范详解

开发 前端
本文向大家描述一下CSS书写规范,CSS用来定义网站的用户界面,并实现页面展现与内容的分离。相信这些CSS书写规范提示对CSS初学者同样会有很大的帮助。

你对如何检验CSS书写是否标准合理是否熟悉,这里和大家分享一下,CSS用来定义网站的用户界面,并实现页面展现与内容的分离。

检验CSS书写是否标准合理

CSS用来定义网站的用户界面,并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到,下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。

样式表索引

样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本。

给出该css文件作者的相关信息
定义站点的布局(几栏,静态布局/动态布局)
记录文件版本号(利于多作者协作及将来更新)  

样式表索引

命名锚点

命名锚点是用来规划整个CSS文件结构的(就好像书签一样),从而使整个CSS文件获得良好的组织。

命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统,所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点,并在整个文档中查找,从而获取该CSS节。(描述的可能不清晰,看下面图应该就明白了) 

命名锚点定义及查找#p#
 

避免多余Class定义

很多人(尤其是新手)在书写CSS中会定义不必要的Class来样式化一些元素。

其实CSS的一个优雅之处在于它的上下文选择符(即子选择器和相邻同胞选择器),如下:

 
合适的命名

为class定义一个准确清晰的类名十分关键,它有助于你更好更快的理解CSS定义,不至于混淆。 
 


缩写

CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。

CSS缩写会使CSS文档更加干净、简洁。下面是几个例子:

  #p#
CSS图像拼合(即CSS Sprites技术)

CSS Sprites技术:将用到的所有背景图片合并为一张图片,使用css背景属性,来控制图片的显示位置和方式。

CSS Sprites技术的应用可以大大减少HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例: 
 

 
特殊性
 
即使在不太复杂的样式表中,也可能有两个或更多规则寻找同一元素,CSS通过选择符特殊性来决定规则的次序。

简而言之,每个CSS选择符都会分配一个权重。将规则的每个选择器的值加在一起,就可以计算出规则的特殊性。CSS特殊性的使用在大型CSS文件中会很有帮助。

CSS特殊性在CSS中是比较大的一块内容,很难用几句话描述清楚,下面是几个示例:


 
CSS Reset(CSS重置,偶个人叫它CSS初始化)

CSS Reset用于确保网站在不同浏览器中能够获得相同的展示效果。不同的浏览器有一套自己的初始默认设置,最终导致不同的UI展现。CSS重置就是用来解决这个问题,使你能在不同浏览器展现一致的基础上构建站点。

我们可能不会要求你一定去使用某个CSS框架,但是希望能书写CSS Reset。我们可以在网上找到不少书写好的CSS Reset样例。
 

 #p#


 CSS Hacks

可以说再完美的CSS也无法在所有浏览器中获得一致的展现,这是因为不同的浏览器给予你的CSS不同的解释。如果想要网站在不同的浏览器显示一致,你不得不使用CSS Hacks。
 
 

不过使用CSS Hack往往会导致CSS验证出现错误,一个替代的解决方案是为不同的浏览器书写不同的CSS,然后在html中使用条件语句引用它们。
 

CSS验证

当你书写完一个CSS文件,对它进行验证是十分必要的。它可以确保书写的CSS没有错误,并且在所有浏览器中正确的展示。

W3C网站验证是用来验证CSS的常用工具。

注:

本文原文地址:http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices 
 

【编辑推荐】

  1. 全面解析CSS优先级规则
  2. CSS Sprites样式生成工具用法详解
  3. 专家推荐 10款优秀CSS框架
  4. CSS代码整理及优化七大原则
  5. 深入剖析Firefox下 margin-top失效原因与解决方案

 
 

 

责任编辑:佚名 来源: dezinerfolio.com
相关推荐

2017-07-20 11:11:39

前端CSS书写规范

2010-09-01 09:59:32

CSS

2010-09-01 10:17:38

CSShack注释

2011-07-08 10:01:05

PHP

2010-09-01 10:27:12

CSS

2010-09-07 10:39:59

CSS伪元素

2009-07-23 10:40:23

CSS书写技巧

2011-03-21 13:53:45

数据库开发书写规范

2010-08-16 15:32:06

DIV+CSS

2011-04-07 10:29:21

数据库编程书写规范

2020-04-16 21:02:35

前端命名规范html规范

2021-05-06 07:26:55

CSS 文字动画技巧

2010-08-27 17:48:38

CSS

2010-08-31 16:35:59

CSS

2010-06-03 11:12:55

Hadoop

2010-09-08 12:55:34

CSS

2010-09-08 09:54:16

CSS自动换行CSS

2010-09-06 10:41:22

CSS内边距

2010-09-07 10:33:04

CSS

2010-08-25 15:15:52

CSSclip
点赞
收藏

51CTO技术栈公众号