Member-only story
Essential CSS concepts every designer should know
Illustrated and animated for clarity
Like most UI designers, I began on the design side of things before learning about the technical aspects of user interfaces. I have always been eager to understand how things work, and UI was no different. Before I knew it, I was programming complex front-end applications. Starting back in the day with ActionScript in Macromedia Flash followed by Adobe Flash Builder, HTML, CSS, jQuery, all the way to fully search engine optimized JavaScript web applications combining Next.js, React, and headless content management systems such as Contentful — which is fantastic.
“gotoAndPlay(25);“
— ActionScript 2.0, 15 years ago.
When working with UI designers, there is a very clear distinction between designers who know how to code and those who don’t.
Fifteen years ago — but just as much today — a good graphic designer knew the basics of printing. He knew paper types and weights; he knew different printing techniques; he knew the drawbacks and strengths of those techniques, how to combine them, etcetera. Likewise, a good (UI) designer should know the basics of CSS and how user interfaces are actually built.
Today, we will look at the five most fundamental CSS concepts that every designer should know.
1. Parents and children
Whether you are aware or not, every composition is a hierarchy of some sort. Mentally acknowledging this hierarchy and then implementing it in your design helps structure information for the user — and keep your design tight and consistent.
Hierarchies consist of parents and children. Just like family trees, children can be parents to more children, and most parents are children themselves. In other words, you have ancestors: parents, grandparents, grand-grandparents, etc., and you have descendants: children, grandchildren, etcetera.
Think of your design as a collection of ancestors and descendants, with at the very top the design’s…
