This week we welcomed the world of CSS – what it is, how it developed, and how to use it.
To start with, we looked at CSS Resets, and with it came the suggestion of Eric Meyer’s reset. This is the reset I’ve been using on all my projects this week across our two modules, and I’ll admit, it scared me a bit at first because it’s a pretty ruthless reset…and it meant that everything from there was all under my own control. Granted, that’s probably meant to be the positive.
And speaking of control…I have had some experience with CSS prior to this course, but I’ve always been a little fearful of it, or found it annoying – mainly, because it’s never quite worked how I’ve wanted it to, or imagined that it should. What on earth was the difference between margin and padding? They both made space on the page, right?! Why doesn’t all of my text want to sit in my neatly positioned box? And for the love of god, do not zoom in or out too much on the page, or the layout will just fall apart…
What’s been made clear to me this week is a need for a shift in my thinking – which couldn’t have been made more obvious in watching “Why is CSS so weird?” from the Mozilla Developer YouTube channel.
“In reality, we are designing for an unknown, infinite canvas, and we don’t know all the variables.”Miriam Suzanne. “Why is CSS SO WEIRD” YOUTUBE, uploaded by mozilla developer, 2/10/19.
I’ve been guilty of thinking of CSS as ‘inflexible’ until now because it wasn’t doing exactly what I wanted – and that’s…actually by design. As Miriam notes, CSS is a presentation layer that we are okay with losing. That CSS is designed to not cause harm, and to ensure that the content is not lost when a user imposes its own variables on the website page (e.g. from various browser types, defined settings, device types, and so on).
I also loved Miriam’s metaphor of designing a website that is then given over to a user’s control as writing stage directions for a play, and then seeing a production/theatre company go in a completely different direction with them. It echoes what we’ve heard about web design in some of our previous class sessions – that the beauty of the web is its flexibility. It is not designing for something like print – once the website is made live and available, it’s out of our hands and into the user’s. Therefore, to make the best use of it, we have to see this as a feature and possible benefit, not a drawback.
That being said, I’m still learning how this box-model thing works. What I have found useful, however, is adding a (temporary, to-be-removed) border to nearly every element on my pages, so that I can see what on earth is actually going on behind all those padding and margin properties.