Happy Birthday CSS (and me)

December 17, 2021

CSS (Cascading Style Sheets) turns 25 today. It was just five years ago that I discovered I shared my birthday with CSS, the markup language that is my favorite of the three cornerstone technologies of the World Wide Web. I use CSS every day and it is my core competency as a developer. So it is very special indeed that a tool that has been so central to my career over the last 20 years became an official recommendation of the W3C on the same date as my birth.

I first began coding websites before CSS was a common practice or had browser support. When I started, we would build sites with HTML tables and add attributes to HTML tags for fonts, colors, spacing, and more. It meant the styles were embedded in the code and had to be updated on every page when you wanted to make a change.

My first experiences developing with CSS were through the GUI of Dreamweaver. I would add my styles by adding values to form fields within Dreamweaver. I continued this practice once I moved away from using table layouts and started using floats and positioning. It was not until after I read Andy Clarke’s book, Transcending CSS, that I decided to go back to hand-coding and stop using a visual editor.

I remember it was quite hard to write CSS at the beginning because I was not as familiar with the syntax. Many times I would open up Dreamweaver and use the form fields and then view it in the code editor to learn how to write it myself. But I soon picked it up and it is strange to reflect on that time when it was more difficult for me to write.

Andy’s book helped me to embrace the semantic Web. It gave me a solid foundation of thinking. I learned how important it was to write good semantic HTML as a foundation to writing good CSS to make the presentation layer come alive. And that is where the fun was for me. Making a design come to life or in the language of the Motivated Abilities Pattern, is where I “realized concepts” which is the primary result I want to achieve in my work. CSS became the layer that most empowered me to do that in my work.

Another Andy was influential in my foundational understanding of CSS. Andy Budd’s CSS Mastery helped me to develop solid skills with CSS and Andy Clarke helped me to expand that to become more creative in my use of CSS.

A foundational lesson I learned from Andy Budd was dealing with “bugs.” In those days, there was still much more difference in how different browsers implemented CSS and there were real bugs. But Andy helped me to realize that a majority of the “bugs” that developers encountered were more user errors or a lack of understanding on our part. I found many of the bugs were more about my lack of understanding than true bugs in the browsers. This is something I reflected on a year ago when reading Ahmad Shameed’s excellent book on Debugging CSS. I thought about how Andy Budd had taught me that important lesson early in my career and it is still true today.

CSS3

The next big thing that excited me was the new tools we gained in what was labeled CSS3. CSS3 is a bit of a misnomer because, at that time, the way the CSS spec process changed. No longer were there numbered releases but different features were developed modularly which meant we didn’t have to wait for one big spec but had individual features that were implemented much quicker.

It was also around this time that browsers started using prefixes which allowed us to experiment with new features and use progressive enhancement to our advantage utilizing this cutting-edge technology. We no longer had to rely on images to achieve rounded corners. Opacity was added for colors and backgrounds. It was an exciting time and led to more creative designs (and it was just a lot of fun). It was during this time that I would play around more with my designs in code than in mockups.

Bonnier Corporation

My next big leap forward with CSS came when I started working for Bonnier Corporation. Bonnier published magazines and I was hired to be part of the Web team. There were four of us and we were referred to as “themers.” Bonnier used Drupal to power their sites. We had a development team that built the Drupal templates and our role was to use CSS to bring the design to life from those templates. It was a fast-paced production environment filled with a variety of challenges that sharpened my skills exponentially.

Because I did not have as much control over the HTML code, I had to find a lot more creative ways to target elements to apply CSS (which I later wrote and spoke about at a Web conference). And the scope of many of these projects was a lot bigger than what I had been doing. I benefitted greatly by having teammates who I could ask questions and learn from. The first ten years of my career were as a lone designer/developer in a large Christian ministry. I did not have the opportunities to learn and grow from others as I had at Bonnier.

I believe the valuable experience I gained from that job helped prepare me for the next big challenge in my career of making the paradigm shift to making responsive layouts that would work on a variety of different devices and computers.

Responsive Web Design

I remember listening to Ethan Marcotte on The Big Web Show talk about this new way of thinking in developing for the Web. He coined the term responsive web design. It made me uncomfortable because it was such a different approach. But I knew from that moment that it was going to change our industry. Bonnier was a slow adopter of the responsive approach. I did get to work on a couple of projects where we retrofitted existing sites to be responsive. But I didn’t really get my feet wet or jump in the deep end until I came to work for Easy Designs in 2013.

I had read Aaron’s book, Adaptive Web Design around the same time that I read Ethan’s book on responsive design. My first project with Aaron was to retrofit a site for Sewanee, The University of the South. I worked on several other retrofits and built one site from scratch using a mobile-first approach. I gained a lot of confidence at Easy Designs as I worked on more responsive layouts. I also benefitted from many conversations I had with Aaron as this new technique was continuing to evolve.

Adventures in Responsive Websites (Lessons from the Workshop) – post from September 2012

CSS Grid and New CSS Layout

It was almost five years ago to the day that I read Rachel Andrew’s book, Get Ready for CSS Grid. I had subscribed to Rachel’s newsletter, CSS Layout News over a year earlier so I had been passively following along as she shared what she was learning about CSS Grid Layout. I knew that CSS Grid was going to make it into the browsers in 2017 so I wanted to get ahead of the curve and learn about it while I took a break at the end of the year from project work.

Through the book and Rachel’s site, Grid by Example, I learned the basics of CSS Grid Layout and began to incorporate it into my work even before browser support happened in March of 2017. I used feature queries (@supports) to serve the layout to browsers that supported it.

I love CSS Grid Layout. It quickly became a regular part of my workflow once learned to use it. It has made layouts so much easier to accomplish. I use it a lot in conjunction with Flexbox in my projects.

I am much indebted to Jen Simmons, who has done a lot of work communicating, educating, and advocating for new CSS layout techniques. Check out her Layout Land videos. I am so grateful for her and Rachel Andrew.

CSS Grid: First Steps – blog post from March of 2017

CSS Today and into the Future

It has been an exciting year for CSS. A lot of new things have dropped in the past two years and we have plenty to look forward to in the year ahead. Clip-path, aspect-ratio, gap, and custom properties are among the things that I have incorporated into more of my work this year. I am really looking forward to container queries and subgrid becoming available in 2022.

I was very encouraged to see the adoption rate of new technologies in this year’s State of CSS report that was posted this past. It is an exciting time. I may not use every tool available but I do my best to keep abreast of what is happening in the community through sites like CSS Tricks, Smashing Magazine, Ahmad Shadeed, and by following key people in the industry on Twitter. I also take advantage of conferences like Hover and the Chrome DevFest.

Happy birthday, CSS. Now I am going to go eat some cake.

Other links of interest

• 20 Years of CSS (2016)
• A brief history of CSS until 2016
• 25 Years of CSS (Reflections from Eric Meyer)
• CSS: Web History by Jay Hoffman
• CSS 2021: Web Almanac by HTTP Archive