『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS

1、怪异模式和DTD

标准模式:浏览器根据规范表现页面

怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定义类型)声明,firefox会按照标准模式来解析网页,但在IE中就会触发怪异模式。

两种模式的差异比较大,比较典型的是IE对盒模型的解析;在标准模式中,网页元素的宽度是由padding、border、width三者的宽度相加决定的,而在怪异模式中,width本身就包括了padding和border的宽度

2、如何组织CSS?

按功能划分:font.css color.css layout.css 等

按区块划分:head.css foot.css sidebar.css main.css等

作者建议:base.css + common.css +page.css

base层提供CSS reset功能(覆盖浏览器默认样式)和通用原子类(文字、定位、长宽、边距),具有高度可移植性

common层是网站级的,不同的网站有不同的common层,同一个网站只有一个common层;网站中高度重要的模块,称之为组件

page层位于最高层,提供页面级的样式

3、模块化CSS

时间: 2024-09-30 22:44:50

『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS的相关文章

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

第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 第二章 1.注释增加代码的可读性:提高重用性--公共组件和私有组件的维护:冗余or精简:前期的构思:制定规范:团队合作 第三章 1.语义化标签 2.table布局的缺点:代码量大,结构混乱:标签语义不明确,对搜索引擎不友好. 3.CSS

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

最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道>,看完觉得不错,它从一个整体架构上来说明如何编写高质量代码,而细处也着重说明一些比较重要的技术点,给人一种从高处俯瞰web开发.很完整的感觉,在这感谢老大,谢谢他让我们不停的进步着.下面是我看书过程中的笔记. 第一章:从网站重构说起 没什么好说的,从一个糟糕的老网页实例说明需要将web的结构,样式和行

《编写高质量代码-web前端开发修炼之道》 读书笔记 (转)

正文 欲精一行,必先通十行. 在前端开发这个领域,一专多能更是非常必要的. table布局缺点: 代码量大,结构混乱: 标签语义不明确,对搜索引擎不友好. css布局:div+css,或者(x)html+css. 代码量少.结构精简.语义清新. 代码量少,浏览器端下载时间就会更短: 语义清晰就会对搜索引擎更友好. 先确定html,确定语义的标签,再来选用合适的CSS. 浏览器会根据标签的语义给定一个默认定样式. 判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是

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

第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免JS冲突 A:匿名函数 在多人合作一个网站时,每个人都会写自己的JS代码,定义变量的时候有可能会引起命名冲突,如何避免这种冲突隐患呢? 一种最简单有效的办法是“匿名函数”将脚本包起来,让变量的作用域控制在匿名函数之内. 匿名函数:(function (){})() 前面的括号内是函数体,后面的()表

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

第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在标准模式中,网页元素的宽度=padding+border+width;而在怪异模式中,width本身就包括了padding和border. 在怪异模式中:设定width,然后margin:0 auto;是无法居中的.标准模式中可以正常工作. 于是我们尽量避免怪异模式,而选用标准模式,这样就出现了DT

&lt;编写高质量代码--web前端开发修炼之道&gt;之javascript总结

(一) 避免js冲突   eg: 代码1:   <script type="text/javascript">                      var a = 123,                            b = 'sunshiine'; </script>    <script type="text/javascript">                     var a = 345,      

&lt;编写高质量代码--web前端开发修炼之道&gt;之css总结

(一)标准模式和怪异模式的一些不同 (1)IE对盒模型的解析    在标准模式下,页面的宽度为:width+border+padding    在怪异模式下,width就包括了padding 和border (2)在怪异模式下,如下的样式不能正常表现    width:200px;margin-left:auto;margin-right:auto;在一些高级浏览器中,如果没有声明DTD类型,页面将会以标准模式进行解析,而在IE(IE6,IE7,IE8)中则会触发怪异模式 (二)关于*{marg

[已读]编写高质量代码--Web前端开发修炼之道

我觉得还蛮实用的一本,推荐看看,主要涉及到这些: 标签语义化.css模块化. css的一些东西,比如haslayout 文档流,还有如何实现水平.垂直居中. js代码组织与js分层.js压缩 编码规范.注释规范.命名规范

&lt;编写高质量代码--web前端开发修炼之道&gt;之html总结

最近在看一本书,觉得讲得特别精辟,把一些重要的地方记录下来   使用语义化的标签   (1)好处:能够很好地自我解释,方便搜索引擎理解网页的机构,抓取重要内容,去样式后也会根据浏览器的默认样式很好地组织网页内容,具有很好的可读性,从而实现对特殊终端的兼容   (2)常见模块:   demo 1: 常见的标签   <h1>title</h1>   <a href="#">更多</a>   <p>段落</p>