读书笔记《Pro CSS for High Traffic Websites》

gao234

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  */  <div class="quote_title"> 写道