Comment by Siddarthan Sarumathi Pandian on "I am Sarah Drasner. Ask me anything."

Hi Sarah, thank you so much for doing this AMA.

A quick background story about my struggle with CSS:

I've always believed that given the right introduction and the correct set of tools, one can always pick up anything software engineering related and that's how I picked up backend engineering.

My journey with CSS, however, hasn't been quite the same. Truth be told, I just jumped into the code and started tweaking things. And, honestly, when I started I found it really hard and it used to piss me off when my designer told me to move items 10 pixels to the left and right, over and over again and I left CSS for good (perhaps a very juvenile decision as a young engineer back then).

Now, getting to the actual question: Right now, I am a full-fledged backend engineer and I look at all the UI engineers with pure amazement (and a little bit of jealousy :P).

I would love to do UI engineering as well at some point, so what would you recommend me to do to get started with it?

I would want to do it in a very systematic way, but I haven't really found the right tutorial and there are so many solutions to the exact same problem. Centering a div, for instance. It could be done in so many ways and I never figured out which is the right one. What would you recommend me to do?

Hi! Great question!

It's actually interesting because if you dig into your question here, you might find there's a contradiction- you want to learn systematically but have so far tried to learn by jumping in by tweaking things.

I'm not at all pointing this out to get on you, but because I think this is actually super common. The idea is that CSS is easy, and that it's a toy language. So people don't invest the time to learn it they did other programming languages and indeed, it doesn't even fit the same set of patterns for a lot of the programming languages we're all familiar with. So then people inevitably fail.

It would be a bit like learning React without learning what an object is. You can use any number of properties, but you need these fundamentals for any of it to really click.

Here is how I learned CSS (and when I say this, I'm not at all saying it was easy or that I just skipped through a field of daisies sprinkling display: block on them and singing to myself. Not even in a bumblebee costume - if you're old enough to get that Blind Melon reference.)

There's a lot of blind memorization that comes with time, and that's the low hanging fruit. It's font-size, not text-size. Stuff like that probably won't get in your way but you do have to commit to memory to be fluent.

In order to learn layout, the one single most important thing I've learned is to think like the browser. All too often when we're poking at CSS, we're responding to what the browser looks like it's doing. Why'd it go over there? Why did that wrap to another line? Why aren't the text and divs acting the same! Arrrgh! That kind of debugging will rightly drive you crazy and won't get you very far.

Learn the difference between a block level element and a span. They behave totally differently, and for good reason.

Learn the difference between different kinds of positioning. Learn what it means to leave something in, or to take it out of the document flow. Learn that position: absolute; on it's own is different from an absolutely positioned element inside of a relative container.

The sooner you dig into these mechanics, the less you will fight the browser, and the sooner you will make it bend to your will. Use the devtools heavily. Read resources from smart people like Chris Coyier, Rachel Andrew, Jen Simmons, Nicole Sullivan, Lea Verou, and Jonathan Snook.

Soon you'll see the order in the chaos. You won't see it the way that it appears on your screen, but the way that it's interpreted. This is the key.

Search Hashnode