I took a day away from my studies to attend the awesome CSSDay held at InfusionSoft in Chandler, AZ – just down the road (well, 20 miles) from my house.
A few key items I took away from the event:
CSS can get complicated. With features like inheritance, cascade (the fundamental raison d’être of Cascading Style Sheets), and the sometimes opaque specificity rules, it’s easy to get unexpected results. And this is before you get to responsive design which, even with frameworks like Bootstrap, means you need to understand exactly where an element “is” on the page (it’s full context) to fully predict how it will behave with your CSS.
It’s tempting with all this complexity to use a different rule for every element:
If this <p> is in this <article> in this <div> then make it look like this; but not if it’s on the About Us page, in which case it needs to look like this.
It’s tempting, but you shouldn’t. Here’s why:
- Don’t make everything special. All special designs result in extra code that has to be downloaded and can end up making for slow websites.
- You end up with inconsistencies, conflicts, and a hot mess of spaghetti CSS.
- It’s not scalable, manageable, reusable, or understandable by anyone other than you, and probably not even you in six months.
So what to do?
- At the very least – be consistent.
- Categorize your styles and use naming conventions.
- Get familiar with the idea of isolation of concerns – there’s a difference between a layout (arranging things on the page) and components (content).
- Aim for reusability, flexibility, encapsulation, resilience and other goals that are often associated more with object-oriented programming than CSS.
- Consider using post- and pre-processors to simplify your CSS and make it more resilient, consistent, less buggy, and less work for you, the developer.
For us beginners, a couple of very useful takeaways:
This allows for content-driven layouts. It’s not completely supported in all browsers (i.e. older ones and for IE, nothing older than IE10), but it gets rid of some of the more frustrating “bugs” in CSS. Things that I’ve already run into like “what do you mean I can’t easily set the height of three cols in my row to be the same?” Easily solved with the align-items: stretch rule. Really? It took 10 years to solve that?
- The Double-Container pattern.
This is where you use an outer container for the overall layout structure, and inner containers for the content. Use magic of negative margins on the inner containers where necessary to make sure it all lines up – even if that last column flows onto the next line when viewing it on your phone.
- Object Oriented CSS methodology.
Essentially you separate out your CSS classes into ones used to define structure (layout) and ones used to define design (what your content looks like). So a structure class may define properties such as position, dimensions, float, etc. But a design class may define properties such as color, background color, border radius, font size, and so on.
- Use temporary background colors.
Yes, make it look like a paint shop spilled paint swatches all over your site. Use background colors as a beginner when doing layout so you can see the hidden lines, where things line up (or not) and so on.
And a couple of topics that I will be looking into further:
- Sass architecture.
As CSS has matured, it’s no longer okay to act like it’s the Wild West out there. Be responsible. You can help avoid CSS collisions, inefficient and repetitive code by using a preprocessor like Sass, but using a preprocessor isn’t the only thing you should do. Sass architecture means using best practices similar to what you might see in any other coding project applied to CSS. Things like separation of concerns, reusability, interoperability, maintainability, and so on. Just like you wouldn’t use one class in your C# project to hold every method in your entire project, you shouldn’t have one CSS file for every function, mixin, theme, component, and layout on your entire site. Get them organized.
What conference is complete without swag? A couple of nice t-shirts, USB hubs, and a very nice double-walled glass tea mug (with strainer!), as well as the usual assorted stickers, business card holders and such.
Overall: Well worth the money (I signed up early), learned lots, and learned about things that I will need to learn in the future.