Four quick CSS tips from CSSConf 2015
I recently attended the third annual CSSConf here in NYC. The conference scheduled sixteen speakers over two days with varied content and subject matter. Some speakers talked about the gap between design and development. Others touched on coworker relationships and styling for the web’s future, “post CSS”. Most focused on CSS-based web development. Here are a few takeaways that are easy for almost anyone to integrate into their workflow.
Pause CSS animations for easier debugging
Troubleshooting CSS animations can be hard. The web inspector assists with syntax errors, but you’re on your own afterwards. Traditionally we debug by running animations over and over to detect problems. It’s a tedious, unreliable process.
As Lea Verou pointed out in her talk, there’s an easier way: pause your animation to pinpoint issues. To do so, make three temporary changes:
- Slow your animation to a large, round number, like 100 seconds.
- Add the property
animation-play-state: pausedto pause your animation. - A negative CSS animation delay starts an animation immediately, as if that amount of time has already gone by. So add a negative
animation-delayproportional to where you want to pause the animation.
For example, let’s assume you slowed your animation to 100 seconds. Then an animation-delay at -1s sets it to the beginning, -40s to 40% through, and -99s to the end. -100s will go through 100% of the animation, bringing you back to the start state. To step through different animation points, just change this animation-delay property.
A default responsive image format: img with srcset and sizes attributes
Responsive images come in several forms. Several rely on the srcset attribute on the usual img element. Others use the new picture element. It’s often confusing which to choose. To sort things out, David Newton, had a straightforward approach. In most cases, use the img tag with the src, sizes, and srcset attributes. It covers 90% of use cases with less verbose syntax than the picture element.
Use repeated class declarations instead of !important
Almost any CSS veteran knows to generally avoid using the !important rule. Its extreme specificity overrides everything, which can lead to messy, bloated CSS. Yet in rare instances it feels like the only valid option when extra nesting levels (e.g. from .foo to .bar .foo) won’t cut it.
As Estelle Weyl argued, there’s another way. Repeat a class declaration multiple times until you override what’s needed. Yes, it’s ugly and you should only invoke it rarely, but it doesn’t rely on the nuclear !important rule. Nor does it add extra levels of nesting, which is fragile if you change your HTML later. For example, instead of this:
.foo {
color: #f00 !important;
}
Write this:
.foo.foo.foo {
color: #f00;
}
Repeating class declarations actually adds on specificity. So in this case, .foo or .foo.foo later on won’t override the red color.
Lean on opacity and transform for CSS animations
As Ryan Seddon noted, it’s important to avoid paints and reflows during CSS animations. Both are costly and slow. They contribute to a jerky, suboptimal user experience, especially on mobile. Unfortunately, animating most CSS properties trigger repaints; CSS Triggers has the full break down. Two properties – transform and opacity – avoid this. Use them for animation whenever possible.