An answer to “How to get good with CSS”
Hint — it take’s practice, but also a grasp of the bigger picture.
You’ve probably heard of Quora by now, it’s a pretty neat platform for attaining and sharing knowledge. There are hundreds of active categories in which you can ask and answer anything that pops to your mind.
One of the more often type of questions I see is for the bigger picture of things. While the question-answer type of concept resembles this of StackOverflow, the nature of the questions and answers is different.
The good questions, and more precisely — the answers in Quora are not in the lines of “How to I make my background stick while scrolling” or “How to set soft borders for my button”. Don’t get me wrong here, there are such questions, but they are not of much value.
What’s is interesting though are the “How do I get good fast” or “How do I organize my code”. A type of questions, that are not that welcome in StackOverflow as you probably know as they are not specific enough.
And this is my goal here — to answer the simple question “How to get good.” I won’t go into technical details, as they are not important.
Understand the concepts
This is what’s important. Grasp the bigger picture.
You probably know what background-color is, you might know what transformX does, float, flexbox and grid. You can read about them, how to use and implement. This is not the hard part. (+ there’s google to help.)
But what most people struggle is how everything is connected to each other. Why some decisions are made and why people love inventing their own frameworks and naming conventions.
You need to understand, that the way you start will define more or less the whole structure of the project. Which is why, you need to make sure you’re aware of the potential problems and how to solve them.
First, let’s start with how to get the fundamentals down properly.
There are plenty of CSS properties out there. You should not go and memorize them all. The page itself is called “reference”. You’re not in school, no one will ask you to name all the border settings you can set through your stylesheet.
But you will remember them after using them countless times. When you’re not sure how to use something — Google it. Then write it yourself, play around with the settings and see the outcome.
After some months of hard work, it will be like writing in native.
This is important, because often you will have to deliver quickly. It’s what the project lead/manager will require from you. You shouldn’t be searching for basic properties very time.
Knowing most of the properties will also highly increase your debugging abilities. Knowing how each property work and that it exists will save you a lot of time. This is why experienced developers can deal with many issues in minutes.
You have to write a lot of code
There’s no way around it. It’s the same with everything in life, you have to put a lot of time into it. And here lies one of the main questions I see when people ask how to get better.
What to write exactly?
If you work in an agency or as a freelancer, then you most likely have what to work on, but if not, then here are a few tips:
Look how the big guys do it
If it’s the first one, you probably have plenty of time on your disposal. And this is good, this means that you are free to do whatever you want.
And that feels awesome, many will envy you.
If so, do the following: Go to a site you admire. Bonus points if it’s with high traffic. Start inspecting the elements, see how the engineers have implemented the specific components/layouts.
Some directions about what to look for:
- Did they use some specific naming convention? Companies like Airbnb, BBC and others have public code guidelines, you can look for them.
- Do they overwrite a lot of code? See how many properties are being overwritten by a specific class. The less — the better, see how did they achieve that.
- How was something really achieved? A simple text on the left and image on the right can turn out to be very tricky when the image floats outside of the site’s container, it’s sticked to the bottom of the section and overlays the top, while the text is vertically centered and all of this is responsive.
- Find the difference between their code and yours. Do you use more floats, more positioning, more hacks? It’s very likely that what you do every day can be written in a much simpler way.
But all of this gets boring. You can’t get good by just reading, you have to do something. And here’s what you can do every single time:
Then try to do it yourself
Open dribbble for example. There are just so many awesome designs! What do you do with them? Implement them. Pick easy ones and try to make everything perfect on all screens.
Why? Because it looks good, and you will feel great when you see it working.
Just make sure not to use it as if it’s your own design, it won’t be cool. Keep it in your local dev environment or write to the designer if you want to do something with it.
Then pick one done by designer that doesn’t think good of the developers. One where everything is overlaying all over the place, where grid is a foreign word describing the weight of a whale in bananas and color consistency is a term used by hipsters.
Why? Because it’s hard. It will make you think much more about how to organize your markup and stylings. Try to get it pixel perfect! Bonus points for animations. 🙂
Or if you’re a designer too, use your own designs to code them. It’s also a great practise. It’s what I did too when I made my redesign for the League of Legends champion select screen a few years back.
You can see the implemented version here. It is not responsive as this was not part of the initial plan. You can also watch a timelapse recording of the whole process.
Review your code
It’s not just the amount of work you do, it’s the quality too. Revisit your old code, look for potential improvements.
What caused you to rewrite portions of it? What made you add the scary !important? Did you struggle with media queries? Did you wrote 4–5 levels deep selectors?
There are many best practices to look for. Here is just a few of them:
- 20 Protips For Writing Modern CSS
- Modular CSS naming conventions
- Or this huge guideline for pretty much everything CSS.
To get better means to work faster, more efficient and with less mistakes. You should try to get your page done from the first time, without having to rewrite, edit or delete portions of the code.
You should plan ahead from the start!
How will the components work with each other? What is nested, what will inherit styles?
You must learn to plan well
It’s crucial. From the very start, when you look at the provided mockups, prototypes or designs, you must plan your layout and markup structure.
What are the elements, where are they used more then once. Are they different somehow? Are they different by the same rules?
All of this will tell you what kind of modifiers you will need, how to structure your markup so that you can reuse as much as possible.
This planning will save you time and money later on. The more the project grows, the more important it is to have a good foundation. It is something you won’t learn with small projects.
And unless you’re okay with struggling to maintain bigger codebase with many people working on it, you should make sure to investigate the whole scope of the project and plan properly how to structure everything.
To get most of this sorted out, other developers have come up with naming conventions. A set of rules on how to name your components, their child elements, the modifiers, the utilities and so on.
And every one of them serves a good use in different projects. But if you know the scope and limitations well enough, you can pick the best one for your project.
- Again, the modular naming conventions from the sass blog
- An Introduction To Object Oriented CSS (OOCSS)
- SMACSS
- BEM
There are many others, you should find what fits your needs the best. But what I suggest you is to read the documentation, the reason and the problems these conventions solve.
You might not use any of them, but it’s important to know the reason why they exist.
TL;DR
- Write as much CSS as possible. If you can’t find good projects to work on, grab a design from somewhere and implement it.
- Improve your code every time. Try to write each component in a smarter way every time while learning until you’re happy with your approach in the long run.
- Learn from the big boys — see how large-scale sites are doing it. See what you can learn from there and implement it on your projects.
- Use or at least understand why naming conventions exist. Know what problems they solve. Decide which one is best for your project.
CSS seems easy, but there is just so much that can go wrong. After you go past 5000 lines things can really get messy. Bad planning will cause you to overwrite stuff, wrong media queries will trigger at unexpected points, responsive rules can become nightmare.
To get better, you will need to read a lot about all of these issues, to identify them from your own code and to plan how to structure your application/site so that you don’t have to worry about them in the first place.
