CSS book Table of Contents — draft 1
I am likely going to write a “CSS for JavaScripters” book, and therefore I need to figure out how to explain CSS to JavaScripters. This series of article snippets are a sort of try-out — pre-drafts I’d like to get feedback on in order to figure out if I’m on the right track.
Today I present the first draft of the book’s table of contents for feedback — both on the topics, and on the chapter order.
Part 1: How CSS works
- CSS Is (Not) A Programming Language
- Imperative vs declarative languages
- The CSS mental model
- A style sheet as kind-of a JSON file: all commands are executed simultaneously. (Don't take this comparison too far)
- CSS engines in the browser
- layout vs appearance -> layout module vs paint module. Consequences for transitions -> use opacity and transform whenever possible
- Formal syntax: rules, selectors, declarations, values. Semi-colon is REQUIRED.
- CSS Is Global
- CSS classes === JS objects (good comparison? take care). Multiple classes for 'OO'
- Backward compatibility as a design principle. Drawback: past mistakes (box model; margin collapse) won't ever be fixed.
- Vendor prefixes. History and purpose. Current status: don't use, unless you must.
Part 2: How to work with CSS
- Test in several browsers; start with Chrome Win/Mac/Android, Firefox, Safari Mac/iOS, Samsung Internet, and one odd one, just to keep you on your toes.
Ex: Fonts because a beginners mistake is to assume that browsers (oses) render fonts similarly and the space is consumed unequally, depending on input (asian characters, emojis,..).
- Browsers are a reality to be experienced.
- A WebSite Does Not Need To Look Exactly The Same In All Browsers.
- Trial and error is OK.
- Put borders around the elements you're working with. Makes it easier to see what's going on. More such tricks.
- Better to be clear but verbose than succinct but incomprehensible -> shorthand properties
- "Shorthands reset all components to their initial value, so you can avoid inheriting things you don't intend on.
- Things like font (which *technically* isn't a shorthand) can avoid accidentally inheriting boldness or italicness, which is useful."
- Exceptions: margin, padding, border, border-radius
- If the answer is "add more divs", it’s the wrong answer - or the wrong question.
- Please give me practical tips and tricks for this chapter.
Part 3: technical chapters
Section 1: What makes CSS special
Selectors should have their own chapter. Not sure about the rest, though; maybe combine them into one.
Selectors
- how selectors are read right-to-left
Harry: I would never encourage anyone to write selectors *for* performance, but it just so happens that the traits of a ‘good’ selector also happen to make a selector very fast.
- https://csswizardry.com/2015/04/cyclomatic-complexity-logic-in-css/
- and how to write them well
- pseudos
- focus, :hover, :focus-within (Adrian)
- CSS selectors can be very complicated giving one great satisfaction at one’s cleverness. Avoid the temptation to be clever. In 99% of circumstances use the dumbest selectors possible.
Cascade
- How it works; purpose; drawbacks; using !important to identify problems
- How to work out which CSS rules apply to an element, and why they do.
- Example: style.display = ''; allows regular cascade to return
Inheritance
- Too little for its own chapter? Combine with cascade or specificity?
- Example: font inheritance good
- Example: margin inheritance bad
- Example: opacity inheritance confusing. Font-size may have similar problems
- cascade VS. inheritance (Harry)
Specificity
- Formal rules
- How one selector overrides (or doesn't) another. How specific to make your selectors.
Section 2: CSS fundamentals
Units
- px, em, rem, vw/vh PERCENTAGES, nonsense units such as cm, pica, pt, in
- Px fundamental CSS unit; em and rem relative to font size; vw/vh relative to viewport (which viewport; what if toolbars disappear?)
- Keywords, global such as inherit, property-specific, and nonsense keywords such as initial and unset.
- percentages: relative to WHAT?
Box model
- width, height, margin, padding, border. Border-box. Percentages (or in Units chapter?)
- border vs outline
- Mistakes were made: box model, margin collapse
- Block-level vs inline
- display (inline, block, grid, flex)
- display is secretly display-inside (grid, flex) and display-outside (block, inline, table-*)
td {display: flex} -> td is not a table cell any more; https://www.smashingmagazine.com/2019/04/display-two-value/
- vertical aligmnent
- Line boxes? (Here or elsewhere?) Be brief.
Layout
- Flexbox and grid
- More fundamental stuff? If so, what?
- Old techniques: floats and tables. Do not use. Distrust any resource that tells you to use floats.
- flexbox order isn't reflected in the accessibility tree
- reordering consequences and options in css
Positioning and z-index
- Positioning basics
- Stacking contexts
- * {position: relative} <- why not?
Special HTML elements
- inputs
- scrollbars
- <progress>, <details>, <meter>, and <hr> are harder than they should be.
- Table elements have their gotchas.
Advanced thingies
- Better title needed
- variables/custom properties: Highlight local scoping possibilities
- calc()
- Advanced math stuff (max() and so on) Ask Tab again in December.
- Enough for separate chapter? Split up?
Section 3: Other topics
These are the most sketchy chapters.
Viewports
- ? Mostly because I'm the worldwide specialist and writing this chapter would be easy. Not 100% certain it belongs in a beginners handbook, though.
- Visual viewport, layout viewport, meta viewport.
- Why so complicated? What problem does it solve?
Media queries and @supports
- Especially width (and warning not to use device-width)
- The limits of @supports (transition-property: nonsense)
CSSOM
- Explanation.
- Dangers of offsetWidth and related -> re-layout
- How JavaScript can change styles and style sheets
- Typed Opject Model https://css-tricks.com/working-with-the-new-css-typed-object-model/
Modularization
- Not sure yet if I should include this chapter.
- Inline CSS and why it's generally bad
- CSS modules
- Ordering your stylesheet http://bradfrost.com/blog/post/css-architecture-for-design-systems/
- BEM
- CSS in JS
