The Ultimative List of CSS Videos and Talks
2014
CSS is the most powerful tool, when it comes to web design. And it has come a long way since it has been first released in 1996. Nowadays, with CSS3, you don’t work in a two-dimensional space anymore, but actually in a four-dimensional with z-axis and animations. Complex animations, which needed Javascript or Flash before, can now be realized using CSS. With media queries you are now able to style your website for different devices which boosted mobile responsive layout. And of course, we shouldn’t forget about the CSS frameworks which pop up since quite a while and help us in a lot of ways to speed up our work. Although, not covered in this roundup, but worth to be mentioned: SASS which was published in 2007 starts to change the way, we work and understand CSS itself.
But all these changes come of course with more complexity and nowadays with pseudoelements, new HTML5 elements, a variety of new selectors and so on, it can take some time to make use of all of these advantages. In this blog post, I want to gather my top ten CSS video tutorials, which helped me to understand and use CSS in a better way.
Contents
- How to maintain CSS
- CSS to go – responsive design for mobile devices
- CSS3-D
- Into the 4th dimension: CSS in time
- Conclusion
How to maintain CSS
In this section I gather videos, which approach the problems of maintaining CSS code. To do so is quite a common problem, since “CSS is a mess
” as Jonathan Snook points out. This section gives you advice, how to create a modular and scalable CSS code, which you can more efficient and easily alter, to keep your layout up to date, include new sections into your webpage and so on.
CSS is a mess
Lets start with the problem, every one of us knows quite too well, nevermind how good or bad we understand CSS: It’s a mess. The alistapart-author Jonathan Snook gave a speech at the “Beyond Tellerrand”, where he speaks about how we regularly come into this mess and how to avoid the traps. He presents methods to organize our code in a more scalable and modular way, which enables us to alter our CSS code in a cleaner way.
The Top Five Mistakes of Massive CSS
During O’Reillys Velocity conference in 2010 Nicole Sullivan and Stoyan Stefanov gave a speech about the problem of “out-of-control CSS”. Once, your CSS code exploded, it will have significant impact on your websites performance. In their speech they show you the track to come to a lighter and more logical CSS structure, which will be easier to maintain. They introduce you to lint tools, which help you to evaluate the efficiency of your CSS, point you to the five most common causes of CSS bloat and explain, how you can speed up your CSS code.
The two speakers are well-known for their CSS skills. The CSS ninja Nicole Sullivan worked on an object-oriented way to work with CSS and cooperated with the W3C and others. Stoyan Stefanov is a front-end engineer at Yahoo! Search. Both speakers contributed to the famous web design bible “Even Faster Web Sites“.
Slaying the Dragon: Refactoring CSS for Maintainability
Alicia Liu tells you, how to slay the dragon. In her speech at Front-Trends 2014, she is also concerned with the problem, that CSS code grows like a hydra. Often enough we lose track about special selectors, how and where they apply and if they apply at all. Here way to slay the hydra: Refactoring, because:
Rewrites are costly and high risk, refactor instead!
CSS to go – responsive design for mobile devices
No, how could you? No one has missed the probably most important change in web design in the last years: mobile devices. Since the ground breaking article “Responsive Web Design, which Ethan Marcott published in 2010 on A list apart, the question of responsive design became one of the hot spots of web design and almost every new web design contract comes along with the task to “make it responsive”. But, what are the best techniques to do so? This section presents you some videos and speeches with quite some insight into this topic.
Responsive design for starters
Just for starters, to know, what the fuzz is all about, this five-minute introduction into responsive design will be helpful. Basically, this video introduces you to the usage of media queries.
CSS in your pocket
Angelina Fabbro focusses in her speech on cross-device debugging. She gave her presentation at the CSSConf 2014 and is a developer at Mozilla, where she also authors some articles about JavaScript, web components, Node.js, mobile app development and so on.
CSS3-D
When it comes to CSS, most people believe the third dimension is to throw a shadow. But CSS3 is far beyond. The speakers of this section will give you an insight, how deep the third dimension of CSS really is.
Thinking in the third dimension
In her presentation Val Head jumps right into the third and even forth dimension so I was not quite sure, whether to put here into the “CSS3-D”-section or “Into the 4th dimension”. Lets leave here, as the title of her talk suggests in the third dimension.
Val Head is the author of the fine e-book “CSS Animations and a well-known speaker on a lot of summits like “A Event Apart” and others.
Maths-powered transforms for creating 3D shapes
You want to enter the third dimension? Lets face it, you will need mathematics to do so. Ana-Maria Tudor speaks at length about the relationship between mathematics and CSS transforms. This is not just a talk, if you want to transform your elements, you need to have a look into this.
Into the 4th dimension: CSS in time
A screen has two dimensions and design is timeless. Not only since Quake we know, the first statement is wrong, since CSS3 the second as well, because with transition and other elements introduced, design entered the time axis. But, what are the best practices in this and how far can you go? Amazing examples have proven, that CSS3 exceeded some boundaries, designers thought to be stable after all. In this section, our speakers focus on time events in CSS.
Fun and Flair with CSS3 Animations
Lets dive into it and have some fun with the forth dimension. In her presentation at the HTML5DevConf Alexis Goldstein, author of “HTML5 & CSS3 For The Real World” and “Learning CSS3 Animations and Transitions” undertakes the effort to present you “how you can add a bit of creativity and spice to your website by taking advantage of CSS3 animations and transitions
“. The examples, she presents take care to use animations in a way, which won’t affect the user’s experience for browsers, incapable of interpreting the animations.
CSS in the 4th Dimension
In 2013 Lea Verou gave a talk at the JSConfAsia, where she introduces you into the basic concepts of transitions and animations. Verou is a web designer, who used to work for the W3C and the MIT. At the moment she is working on her latest work “CSS Secrets”, which will be published at O’Reillys.
When to .stop() using .animate() and #start using .css3-animations
Okay, okay, whats all this animation fuzz about, the jQuery developer might wonder. I just continue to use jQuery.animate(). Jessica Dillons talk on the jQuery Conference 2013 focusses exactly these audience: Why and when to .stop() using jQuery in order to animate your elements?
In this talk, you will walk away with knowledge about the differences between using CSS3 and JavaScript to perform animations. This also includes some of the tradeoffs that come with each in regards to ease of use, browser support, performance and extensibility.
jQuery Conference Portland 2013
Conclusion
This amazing list of talks and presentations helped me a lot understanding better, how CSS works and what you can actually perform with it. There are still tons of brilliant talks out there and if you are missing one, please tell me below in the comments. I will update this list regularly.
