5 things CSS developers wish they knew before they started

You can learn anything, but you can't learn everything 🙃

So accept that, and focus on what matters to you

— Una Kravets 👩🏻‍💻 (@Una) September 1, 2017

Una Kravets is absolutely right. In modern CSS development, there are so many things to learn. For someone starting out today, it’s hard to know where to start.

Here is a list of things I wish I had known if I were to start all over again.

1. Don’t underestimate CSS

It looks easy. After all, it’s just a set of rules that selects an element and modifies it based on a set of properties and values.

CSS is that, but also so much more!

A successful CSS project requires the most impeccable architecture. Poorly written CSS is brittle and quickly becomes difficult to maintain. It’s critical you learn how to organize your code in order to create maintainable structures with a long lifespan.

But even an excellent code base has to deal with the insane amount of devices, screen sizes, capabilities, and user preferences. Not to mention accessibility, internationalization, and browser support!

CSS is like a bear cub: cute and inoffensive but as he grows, he’ll eat you alive.

• Learn to read code before writing and delivering code.
• It’s your responsibility to stay up to date with best practice. MDN, W3C, A List Apart, and CSS-Tricks are your source of truth.
• The web has no shape; each device is different. Embrace diversity and understand the environment we live in.

2. Share and participate

Sharing is so important! How I wish someone had told me that when I started. It took me ten years to understand the value of sharing; when I did, it completely changed how I viewed my work and how I collaborate with others.

You’ll be a better developer if you surround yourself with good developers, so get involved in open source projects. The CSS community is full of kind and generous developers. The sooner the better.

Share everything you learn. The path is as important as the end result; even the tiniest things can make a difference to others.

• Learn Git. Git is the language of open source and you definitely want to be part of it.
• Get involved in an open source project.
• Share! Write a blog, documentation, or tweets; speak at meetups and conferences.
• Find an accountability partner, someone that will push you to share consistently.

3. Pick the right tools

Your code editor should be an extension of your mind.

It doesn’t matter if you use Atom, VSCode or old school Vim; the better you shape your tool to your thought process, the better developer you’ll become. You’ll not only gain speed but also have an uninterrupted thought line that results in fluid ideas.

The terminal is your friend.

There is a lot more about being a CSS developer than actually writing CSS. Building your code, compiling, linting, formatting, and browser live refresh are only a small part of what you’ll have to deal with on a daily basis.

• Research which IDE is best for you. There are high performance text editors like Vim or easier to use options like Atom or VSCode.
• Pick up your way around the terminal and learn CLI as soon as possible. The short book “Working the command line” is a great starting point.

4. Get to know the browser

The browser is not only your canvas, but also a powerful inspector to debug your code, test performance, and learn from others.

Learning how the browser renders your code is an eye-opening experience that will take your coding skills to the next level.

Every browser is different; get to know those differences and embrace them. Love them for what they are. (Yes, even IE.)

• Spend time looking around the inspector.
• You’ll not be able to own every single device; get a BrowserStack or CrossBrowserTesting account, it’s worth it.
• Install every browser you can and learn how each one of them renders your code.

5. Learn to write maintainable CSS

It’ll probably take you years, but if there is just one single skill a CSS developer should have, it is to write maintainable structures.

This means knowing exactly how the cascade, the box model, and specificity works. Master CSS architecture models, learn their pros and cons and how to implement them.

Remember that a modular architecture leads to independent modules, good performance, accessible structures, and responsive components (AKA: CSS happiness).

• Learn about CSS architectures, keep up with the trends, and have an opinion!
• Follow people that are paving the CSS roads like Harry Roberts, Una Kravets, Brad Frost, Ben Frain, Sara Soueidan, Chris Coyier, Eric Meyer, Jen Simmons, Rachel Andrew, and many many others.

The future looks bright

Modern CSS is amazing. Its future is even better. I love CSS and enjoy every second I spend coding.

If you need help, you can reach out to me or probably any of the CSS developers mentioned in this article. You might be surprised by how kind and generous the CSS community can be.

What do you think about my advice? What other advice would you give? Let me know what you think in the comments.