Member-only story
The Programmer’s Guide to the Stylesheet

This is neither an introduction to nor a crash course on CSS. Rather, I’m presenting a sanity doctrine for UX engineers, covering certain areas that I believe cause a lot of trouble. If you know enough about writing stylesheets to survive, but you wish it was less painful, then this article is for you.
The secret to good stylesheets is that nobody ever really gets good at them, at least not in any conventional sense. I’ve written thousands of stylesheets and read many more, and I can’t say I’ve ever seen one that I would describe as elegant.
Design is emotional, and so, to an extent, design code will be arbitrary. The goal here is not to force patterns where none exist, but instead to understand the few critical patterns upon which you will form your design architecture.
Position
When you begin CSS work on a project, your first challenge will be to position your elements. There are four main position types, listed below.
Except for the default type, which is static
, all other types are positioned. A positioned element can be moved with the offset properties top
, right
, bottom
, and left
.
Also, children of a positioned element will be offset relative to the positioned element’s boundary, rather than the screen.