CSS

[rogerxu]

• [x] rem
• [x] css rule priority
• [x] media query
• [ ] font-feature-settings

CSS教程 | 王鹏飞 (pengfeixc.com)

5 things you don't need Javascript for (lexoral.com)

[rogerxu]

rem

Understanding and Using rem Units in CSS REM vs EM – The Great Debate | Zell Liew

[rogerxu]

Targeting Page Content

The universal selector

• *

Grouping selectors

• aside, article, section

Descendant selectors

• header h1

Child selectors

• article > h2

Adjacent selectors

• h2 + p

Attribute selectors

• p[class~="red"]

Pseudo-class selectors

• Dynamic pseudo-class selectors
  • a:link
  • a:visited
  • a:hover
  • a:active
• Structural pseudo-class selectors
  • span:first-child
  • h2:first-of-type
  • p:only-child
• Nth-child selectors
  • p:nth-child(2n+1)
  • p:nth-child(odd)

Pseudo-element selectors

• p::first-line
• p::first-letter

Generate content

a::after {
  content: " [" attr(href) "] ";
  color: green;
}

[rogerxu]

Resolving Conflicts

Understanding the cascade

Last one wins.

Using inheritance

Selector specificity

• ID selector: 100
• class selector: 10
• element selector: 1

The !important declaration

Try to avoid to use important

[rogerxu]

Basic Text Formatting

Font style properties

font-family

font-size

font-style: normal, italic, oblique

font-weight: normal, lighter, bold, bolder, 100~900

font-variant: small-caps

Font format shorthands

font

• icon
• menu
• status-bar

Text style properties

text-decoration: underline, line-through, blink

line-height: 1.5

text-align: center, justify

hyphens: auto

letter-spacing

word-spacing

text-indent: 1em, -2000em

[rogerxu]

Styling Container Elements

Background

background-attachment

• scroll - attach to container
• fixed - attach to viewport

background-position

Corresponding percentage points are mapped on both the background image and the element. The points are then aligned to determine the background image's position.

50% 50% - horizontal, vertical

[rogerxu]

Working with Color

color words

rbg

hsl

opacity

box-shadow

text-shadow

gradient

[rogerxu]

High-Definition Screens

Background Images

High Definition Sizes

• 1x - 1200 x 430
• 2x - 2400 x 860
• 3x - 3600 x 1290

@media screen and (min-device-pixel-ratio: 2) {
  header {
    background-image: url(../img/banner_1200_@2x.png);
  }
}

Images

<img src="img/photo.png" srcset="img/photo.png 1x, img/photo_@2x.png 2x" />

[rogerxu]

Naming Conventions

An introduction to CSS Methodologies: Naming Conventions and File Structures by Danielle on CodePen

值得参考的css理论：OOCSS、SMACSS与BEM - 庭院茶 - SegmentFault 思否

css可维护方案：OOCSS VS BEM - 掘金

BEM

BEM — Block Element Modifier

理解 CSS 命名规范 --BEM - 前端 - 掘金

• Key-value: block-name__element-name_modifier-name_modifier-value
• Common: block-name__element-name--modifier-name

<div class="block">
    <div class="block__elem1">
        <div class="block__elem2">
            <div class="block__elem3"></div>
        </div>
    </div>
</div>

OOCSS

Object-Oriented CSS

More like a concept - doesn’t have standard naming conventions and can play well with BEM as the goals are the same: code reuse.

Separating Structure From Skin

Separating Container From Content

SMACSS

Scalable and Modular Architecture for CSS

ITCSS

ITCSS: Scalable and Maintainable CSS Architecture

Inverted Triangle CSS: Scalable and maintainable