For me, it's doing. Building. Maintaining. Every project pushes me to improve. Try something a little cleaner and more efficient each time. I am a terrible creature of habit and struggle to alter my ways to improve them. With each new project, I try to do it better than the last. Keep on building.

I personally use http://tachyons.io/ (tachyons-sass version). As a marketer/developer it allows me to write Functional CSS. I only need to write small amounts of custom CSS now which is a real timesaver. It has also improved my design skills as i no longer hide everything in hamburger menus.

Tachyons uses small, clear, easy to read classes that are easy to apply and do one thing.

How to Improve CSS Skills in Two Steps

1. Read CSS

2. Write CSS

…I'm not joking! If I had to simplify everything I'm about to explain below it could be summarized in these two simple rules.

Imagine a pie chart in your mind, if you divided that chart between 'time spent reading CSS' and 'time spent writing CSS' how much time does the 'reading CSS' have? Is it a sliver? Does that section of the chart even exist?

It's been my experience that most people working with CSS spend almost zero time reading CSS they (or anybody else) have written.

Imagine trying to learn a new human language, but never reading anything written in it, and definitely never proofreading over what you've written in it to see if it makes sense. Is that a good way to increase literacy?

Likewise, writing pure, vanilla, unassisted CSS really teaches you a lot about CSS. It's very trendy now to use preprocessors and compilers and plugins and shorthand syntaxes and all sorts of tooling to help you write CSS - but if you really want to focus on learning CSS the best way is to write 'just CSS' and skip over all the other tools.

How to Improve CSS Skills the Hard Way™

• never copy/paste code you didn't author (re-type it at least once to make it your own)
• never be afraid to delete code (if you're afraid of it, that's reason enough to delete it!)
• be quick to create isolated tests to experiment with solutions
• aim to spend as much time re-reading your code as you do writing it (in general)
• constantly re-ask yourself “Does this need to be here? What happens if I delete it”
• if you want to improve a section of code, ignore it and reimplement it, keep whichever turns out to be better: the original code or your rewrite
• view all CSS you didn't personally author as a potential point of failure, and work hard to eliminate those from your codebase

Basically, the TL;DR is this:

Build 1000 things with CSS.

If you try to build 1000 web apps, or 1000 websites you'll never finish, so try to work at a scale where you can output dozens, or hundreds of things.

The easiest way to get really good at CSS is to write a lot of CSS. Find creative ways to write lots and lots of CSS!

Writing CSS is easy, anyone with basic knowledge of CSS can make something look good. The hard part is to write maintainable and scalable CSS.

Here are few things I would recommend to a beginner:

Follow a naming convention

Naming conventions and architectures help you structure your CSS and markup in a logical way. Read about the different conventions and learn about the “why” and the “how” of them, this will help you and your team to stay on the same page.

BEM, SMACSS, ITCSS are just a few to name.

Keep it organized!

Organize your CSS. Use a preprocessor, split your CSS into parts, organize responsive CSS. Proper organization is the key to maintainable CSS.

Don’t rely on UI Frameworks (But don’t ignore them)

There are many UI frameworks out there, don't follow anything blindly. Learn from them, replicate the good things and drop the bad parts.

If you do decide on using a framework then make an informed decision. Ensure that the framework doesn't become a dead weight to your project.

Practice!

You only become good at something when you practice. Declarative nature of CSS makes it hard to grasp at the start. Keep on practicing, ask and learn from your fellow developers.

Usually you improve such skills if you have to build and maintain things :)

the important thing is to do both -> why ? because you have to fix your own mess and the more you do it the clearer structure and concepts get.

If you just build things you probably wont get a good grasp on the downside of the picked approach

if you only maintain things you can always blame the others because they made the "stupid decisions"

and ofc reading up on atomic css, functional css, media queries inside of classes or outside containing different classes, explicit element behaviour vs composed element behaviours and so on helps to stay up to date.

and in time you're actually able to explain why you picked certain approaches and if you can do that you basically are "good" most of us remain in the "okay" or "don't know we actually suck" level :) like I do ... but i'm a backend guy ....

Check out talks given by Harry Roberts.

I use straight scss and my media queries in a separate sheet. I use gulp to concat and minify. I tried to get into the oocss and just couldn't justify a way to put it into a pretty solid workflow I already have.

If you want to have some kind of structure for your css you should check SMACSS, OOCSS and BEM paradigms.

These are cool, and will give you proper direction if you want to write better CSS.

I'm not using SMACSS and BEM all the time because it's not always necessary but I like idea of OOCSS very much, so I feel like I always write modular CSS. Commenting might help too.

There is no answer for how to write it correctly, it's up to you to discover how you like to organize code :-)