Ktl-icon-tai-lieu

Scalable and Modular Architecture to CSS

Được đăng lên bởi Tien Le
Số trang: 66 trang   |   Lượt xem: 3557 lần   |   Lượt tải: 0 lần
Copyright 2011
Authored by Jonathan Snook
http://snook.ca
“Jack the Lumberjack” cover illustration by Kyle Jones
http://justkyle.com
Learn more about Scalable and Modular Architecture for CSS at
http://smacss.com

Scalable and Modular Architecture for CSS

2

Table of Contents
About the Author

5

Introduction

6

What's in here?

7

Four Types of CSS Rules

8

Naming Rules

10

Base Rules

12

CSS Resets

13

Resources

13

Layout Rules

14

Module Rules

22

Avoid element selectors

22

New Contexts

24

Subclassing Modules

24

State Rules

28

Tips

29

Calendar Example

29

Combining State Rules with Modules

34

Themes and Typography

35

Themes

35

Font

36

Depth of Applicability
Minimizing the Depth

Selector Performance
How CSS gets evaluated

Scalable and Modular Architecture for CSS

37
38

42
42

3

Which rules rule?

44

Constrain yourself, don't choke yourself

44

State Representation

46

What's a state change?

46

What's the point?

47

HTML5 and SMACSS

51

Prototyping

56

Goals of a prototype

56

Pieces of the puzzle

58

Your Prototype

59

Formatting Code
Single line versus multiple lines

Resources
Other Resources

Scalable and Modular Architecture for CSS

60
60

65
65

4

About the Author
Hi, my name is Jonathan Snook. I’m a web developer and designer who
has been building web sites as a hobby since 1994 and as a professional
since 1999.
I maintain a blog at http://snook.ca where I write tips, tricks and
bookmarks on web development. I also speak at conferences and
workshops and have been thankful to have been able to travel the world
to share what I know.
I’ve co-authored two books to date: The Art and Science of CSS (from
Sitepoint) and Accelerated DOM Scripting (from Apress). I’ve also
written for .net magazine, A List Apart, Sitepoint.com, and many more
resources online and off.
Having worked on hundreds of web projects, including most recently on
the successful Yahoo! Mail redesign, I’ve written this book to share my
experience with building web sites small and large.
I’d like to express my deepest gratitude to everybody within the
community. Each and every one of you make this a career that I
continue to enjoy having. A special thank you to Kitt Hodsden for
pushing me to write this and share it with everyone. Lastly, to my boys,
Hayden and Lucas, who continue to push me to be a better person.

Scalable and Modular Architecture for CSS

5

Introduction
I've long lost count of how many web sites I've built. You'd think...