虽然写过很多css代码,但每次动手写都让我痛苦不堪,如何组织好那一堆堆的代码,如何提高代码复用率,甚至如何命名类,这些都让我纠结。下面的浅显的谈一谈在看了《编写高质量代码》中的html和css部分以及搜索网络上一些相关资料对编写高质量的HTML和CSS的一些基本认识。

HTML

在说css之前必须先说说html ,没有它css是浮云。就像是要建栋别墅,光有那些装饰品(css)没有房子基本的结构(html)是不可能造出真正好看又实用的别墅的。其实html结构并不是简单的table或一堆堆的div,真正的高质量的html是具有良好语义化结构的,html5的header、nav和footer等这些新增的标签也是为良好语义化结构而生的吧。这就像让人鼻子是鼻子,眼睛是眼睛,而不是一顿乱放。

标签语义化

拥有良好语义化结构的前提是使用正确的标签。每一个html标签都有它自己的意义,下面是html的一张HTML标签语义对照表

div——division 分隔
span——span 范围
ol——ordered list 有序列表
ul——unordered list 无序列表
li——list item 列表项目
dl——definition list 定义列表
dt——definition term 定义术语
dd——definition description 定义描述
a——achlor 锚
strong——strong 加重
em——emphasized 加重
b——bold 加粗
i——italic 斜体
big——big 变大
small——small 变小
p——paragraph 段落
h1-h6——header 标题1到标题6
hr——horizontal rule 水平尺
sup——superscripted 上标
sub——subscripted 下标
font——font 字体
del——delete 删除
ins——inserted 插入
u——underlined 下划线
s——Strikethrough 删除线
fieldset——fieldset 域集
legend——legend 图标
caption——caption标题
abbr——abbreviation 缩写词
address——address 地址
var——varaiable 变量
pre——preformatted 预定义格式
blockquote——block quotation 区块引用语

HTML5新增标签

<article> 标记定义一篇文章
<aside> 标记定义页面内容部分的侧边栏
<audio> 标记定义音频内容
<canvas> 标记定义图片
<command> 标记定义一个命令按钮
<datalist> 标记定义一个下拉列表
<details> 标记定义一个元素的详细内容
<dialog> 标记定义一个对话框(会话框)
<embed> 标记定义外部的可交互的内容或插件
<figure> 标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部
<header> 标记定义一个页面或一个区域的头部
<hgroup> 标记定义文件中一个区块的相关信息
<keygen> 标记定义表单里一个生成的键值
<mark> 标记定义有标记的文本
<meter> 标记定义 measurement within a
predefined range
<nav> 标记定义导航链接
<output> 标记定义一些输出类型
<progress> 标记定义任务的过程
<rp> 标记是用在Ruby annotations 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby
annotations的解释
<ruby> 标记定义 ruby annotations.
<section> 标记定义一个区域
<source> 标记定义媒体资源
<time> 标记定义一个日期/时间
<video> 标记定义一个视频

现在我知道了每个标签的含义,那我怎么知道我的html语义是否良好?最好的办法是去掉css,去掉样式,看结构是否良好。可以在给网页布局时先把html写好,再去写相应的样式。没有样式的网页应该也具有良好的可读性。

CSS

最开始写css就是看见什么写什么,从来不会想它还需要好好组织,最后代码一堆一堆,自己看着就头晕,发现兼容问题也是这里补补那里补补,毫无章法可言。现在才发现,css也是一门大学问。

css结构

如何组织好css让代码结构更清晰、复用率更高?这需要有良好的css结构。 比较常见组织css的方法:base.css+common.css+page.css base层位于三者的最底层,提供CSS Reset和粒度最小的通用类——原子类,这一层的css可以被任何网站应用。 common层定义组件类,像button、标题栏这样特定的样式,这些组件类可以供整个网站使用. page层是相对于网站某个页面特有的样式,像主页可能就跟其他页面的样式有很大不同,你可以定义一个专用于首页的css(如index.css)。 不过话说回来,如果网站规模不大,我们也就没有必要把这些css分成三个文件(这样会增加请求数),可以把所有css统一放在一个文件里甚至html头部。不过我们还是需要规规矩矩地把它按照base、common、page这样的层级排列,并写上相应注释。

css模块化

css模块化的目的是把具有相同样式的css组织起来,提高css的重用率。划分模块应该保证类的单一职责。模块应在保证数量尽可能少的原则下,做到尽可能的简单,以提高重用率。 举个例子: 我们来看一下新浪博客首页的四个列表,我们可以把这四个列表划分成两个完全一样的两大块(方形和圈);但是我们发现其实这两大块中间的列表部分的样式其实是一样的,所以可以做如下调整。

看下图,我们按照圈、箭头和方形所标注的三块内容就划分了三个不同的模块,这样每个模块的样式几乎是一样的(当然除了每个列表的名称),把列表作为一个模块单独出来。

css命名

css命名也是一门学问。骆驼命名法和划线命名法的结合是不错的选择。骆驼命名法是从第二个单词开始首字母大写(如listItem、articleList);划线命名法是每个单词用“_”或“-”分开(如list-item、article——list)。 我们可以用:骆驼命名法用于区别不同单词,划线用于表明从属关系。 item属于list的子项目所以写成list_item的形式,articleList是指文章列表没有从属关系。最近看到一种BEM命名法,有兴趣的童鞋可以通过这篇文章了解一下《BEM思想之彻底弄清BEM语法》 当有很多相似但又不完全相同的模块时我们是给每一块加上不同的类然后使用css技巧把相同的部分提取出来(继承),还是让多个类组合成我们想要的效果呢?建议是多用组合,少用继承。

css编码风格——多行式和一行式

多行式的编码风格可读性更强,但增加了css文件行数增大文件大小。一行式可读性稍差,但有效减少文件行数有利于提高开发速度。

css兼容问题

我经常感觉被IE6“坑”,它会时不时给你些小惊喜。其实不止IE6,每个浏览器都有它特殊的一面。

补充阅读: 《IE6下的几大灵异事件》 《最全的CSS浏览器兼容问题》 《主流浏览器的Hack写法

如何编写高质量CSS的更多相关文章

  1. 编写高质量代码——html、css、javascript

    [编写高质量代码]1.注释的必要性:增加代码的可读性.2.web标准:由一系列的标准组合而成,其核心理念是将网页的结构.样式.行为分离,所以他可分为:结构标准.样式标准和行为标准.3.一个符合标准的网 ...

  2. HTML Inspector – 帮助你编写高质量的 HTML 代码

    HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...

  3. 《编写高质量代码--Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  4. 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  5. 编写高质量代码:Web前端开发修炼之道(一)

    最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...

  6. 怎样编写高质量的java代码

    代码质量概述     怎样辨别一个项目代码写得好还是坏?优秀的代码和腐化的代码区别在哪里?怎么让自己写的代码既漂亮又有生命力?接下来将对代码质量的问题进行一些粗略的介绍.也请有过代码质量相关经验的朋友 ...

  7. 每周一书-编写高质量代码:改善C程序代码的125个建议

    首先说明,本周活动有效时间为2016年8月28日到2016年9月4日.本周为大家送出的书是由机械工业出版社出版,马伟编著的<编写高质量代码:改善C程序代码的125个建议>. 编辑推荐 10 ...

  8. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  9. iOS书摘之编写高质量iOS与OS X代码的52个有效方法

    来自<Effective Objective-C 2.0编写高质量iOS与OS X代码的52个有效方法>一书的摘要总结 一.熟悉Objective-C 了解Objective-C语言的起源 ...

随机推荐

  1. 关于tomcat 成功运行之后内存泄露

    在window-preferences  里 搜索 tomcat-jdk 加上以下内容即可 -Xms256m -Xmx512m -XX:MaxNewSize=256m -XX:MaxPermSize= ...

  2. Efim and Strange Grade

    Efim and Strange Grade time limit per test 1 second memory limit per test 256 megabytes input standa ...

  3. VS2005混合编译ARM汇编代码-转

    原文地址:http://blog.csdn.net/annelcf/article/details/5468093 公司HW team有人希望可以给他们写一个在WinCE上,单独读写DDR的工具,以方 ...

  4. smarty(原理概述)

    转自:http://www.cnblogs.com/RightDear/archive/2012/11/06/2756218.html smarty(模板引擎,模板技术) 使用smarty主要是为了实 ...

  5. android4.0 的图库Gallery2代码分析(三) 之Applition的初始化准备

    Applition的初始化准备 图库的一切动作都明显地起源于Application.这是区别与其他那种感觉不到Application存在,仅仅感觉到Activity存在的简单应用的一个特点. 图库的a ...

  6. phantom" breakpoints

    http://stackoverflow.com/questions/723199/why-does-my-eclipse-project-have-phantom-debugger-breakpoi ...

  7. word加载项打包发布注意事项总结

    最近在做一个word加载项,发布的时候还是有很多坑的现在总结一下:发布工具为Advanced Installer 11.0 网盘地址:http://pan.baidu.com/s/1i4GK3g5 1 ...

  8. Git上传文件

    最近开始折腾node.js,顺便学习了Git上传的相关知识,找了许多关于Git如何上传项目的相关资料,最终发现一篇比较简易完整的文章, 在此分享一下喜悦的心情!下文是使用Git上传的完整教程: 将文件 ...

  9. 【BZOj 3670】【UOJ #5】【NOI 2014】动物园

    http://www.lydsy.com/JudgeOnline/problem.php?id=3670 http://uoj.ac/problem/5 可以建出"KMP自动机"然 ...

  10. 织梦系统与discuz论坛整合方法

    如何完成dedecms模板系统与discuz论坛整合呢? 这里的整合指会员信息,会员登陆.退出的同步:论坛信息的引用:等等. 首先,我们先来安装织梦(dedecms)系统. 然后,我们在网站根目录下建 ...