CSS

April 9 is CSS Naked Day when some webmasters unlink their stylesheets so that the page is rendered using the default values. Reverting to the defaults should actually improve most hatmaker (as in mad style and no logical substance) websites, but it turns out lots of tweeking is actually required to pass Google’s lighthouse audits.

Some basic things that need to be set:

Font Size

Lighthouse’s Document doesn’t use legible font sizes in it’s SEO (as opposed to Accessibility audit for some reason) is one of the most basic errors to avoid.

W3C’s Care With Font Size advises:

1. Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of “fine print.”
2. Use relative length units such as percent or (better) em rem may be newer than the article

Good practice is generally to use rem where the assumption is 16px=1rem.

Lighthouse’s rule is 12px (0.75rem) is the minimum permitted size and 60% of text should be at least 12px.

Among the weird defaults in CSS are headings, which for h5 and h6 shrink the font-size below the base 16px

1. h1 2em
2. h2 1.5em
3. h3 1.17em
4. h4 1em
5. h5 0.83em
6. h6 0.67em

The fontsizes for the heading are typically too small, and the margins too big.

Tap Targets

The default for link element a doesn’t include any padding, leading to the common Tap targets are not sized appropriately.

Worse yet, is overlapping tap targets causing neighbouring links to be called when touched.

Getting started with CSS container queries

Margin collapse

Color

The arithmetic of colours

Hue

A color’s hue is an angle in degrees:

hue is the first argument for two similar CSS functions, hsl(hue saturation lightness) and hwb(hue whiteness blackness).

Style Guides

Block, Element, Modifier

github

Tutorials

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

https://css-tricks.com/bem-101/

https://google.github.io/styleguide/htmlcssguide.html

https://blog.logrocket.com/5-things-to-consider-when-creating-your-css-style-guide-7b85fa70039d/

https://cssguidelin.es/

Templates

Layout

Alignment

As far as I undertand it, flex and grid are bandaids for these not being implemented in the default display: block yet. These are very confusing because the work differently not only in different display settings, but also if flex is set to row or column.

• justify-content
• align-content
• justify-self
• align-self
• justify-items
• align-items

Flex

Froggy

Flex is a newish option for the CSS display property, and simplifies responsive design by replacing lots of historical cruft.

functions

clamp(min, preferred, max)