How to Write CSS

Goals

  1. Readability
  2. Maintainability
  3. Scalability 
  4. Reusability


Yummy Data from Neighbourhoods 



IDs Selector

656


Class Selector

3143


Longest Selector

9

#synopses .synopsis-sections .synopsis-section-wrapper .synopsis-section .synopsis-circle-container .synopsis-circle .content .arrow-button-container .rui-icon-arrow-down {
font-size: 10px;
}

 background-color  62

color  170

color: #333333  18

color: #ffffff  22


font-size  124

font-size: 16px  13

font-size: 14px  24

font-size: 12px   31

 overflow 20

text-align  45

height  145

width  211

CSS Principle


  1. OOCSS － Object Oriented CSS
  2. SMACSS － Scalable and Module Architecture CSS
  3. DRY CSS － Don't Repeat Youself CSS

CSS Guide

  1. Abstract structure and skin into class.
  2. Group  special property and append selectors. 
  3. Avoid descendant and element selectors.
  4. Separate selectors for JS and CSS.
  5. Three categories of styles is Base, Module and State.
  6. In order to write CSS property.

How to Write CSS

By Zhengzheng ZHANG

Made with Slides.com

How to Write CSS

Shared within ThoughWorks China Xi'an Office.

  • 1,799

More from Zhengzheng ZHANG