Member-only story

The Programmer’s Guide to the Stylesheet

Mohammed Ibrahim
Prototypr
Published in
14 min readAug 29, 2019

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.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Responses (2)

What are your thoughts?

This is an _excellent_ quick guide to some of the thornier issues in basic CSS.
Personally, I would add more about “rem” — which is “em” but based on the font-size in the root parent (i.e., <html></html>). Using “rem” insures both consistency across…

--

Unfortunately, none of the examples actually render (at least not in Firefox), so we can’t see what’s being talked about…

--