1. Wrap Your Mind Around Positioning Contexts
If you really want to have a solid understanding of how to use CSS to move HTML elements to where you want them to go, you absolutely must get a grip on positioning contexts. And I don’t just mean a casual understanding, I mean a deep knowledge of their differences, behaviors, quirks, etc.
There are actually five position values that you should understand. If you can’t name all five without looking them up, then you’re definitely a prime candidate for this bit of education. Here they are: static, fixed, relative, absolute and inherit.
You need to know and understand all five, but the big two that will really change the way you code are absolute and relative positioning. Learning to wield these two positioning contexts separately, and then jumping into how they work together, will fundamentally change the way you view CSS layout, I promise. It’s a revelation that will make your job infinitely easier.
Resources To Get You There
The Lowdown on Absolute vs. Relative Positioning
This is my deep dive into the subject of positioning context. I briefly mention and explain all five but really focus in on the big two: how they differ, how they’re different and how they work together. Read through this piece and you’ll be well on your way to headache free CSS positioning.
CSS Positioning 101
This piece comes from the venerable A List Apart blog so right away you know that it’s going to be both thorough and incredibly educational. The article was published back in 2010 but the information is still perfectly relevant and it serves as a great introduction to all five positioning contexts. It’s not a very visual article but it does have lots of simple code examples to ease you into each concept.
Learn CSS Positioning in Ten Steps
This is a fantastically brief overview of the various positioning contexts. Instead of one long winded article, this page presents a little box with ten tabs. Each tab has a tiny code snippet and a sentence or two explaining the code. Off to the right is a live example layout that updates with each tab. This format is fantastic for visually linking code snippets to the layouts they produce and I highly recommend giving it a look if you struggle with mostly text explanations like the one above from ALA.
2. Master Floats
When you’re first learning CSS, floats seem like one of the most screwed up layout systems imaginable. Once you learn to use them on a basic level, you then have to learn all about how parents containing only floated children have a collapsed height, which then leads to forty-seven different ways to solve the problem through clearfixes and overflow manipulations.
Fortunately, in the long run, you do get used to the concepts behind floats and they can even become so easy to use that you don’t give them much thought at all. The only thing standing between you and that goal is a solid article or two that really digs in and thoroughly explains float behavior and techniques from the ground up.
Resources To Get You There
Everything You Never Knew About CSS Floats
In this article, I cover nearly the complete gamut of topics regarding floats in CSS. It starts off with a basic discussion of what floats are and how they work. After this, I talk about how floats effect the boxes of the elements involved, how floats get weird with elements of varying heights, the nine rules that cover float behavior and of course the collapsing height debacle and how to fix it.
All About Floats
Chris Coyier has always been my favorite author when it comes to CSS related topics and his introduction to floats doesn’t disappoint. If you’re looking for a brief but straightforward discussion on how to work with floats, this piece has you covered. I particularly like the simple, attractive illustrations used throughout the article.
The Mystery Of The CSS Float Property
While Chris Coyier’s pieces are typically brief and to the point, the content on Smashing Magazine is usually quite expansive with tons of examples and relevant discussion. This article introduces the concept of floats, tells you all about how to use and clear them and then launches into a discussion of where you typically see floats being used in real world sites. If you need to see the theory come alive, this one is for you.
3. Know Your Selectors
One of the keys to writing good clean CSS is to have a strong grasp of what CSS selectors are available to you, how they work and the degree to which they are supported on various browsers. It sounds like a simple enough topic, but in reality the world of CSS selectors is quite complex.
There are a ton of different interesting things to learn about here, from using attribute value selectors and targeting keywords in class names to how the universal selector can be helpful for debugging your code. Even if you think you can personally get by without understanding a bunch of fancy selectors, the truth is that other coders use this stuff every day and you need to be able to understand what you’re seeing when you hit view source!
Resources To Get You There
CSS Selectors: Just the Tricky Bits
This is a fun article that takes a look primarily at the more complicated aspects of CSS selectors. I skip the ground level stuff and jump straight into discussing how the concept of the DOM translates to targeting various aspects of your document with CSS. You’ll learn all about selecting children and siblings, how to chain selectors and a lot more.
The 30 CSS Selectors you Must Memorize
Jeffrey Way is a web dev rockstar and articles like this prove why. This Nettuts+ article covers a vast array of CSS selectors in a simple and brief format that places a lot of emphasis on browser support. Amazingly enough, Jeff even coded up live example pages for each of the thirty selectors.
CSS Attribute Selectors: How and Why You Should Be Using Them
Attribute value selectors are one of the most powerful subsets of CSS selectors, and CSS3 really boosts that power. You won’t believe how versatile your selectors can become with a little attribute value magic. After reading this article, you’ll be slinging around phrases like “arbitrary substring attribute value selector” like a pro.
4. Learn DRY Coding Concepts
“Don’t Repeat Yourself.” This simple phrase has drastic implications when it comes to coding. When you really dive into DRY coding practices, the result is cleaner code, less work and a beautiful new workflow that is as empowering as it is flat out awesome.
Unlike the other topics above, which are fairly narrow, this one is a pretty vast subject that covers all manner of different practices, techniques and ideas. Interestingly enough, one of the things that has recently gotten my mind focused on DRY coding practices is the use of CSS preprocessors.
Though many claim that preprocessors lead to poor coding practices, the reality is the opposite. Obviously, preprocessors themselves help avoid manual repetition, but it goes beyond that. Examining the output of tools like LESS and SASS and the goals for the languages in general has actually led to me writing better pure CSS! Once you master concepts like @extend in Sass, you can’t help but think about the implications when you’re coding with only CSS.
Resources To Get You There
DRY CSS: Don’t Repeat Your CSS
In this article, Steven Bradley introduces you to the topic of DRY CSS and covers some of its main principles and goals. He boils the practice down to three simple ideas and shows you how to implement these ideas in a real workflow. The concepts are largely borrowed from a Jeremy Clarke presentation covering the same topic.
An Introduction To Object Oriented CSS (OOCSS)
As I mentioned before, the ideas inherent in the DRY CSS movement are pretty far reaching and directly related to concepts in other constructs. OOCS is an increasingly popular methodology that aims to help you create faster, more efficient stylesheets with superior organization and less repetition. There are two main principles at work in OOCS: separation of structure from skin and separation of containers and content. This article from Smashing Magazine will walk you through the basic ideas and help you apply them to your own work.
An Introduction To SMACSS Guidelines For Writing CSS
Remember Steven Bradley from the first article on DRY CSS? He also wrote this piece, which explains a project that’s similar to but separate from OOCS: SMACSS (a project from Jonathan Snook). As with OOCSS, SMACSS has two main goals. The first is to increase the semantic value of a section of HTML and content, and the second is to decrease the expectation of a specific HTML structure. This article explains both goals in detail and provides helpful code examples so you can see SMACSS in action.
5. Know Your Browser Support
The fifth and final key to improving your CSS is to know what works where. CSS3 is far too enticing for most of us to ignore, but the hard truth is that a whole bunch of it doesn’t work in certain browsers (by “certain browsers” I of course mean IE).
The big secret that newbie web developers need to get into their heads is not that they need to memorize every single CSS feature and how every browser known to man handles it, instead its that there are absolutely amazing resources available to you that give you this information freely, you just have to know where to look.
Resources To Get You There
Nailing Browser Support in CSS3 and HTML5: Invaluable Resources to Use Today
In this article I introduce you to the relatively few sites that I have bookmarked for checking browser support. These resources are fantastic, visual and give you the information you need in a jiffy so you can get back to coding. Take a look to see what they are!
Browser Support for CSS3: What’s the Current Status?
This article was written over a year ago so the “current status” piece is arguable, but not enough has changed in this time to make the information in this article obsolete. It serves as an incredibly helpful overview of various CSS3 properties, divided into sections based on what works everywhere and what you need to watch out for. It’ll only take you a few minutes to go through and it’s well worth the read.
The Importance of Cross Browser Compatibility: Tips and Resources
If you’re really new to CSS and need a basic introduction to the topic of browser compatibility and why it’s important, this Noupe article has you covered. More than merely selling you on the idea of compatibility, it lists a bunch of great resources that you can use to ensure maximum compatibility. Of particular interest is the list of tools that will help you test your site in various browsers.
I’m Supposed To Read All This in 24 Hours?
I’ve presented you with five absolutely critical topics to study up on and no less than fifteen articles from which you can learn the principles that you need to know. This is all well and fine but in my title I promised that you’d get better in a single day and not everyone has the time to sit down and read fifteen long articles!
The good news is that I gave you three articles on each topic so you’d have some variety to choose from. I explained the contents of each in detail so you can select the one that best fits your needs. Remember to choose the articles to read not based on what you do know, but what you don’t know. Make it a goal to fill the gaps in your knowledge.
My suggestion is to browse through the content above and pick five articles to read (one from each section). Even that’s a lot to undertake in a day but most of them aren’t too much more than a thousand words or so, many are less. I’m confident that you can pull it off. If you can’t, no problem. Change your goal to improving your CSS skills in a week and read one of your five chosen articles every day for the next five days. I guarantee that come next week you’ll be much better at writing clear, concise, compatible and reusable CSS.
What Other Concepts Do You Recommend?
Now that you’ve read my top five topics that people should brush up on to improve their CSS skills, I want to hear from you. What other topics do you think CSS coders typically struggle with and what resources do you recommend for anyone looking to learn more?
Stock photos provided courtesy of BigStock