This is inspired by me walking into a room to find my parents and nephew trying to do an A to Z of cars.
A accessibility
What a lot of people forget, but I think is just as important as responsiveness.
B block
Perpendicular to the writing direction.
C calc
Doing calculations in CSS. Very handy.
D display
block, inline, inline-block, flex, inline-flex, grid, inline-grid, none, etc
E :empty
A useful pseudo-class for styling elements with no children. As long as they don't have any white space within them.
F flexbox
When I first started CSS I learnt by looking at the Inspector and playing with things. And then I copied someone who did their layouts with floats. And it was so hard to position things. Learning about flexbox made all the difference.
G grid
What still feels to me like flexbox's more complicated and more powerful sibling.
H height
How much space something takes up horizontally.
I inline
The writing direction. Really useful for centering, where you can use margin-inline: auto.
J justify
In Flexbox Zombies, you use your justify laser to target zombies in the direction you're firing.
K @keyframes
Animation steps.
L line-height
Can make text look totally unreadable if it's too big or too small.
M margin
Space around an element that doesn't make the element bigger.
N none
Useful to stop displaying something or removing borders.
O object-fit
Although it seems like this has been around forever, I came across something a while back that was relatively. It included some JavaScript someone had written to cope with object-fit being new and not working in all browsers yet.
P padding
Spacing around the element that makes the element bigger. Negative padding is not a thing like negative margin is.
Q queries
Media queries and container queries, used for responsive design and accessibility.
R responsiveness
Important for making sure your site fits on all screens. Seems pretty basic, but there are plenty of sites which don't fit properly at some sizes.
S specificity
This becomes a pain when trying to override styles from a third party. Although recently I have seen some CMS plugins using :where, which helps a lot.
T text
Sometimes used for font styling. And sometimes you use font. Except if you want to change the colour of the text, in which case it's neither.
U units
The most used of these are %, px, em and rem. Also fr in grids and s and ms in transitions and animations.
V visibility
Interesting, the opposite of visible is hidden. Which is not what you'd logically think it would be.
W width
How much space something takes up horizontally.
X overflow-x
A bit of a cheat for x, but there's nothing beginning with x. This controls the horizontal overflow. x is also used with Tailwind where eg mx is the horizontal margin.
Y overflow-y
As with x, this controls the vertical overflow. And y is generally to denote vertical in Tailwind.
Z z-index
The highest/lowest z-index you can use is (-)2,147,483,647. Or infinity will give you the same thing. But typing a load of 9s and then wondering why it isn't working is a much simpler method.
Top comments (0)