This book is very good for learning CSS. It has 4 sections, start from the basic knowledge to advanced technique. It also provide some exercises for user to get some hand on experience. But this only have few picture and lots of text, it is quite boring to read.

1. Basic CSS
2. Applied CSS
3. Page Layout CSS
4. Advanced CSS

Part 1: Basic CSS

Know what browser to support

Browsers are also software product. They have bugs and feature not support. We may need to have work around on browser quirk. Market share of browser can help us to determine which browser and what version to support.:

• http://www.netmarketshare.com/browser-market-share.aspx
• http://gs.statcounter.com
• https://developer.microsoft.com/en-us/microsoft-edge/ie6countdown/

Some tips on HTML

We can solve problem in many ways. But using some well known technique help other understand your code and help us avoid bugs. Here are some tips:

• Stop using <font>.
• Don’t use <table> for layout.
• Don’t use <br> for spacing, use margin or padding.
• Don’t overuse <div> and <span>
• Don’t forget Doctype!
  • No doctype will fallback to old browser mode, which may make the page render in a strange way.

Jargon of CSS (Page 21)

A CSS rule have:

• selector
  • type (element) selector
  • class selector
  • id selector
• declaration block
  • declaration
    • property
    • value

CSS Inheritance

• Positioning style is not Inherit
• Browser built in style may override the Inheritance

External CSS vs Internal CSS

External CSS will be cached by browsers, need use force reload to view the changes ( cmd/ctrl + shift + R ). It is quite inconvenient during development. The cache may mislead us to think our CSS is wrong. One way to avoid it is to develop with internal CSS, move it to external later

Some developer use external script for general style and internal script for page customization. Make sure internal script is load after the external one if you do this.

Avoid ID selector

ID selectors have the highest specificity, stop using it in CSS to avoid specificity wars.

Some mistakes in the book

The book mention that there will be no CSS4, because CSS3 will only updating CSS3 modules. Actually w3c is release CSS4 on 2011

Part 2: Applied CSS

I almost know all style introduced in this chapter. I only jot down the information worth mentioning and some knowledge I don’t know.

Font

• Font license
  • Some font companies ban other to use their fonts on web to prevent their creation is pirated.
  • Some companies offer license for web usage.
• Data format of icon font
  • There are graphical icon or SVG icon.
  • These data format take more space to store, so the file size is bigger than web font.
• For fonts which are tailor made for italic and bold, we need to override font style in <strong> and <em>.
• Absolute font size keyword
  • For font-size property, we usually use number value, like 16px, 2em, 2 etc. Actually there are absolute size keywords, like xx-small, medium, larger etc.
  • These keywords are handled in different ways by browser vendors, it is seldom be used.

Don’t add unit to Line height

Don’t put unit in line-height. Use numeric value only to make sure line height is calculated base on the current font size. This can prevent the bugs cause by CSS inheritance.

Use negative margin to remove space

It is a common technique.

List style

There are many option in list-style-type. We can also customize the style. REF

Collapsing margins

Margins will not stack, the maximum margin will be took. Use padding if you want to stack.
PS: If one margin is positive and one is negative, there is no collapsing margin

Layout

• Avoid setting height of elements
  • The content may overflow in some screen size
• Float make the element outside the normal layout flow
  • Some element will be shown under the float element
    • Such as background
  • We can use overflow hidden to fix it
• Background image bottom bug
  • When the screen is very big, the bottom is not the bottom of browser window.
    • Using height 100% can make the page size at least as large as browser window
• Background percentage
  • A percentage value aligns the specified percentage of the image with the same percentage of the styled element.
    • In another words, both origin of background image and position of the origin is affected by percentage value
• Some browsers ignore background image when printing the web page
• To implement background with color overlay, we can use background image blend.
• To protect users’ privacy, limited style can be applied to the :visited pseudo-class
  • color, background-color and border-color is available
• Double border problem in list items
  • All elements have top border, use :last-child or :last-of-type to add bottom border.
  • In bootstrap 3, it use -1px technique
  • In <table>, we can use border-collapse directly
• Don’t use <table> for layout

Jargon

• Gutter
  • It means white space between elements
• Source order
  • The order in which you write your HTML
• Absolute path
  • http://199911.github.io/
• Root-related path
  • /review/2016/11/12/CSS-missing-manual-1/
• Document-related path
  • ../CSS-missing-manual-1/
• CSS Sprites
  • Merge all small image into a big one, use background position to show the particular image.
    • It also is a preload technique, download all small image in batch.
      • Avoid delay on user action and image download.
        • Useful in imaged buttons.
    • Can make rollover event easier (by changing background-position).

Transformation, Transition and Animation

• scale can have negative value
  • the element will be flipped
• animation timing function tools
  • When class with transition is removed, there are no transition during the removal
  • Usually put transition style in the starting class instead of final class
• Transition delay can is useful in CSS dropdown
  • Prevent the menu disappear quickly by delaying the style of transition class removal
• Transition on opacity, translate, scale and rotate is smoother than other as they take less CPU
• Force the browser to use GPU: transform: translateZ(0)
• Animation
  • write css rule for key framework, and then use the CSS animation rule to animate
  • can pause animation by animation-play-state

Other information

• Percentage does not work on drop shadows
• Document-related path in CSS provide directions in relation to the style sheet file, not the HTML page URL
• Less color can be shown in GIF
  • Use GIF for icon
• Web surfer already familiar with form
  • Don’t change the style of form too much otherwise they may be confused.
• There are some “@ rules”, like @media

Part 3: CSS Page Layout

This chapter have enough images to help reader understand the layout. I highly recommend to learn layout by reading this chapter

Layout type

• Fixed width
  • The width value is a fixed numerical value
• Fluid
  • The width is a percentage value
• Responsive Web design (RWD)
  • The layout change with the screen size
  • The layout for different screen can be “Fixed Width” and “Fluid”

Common technique for css layout

• float (for different section)
• absolute positioning

Why mobile first?

Limited screen size help us eliminate noise and focus on content

Workflow on design

In short, design from the highest abstraction layer to the lowest.

1. Identify the layout first
   • don’t spend too much time on graphic and detail
2. Identify different sections (boxes)
   • Notice that the HTML element will take up all width by default. The size of column should be determined in step 1.
3. Remember the background image
4. Think about the implementation of layout
5. Design the style of different element
6. Determine the size of margins and padding

To fix items inside float container break outside

Four solutions:

• Add clear: both; element at the bottom inside the floating container
• Float the Item
• Add overflow: hidden;
  • Notice that if element is absolute positioned, it will not show up. (It is hidden)
• Use micro clear fix
  • Add clear: both; in pseudo element ::after
  • Also display: table;
  • Bootstrap 3 use this technique

Using table to layout

We can use multicolumn in CSS 3 instead

• Pros
  • When you need to create columns with same height
• Cons
  • Need to add html code
  • difficult to change
  • not work well in cellphone

Float

• height depends on content
  • difficult to create full height column
    • Use a wrapper to wrap the main content (should be long enough) with the columns
    • and then add background img with the same width and repeat vertically as the column in wrapper
    • the column have back ground , but actually it is background of the wrapper
• Float does not work with position:fixed or position:absolute

Positioning properties (left, right, top and bottom)

• Let browser calculate the size of element
  • Specify both left and right / top and bottom
  • I cannot come up with use case
    • may be using vh and vw already serve most of our needs
    • calc() give us more flexibility
• Percentage values will not change the element’s size

Media query

Common usage:

• adjust column
• flexible width
• tighten up white space
• adjust font sizes
• change navigation menus
  • convert nav bar to dropdown in mobile device
• hide content on handhold device
• use background image

Flexbox

Properties:

• flex-direction
  • usually use ‘row’ in desktop and switch to ‘column’ in mobile
• justify-content
  • if flex widths is used, justify-content have no effect
• align-items
  • default value: stretch
  • align baseline
    • align the first line of text
• align-content only works when
  • flex-wrap is wrap
  • flex container must taller than the rows of flex items
  • default value: stretch
• order
  • Solve the CSS negative margin to change the order (they want to put main content in HTML first for SEO)
• flex
  • default values:
    • 0 1 auto
    • • 1 0% (if the first value is defined)
    • what if * = 0?

Special note

• flex containers and items are not block level element
  • Some properties don’t apply to them
• flex items’ margins don’t collapse
  • can auto take up all space -> push left / right
• no-wrap + shrink 0 will make the item overflow
  wrap will make the item drop (if sum of flex-basic > container width)

Size calculation

• space difference = absolute( container size - sum of flex-basic of all items )
• when flex container > sum of minimum size of items
  • item’s size = (flex-basic) + (flex-grow/sum of flex-grow) * (space difference)
• when flex container < sum of minimum size of items
  • item’s size = (flex-basic) - (flex-grow/sum of flex-shrink) * (space difference)

flex-basic: auto; and flex-basic: content;

According to MDN, auto can means “look at my width or height property” and “automatic sizing”.
At the end:

• auto means “look at my width or height property”;
• content keyword is introduced to trigger automatic sizing;

Jargons

• Float drops
  • When there are not enough space, the column will drops down below the other
  • Solution: Use box-sizing to define the column size precisely
• Frameset
  • fixed component in certain place
  • keep important fixtures handy
  • can implement with html frame
• Breakpoint
  • are the screen size value which trigger style change
• Flexible grid
  • Bootstrap 3’s grid system is an example

Notes

• Don’t add unnecessary div
• CSS built in grid layout
  • But it is not ready
• There are lots of layout already, don’t need to start from zero
• Search engine limited the amount of html crawl, it rank the content near the beginning higher score.
  • I am not sure is it valid now
• Background image cannot be outside the element
• CSS layout difficulty
  • Cannot fix the position and sizes, because user can change the screen size
• Can use media attribute in link tag to determine which style sheet to download
• Drawback of fluid image: force user to download a bigger image
• Don’t add unit when the value is 0

To read list

• flexbox usage
  • https://philipwalton.github.io/solved-by-flexbox/
• mobile first
  • http://www.abookapart.com/products/mobile-first
  • https://www.sitepoint.com/making-case-mobile-first-designs/
• For a good explanation of why floated elements can break outside of their containing blocks
  • www.complexspiral.com/publications/containing-floats.
• Create full height column (sidebar) with float
  • some other technique: http://css-tricks.com/fluid-width-equal-height-columns/
  • http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403
• Responsive image technique
  • http://alistapart.com/article/responsive-images-in-practice

Part 4: Advanced CSS

This chapter gives some hints on writing maintainable CSS and introduce SCSS.

Organize style

• Class name
  • Name style by purpose, not appearance
  • Don’t use name base on position
    • .leftSideBar
  • Avoid cryptic names
• Don’t repeat yourself
  • I think it depends on context
• Use multiple Class
  • Using partial in SCSS seems a better choice
• Group related style
  • apply to related parts of a page
  • with a related purpose
• Separate groups by comment or put it in different style sheet
  • @import will delay the rendering, use css pre processor instead

Reset CSS vs Normalize CSS

Reset style means remove all browser CSS, normalize means unify the styles. For example, reset CSS will make headlines and paragraph the same size.

Reset style:

• Remove padding and margins
• Apply consistent font sizes
• Set a consistent line height
• Improve table border and create consistent table cells
• Remove borders from linked images
• Set consistent list indents and bullet types
• Remove quote marks from quoted material

Using Descendant Selectors

• Limit the scope of CSS by descendant selectors and <div>.
• Add class to body to identify page type and layout
  • Just like a “namespace”

OOCSS vs SMACSS

Other approaches on organizing CSS

• http:// coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
• http://smacss.com