Relearning CSS With Every-Layout

I’ve made a few websites in my day, and if there is one thing that gets totally out of hand almost immediately, it’s CSS. Individually, CSS isn’t difficult. You select some elements on the page and you set some rules until things look right. Maybe you define some classes, set some variables, use some BEM conventions, define some media break points, scoped CSS, heck even get into preprocessors like less and sass. But no matter what what path you take, you always end up at the same place. Lots of styles, many with dubious utility, re-usability, or logic holding them together. Consistency is only maintained by heroic efforts to refactor with no escape from the possibility that you will break some state of some page with every rule removed. Layouts are a hack on top of another hack on top of a quick fix and style is a little bit different on each page.

Cascading What?

With every element almost requiring its own style treatment. It’s like we’re left with just style-sheets, forget the cascading part. The proliferation of CSS frameworks, like bootstrap, foundation, ui kit, bulma, etc, points to how lost people are when it comes to defining the style of their website. That’s not to say the aforementioned tools aren’t good or helpful, they’re great for getting interfaces together for something that you need to focus on the work behind the interface. However, they all come with their own opinions on layout, style, spacing, colors, hierarchy, modifiers. It’s a whole sub-genre of development stories of how a team got off of bootstrap when they were tired of fighting it to define their own style. The maximalist nature of the likes of bootstrap leads to the creation of minimal css frameworks, like mini.css pure.css, milligram, skeleton, lit, et al. All these try to do some minimal amount of hand-holding while still making the page not look like browser defaults and giving the developer some design tools to work with. Then we have the new school utility-first / atomic-design frameworks like tailwind. What none of the things do is tell you how to really develop css and many just leave you with defining your page style entirely in HTML. Not much different than just using inline styles at that point. Without a solid framework of how to make decisions and reason about what is going on when you are trying to make the page look right, it’s all just searching for fixes on stackoverflow and frequent temple massaging.

What Does It Mean for a Style-sheet to Cascade?

In simple terms it means that declarations made earlier in a manifest are overridden by later declarations applied to the same element. What does that mean though?

1. Start by applying rules to general instances.
2. As we dig into specifics, rules are adjusted for their particular context.
3. Finally, element level exceptions are made for one-off customization.

The cascading nature of CSS makes sense for a world made entirely of boxes inside of other boxes, the context from the box above carries over to the boxes inside unless overridden. One of the best conceptual frameworks that I have seen for thinking about the relation between scope, and specificity is ITCSS. Basically your CSS should be defined in layers that start at the top with the most generality and scope and become more concrete, specific, and exceptional as you work down the layers.

1. global settings, colors, fonts, etc.
2. global tools, mixins and preprocessor functions
3. generic styles (reset, and normalization)
4. bare elements, h1, a, button
5. objects, class based selectors (use BEM, SMACSS, or OOCSS at this layer)
6. components, combinations of objects
7. utilities and helper classes (overrides anything before)

This produces a hierarchy of styles that presents a clear path to deciding the scope and reach of an extension to an existing style-sheet corpus and provides a conceptual lookup pattern for the developer to find and maintain the parts of the style that they are working on.

What’s the Next Step?

So we have a real down to earth framework for developing a site’s style-sheets, the next level is a framework for developing a site’s layouts. Enter Every-Layout. Like few things before it, Every-Layout feels like required reading for taking the overly vague development architecture of ITCSS, BEM, and other scalable, taxonomic systems and merge them with the specific, concrete, component design solutions you find in open-source frameworks, tutorials, and guides across the CSS advice space. Every-Layout deals not with achieving looks for elements, but achieving algorithmic rules for containers (boxes in boxes) that are intrinsically responsive, dependable, and generic enough for wide reuse. Every-Layout starts with generic rules and settings that can be applied for any site to make them more dependable and flexible. Unlike many CSS learning resources, I found Every-Layout to thoroughly explain both core concepts that are often glossed over, why the rules work the way they do, or why this does that and what to do about it. I found myself saying, “Oh that’s why I could never get X to line up with Y consistently.” Every problem in that book is something that I have personally run into and didn’t have the knowledge to effectively understand an effective way to solve it without a whole lot of CSS exceptions and overrides. The full book is priced at $100 for full access, and honestly it has been the worth the price for me.

What Have I Done with It?

I made this site with the idea to use ITCSS and Every-Layout in its development. I’ve been avoiding really putting work into a handmade blog, even though I really wanted to, because having to develop the style and layout has always felt like beating my head against the wall before having better tools to work with. I also fully embrace the advice of a reasonable minimalism from those that came before. You don’t need CSS wizardry or corporate sizzle to make a nice personal site. So all in all, I have had a lot of fun spending time designing my personal website from the ground up and feeling like I was the one in control instead of being yanked around by the browser. I would recommend Every-Layout to anyone who has been around the block a couple of times with CSS and needs help building maintainable layouts instead of brittle, duplicated, hard-to-use ones.