HTML and CSS Reference
In-Depth Information
It was the largest-scale project I had worked on in many aspects:
• Yahoo's user base is massive. Mail alone has about 300 million users.
• Hundreds of people spread across multiple teams were working with
the HTML and CSS.
• We were developing a system of components to work across multiple
projects.
It was during my time at Yahoo that I began to really examine how I and the
team at Yahoo build websites. What pain points did we keep running into,
and how could we avoid them?
I looked to see what everyone else was doing. I looked at Nicole Sullivan's
Object-Oriented CSS, Jina Bolton's presentation on “CSS Workflow” and
Natalie Downe's “Practical, Maintainable CSS,” to name just a few.
I ended up writing my thoughts as a long-form style guide named “Scalable
and Modular Architecture for CSS.” That sounds wordy, so you can just call it
SMACSS (pronounced “smacks”) for short. It's a guide that continues to
evolve as I refine and expand on ways to approach CSS development.
As a result of this exploration, I've noticed that designers (including me)
traditionally write CSS that is deeply tied to the HTML that it is designed to
style. How do we begin to decouple the two for more flexible development
with less refactoring?
In other words, how do we avoid throwing
!important
at everything or
falling into selector hell?
