Tuesday, July 12, 2016

The Moment CSS Started Making “Sense”

It was way back in 2008 that Chris shared his "Ah-ha!" moment when working with CSS. You know, that metaphorical lightbulb that ignites when you go from not knowing what the heck CSS is to suddenly having a baseline for understanding how it works.



For Chris, it was the combination of three concepts:



  • Every page element is a box

  • I can control the size and position of those boxes

  • I can give those boxes background images


It's funny how something seemingly so simple can snowball into a skill that defines a career, whether that's designing websites for clients or starting a blog like this one.


There's a timeless quality to recalling the "Ah-ha!" moment for anyone. The CSS-Tricks team has grown in the eight years since Chris wrote that post, so we thought it would be fun to poll ourselves and share the moments where CSS started making sense for each of us.


Geoff Graham


CSS started to make sense for me when I realized that it was a document containing styles used by an HTML file and that classes were placeholders for where styles should be inserted.


This is somewhat similar to Chris' experience, but more on the document level of things. I wondered how a web browser was able to change the presentation of a page simply based on what was in the HTML document and all I saw was something like this:




  
A Headline


  
A clever subtitle








  
The content and all that.








  
Copyright 2006

I couldn't for the life of me understand how that chunk of markup could be transformed to a full-fledged design. That is, until I saw the linked CSS file in the document :



Opening that file got the ol' hamster wheel in my brain turning and led me to start looking at the markup on an element-by-element basis. Where I was looking at the HTML markup as a whole, I was starting to look at it in blocks:




  
A Headline


  
A clever subtitle

...where that block corresponds to the rules for .header in the stylesheet. I could see how the height for that block was given a height, a background image, and even could change the color and size of the text within it.


Robin Rendle


I was sitting in my backyard fumbling my way through Jeffrey Zeldman's Designing with Web Standards when it struck me: web design could go far beyond making my dumb band's website. With a single command it was possible for websites to reveal their guts, their internal logic, as by that time the Web Inspector would permit me to move boxes on the screen with changing one of the values for padding or margin.


However, it wasn't until I experimented with this line of CSS that I was hooked:


.element {

  float: right;

}

With this tiny string of code I could break the whole page, I could smash columns of text together and hurl images off into oblivion; the treasured words of the author were mine to squeeze and stretch, no matter how ugly the end result might be.


I realize now that it's in this wanton destruction of other people's websites where everything began to make a little sense. Even today, as a professional web designer, I still get a kick out of breaking things and treating websites like my own personal playground.


Sarah Drasner


I'm an old timer, I was building web pages back in the days of tables before CSS was around. When it first came out, I was skeptical. For me, the big turnaround was CSS Zen Garden. This site did such an amazing job showing how presentation and content could be decoupled, and the sheer power of CSS in terms of layout and control. The ability to not repeat myself and declare something once and have it propagate everywhere had me giddy.


But my "Ah-ha!" moment in working with CSS was a little different. Mine was pretty similar to Chris', in that it started with boxes, but with a slight variation:



  • There are elements that work like boxes, which you can control position and spacing for.

  • There are elements that work like text, which you control through line-height, font, etc.

  • If I think about how the browser sees the elements and styling, I can debug it.


Past that point, I got into the sheer creative wonder of working with CSS. It started with where code meets design, but has since moved further. Imaginative programming, like animation, generative code, and all the extra magic like for loops. Organizational power for architecting design systems, with mixins, extends, and variables that SASS allows for.


What was your moment?


Many people shared their experiences in the last post Chris wrote, but it would be interesting to know what that moment is for others who may have started working with CSS since it was published.


We also posed the question on Twitter:



We got some interesting replies! Here's a few:






What was your moment? Were you viewing a website's source to dig for answers? Or perhaps a friend was showing you the ropes? Maybe it was even a blog post you read and still have bookmarked to share. Whatever it is, please share in the comments!




The Moment CSS Started Making “Sense” is a post from CSS-Tricks

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)