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

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 
 */  

写道

the sections created should be intuitive(直观的), even if they follow an established convention(约定、惯例) within the organization.

 除此之外，还要把多处复用的部分和某个页面专用的部分分开。

2.5 Color Palettes

网站的不同部分的颜色代码最好放在每个CSS文档头部，如：

/* Color reference: 
 
Main text      #111111 
Headings       #999999 
:link          #9f0000 
:visited       #720000 
:hover, 
:active, 
:focus         #004899 
… 
 
*/