DRUPAL SYNDICATE

CSS Deep Dive

"Getting intimate in the sheets ... stylesheets"

What is CSS?

• Every web developer will (rightfully) claim to "know CSS" but very few actually understand it.
• I know this because I code review a lot of CSS and there's usually at least one part that reeks of not truly understanding how CSS fundamentals work, how the browser calculates CSS rules, the interplay of various rules etc.
• The goal of this presentation is for you to actually understand CSS by exploring some of its fundamentals very in-depth

Itinerary

1. Vocabulary. We need to be able to talk about these abstract concepts in English.

2. Selectors. How do they work? How don't they work? How can I write optimal selectors?

3. Box model. Yeah I've heard of that, wait... what the hell is that anyway?

4. Height. Seems simple, right? Maybe.

5. Display. Position. Float. What do these rules mean and how do they influence one another?

6. calc(). Wait... CSS has functions?

7. CSS units (pop-quiz: what is wrong with writing this: "1.5px"?)

1. Vocabulary

* CSS - cascading stylesheet

* Selector - the selector begins each CSS rule-block. It determines which HTML elements the style rules within its block will be applied to. Selectors can be very simple or very complex. Eg. "#main div.child"

* Pseudo-Selector: If a selector selects an entire element, a pseudo-selector selects an entire element in a certain state. For example, <a> anchors have some sub-states such as "hover" and "visited." You style these sub-states using pseudo-selectors. More on this later. 

* Key Selector - The rightmost part of a selector that specifies the element itself rather than its ancestors.

* Rule - Each block of CSS is considered a rule, starting with the selector. These rule blocks encompass 1 or more style rules. The styles obviously define how various styles get applied to the element(s) that are decided by the selector. Some style rules are relatively isolated and won't influence the way other style rules work (eg. color). There are others that do change the way other style rules work and may render some null and void (consider display and position). Others work in tandem with other rules and can affect each other in unforeseen ways. Eg. "color: white;"

1. Vocabulary

* Preprocessor - a CSS preprocessor (SASS, LESS) extends CSS by making a similar language that compiles to CSS. Preprocessors typically add features that were criminally left out of CSS-spec proper such as variables, functions, and mixins.

* Box model - Each element in an HTML document is treated as a box. The box model governs various things about how these boxes interact with one another inside of a layout.

* DOM - The CSS interacts with the Document Object Model tree just like JavaScript in order to convey frontend intents to the computer.

* Cascade - Style rules can come from a variety of places. The cascading part of CSS describes the way rules which overlap/conflict will be resolved (ie. which one wins out and gets applied).

* Stylesheet - Generally speaking, a stylesheet is a file containing selector blocks of CSS rules and given the extension *.css.

2. Selectors

• As we know, selectors do pretty much what their name implies.
• They select the HTML element(s) that the style rules are going to be applied to.
• Selectors vary in level of specificity.
• The more specific a selector, the fewer elements it tends to affect.
• More specific selectors also tend to be more complicated though because they must provide much more information about the element they want to target.

2. Selectors

• Selector rules can be broken down into four categories:
  • ID - #aSingleElement
  • Class - .red-circle
  • Tag - div
  • Global - *
• When the CSS engine is reading a selector, it reads it right-to-left (the opposite of how we read and write)
• Recall from the vocabulary section the term "key selector"

What is the key selector in the example above?

#contentArea .description img {
  width: 100%;
  height: 100%;
}

2. Selectors

// ID
#foo:active { }
.red-ball > div#foo { }
#foo { }

// class
#foo .red-ball {}
div.red-ball {}

// tag
.red-ball div {}
#foo div:first-child {}

// global
* {}
[hidden="true"] {}

This may seem very elementary but understanding how selectors work is the key to writing CSS that not only does what it is intended to do (yes, CSS can have bugs, very nasty ones in fact) but does it in an optimal fashion. In other words, CSS should be treated with the same respect as any other programming language.