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:
- Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of “fine print.”
- 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
- h1 2em
- h2 1.5em
- h3 1.17em
- h4 1em
- h5 0.83em
- 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
Color
The arithmetic of colours
Colour Wheel
H (hue) is an angle (degrees by default if no units are given). Red is 0 or 360, green 120, and blue 240.
S (saturation) ranges from 100% for fully the hue to 0% for gray.
Style Guides
Block, Element, Modifier
/* 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/
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
Flex is a newish option for the CSS display property, and simplifies responsive design by replacing lots of historical cruft.