Background Information
前端结构要分离关注点(separation of concerns)
• HTML: data
• CSS: presentation
• JavaScript: behavior
Ch1 The Value of Process
主要讲的是项目管理、开发流程和团队建设的问题。基本是老生常谈了,同后端开发,略。
Ch2 CSS Style Guide
1. CSS Formatting
1.1. Single- versus Multiline
各有好处,如果后面会使用CSS压缩的话,可以在开发阶段使用多行。否则建议使用单行,减少文本大小。
1.2. Indenting (缩排)
section { width: 400px; font-size: 14px; float: left; } footer { border-top: 1px solid #000000; font-size: 12px; clear: both; }
不建议
section { width: 800px; } section article { border-bottom: 1px solid #999999; padding-bottom: 10px; } section article footer { font-size: 11px; font-style: italic; }
因为如果层次比较深,就会左边很多空白,代码集中在右边,很不方便看
1.3. Tabs versus Spaces
随意,只要统一就行。
1.4. Colons and Semicolons
分号和空白不要省略,为了阅读方便。减少文件大小的工作交给最后的压缩去做。
2. Commenting and CSS Metadata
css注释不支持 // 这种单行注释,注释一定要跟代码一同维护!
2.1 Existing Standards: CSSDOC
http://cssdoc.net 里面有详细介绍
/** * Short description * * Long description (this can have multiple lines and contain <p> tags * * @tags (optional) */
2.2 File Info
/* Style sheet for: Igloo Refrigerator Parts Inc Christmas website Created by John Doe, http://domain.com, on 12.28.2009 Importing reset file: /css/resets/master.css Overriding: /css/base.css Namespacing: use the “xmas” prefix for all the classes and IDs referenced in this file. For example: .xmasLatestNews or #xmasLatestNews */
上面这个信息,写在每个CSS文件最上方,描述这个文件的一些重要信息。如:为哪个网站或子网站制作;谁制作的;引入哪些css文件,覆盖了哪些css文件,命名空间是什么(即以什么开头)。
如果采用CSSDOC,那么就会像下面这样:
/** * Christmas theme * * CSS theme for the Christmas version of the Igloo Refrigerator Parts Inc website * * This theme has been developed by the Design Team at IRP Inc and should be used between * the dates of November 7th and January 7th * * @project IRP Christmas Site * @author Design Team at IRP Inc * @copyright 2010 Igloo Refrigerator Parts Inc * @cssdoc version 1.0-pre */
2.3 Table of Contents
/* Table of contents: 1. Reusable classes 2. Structural elements 3. Colors and typography 4. Visual media 5. Widgets */
或者更细节的
/* Table of contents: Imports Reusable classes Structure Navigation Links Typography Headings Body text Blockquotes Lists Generic Definition lists Forms Images Sidebars Footers Homepage Widgets */
使用目录需要注意两点:1.要注意维护,与代码同步。2.由于第一个原因,所以只有使用的IDE不支持自动生成CSS结构时,才使用目录。
2.4 Sectioning
目录只有在把CSS文件分块时才有用,切片标记要非常明显,如下:
.myClassA { font-size: 14px; } .myClassB { font-size: 18px; } .myClassC { font-size: 24px; } /* =Colors -------------------------------------------------------- */ .error { color: red; } .success { color: green; }
注意,每个分块的标记要容易找到,所以必须和代码中的单词有所区分,建议使用“=”,如:/* =Headings */。
或者采用CSSDOC写法:
/** * Typography [optional] * * Description [optional] * * @section typography */
除此之外,还要把多处复用的部分和某个页面专用的部分分开。
2.5 Color Palettes
网站的不同部分的颜色代码最好放在每个CSS文档头部,如:
/* Color reference:
Main text #111111
Headings #999999
:link #9f0000
:visited #720000
:hover,
:active,
:focus #004899
…
*/