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.
this one is missing
Lol, Loved it!
We’ve all been there, right?
Things I wish I knew when I started writing CSS:
how the box model works
how the box model works
how the box model works
Absolutely! knowing how the box model works is eyeopening. I’d also add specificity and the cascade.
how z-index works
how the box model works
I thought I knew how relative and absolute worked, then I found out about:
position: static, relative, fixed, absolute and how they are all dependent on their parent/ancestor elements. Really useful, and now I feel like I have peeked behind the curtain!
Also hadn’t realised that the ‘position’ is one of the major determinants in how components are rendered on on top of the other i.e. layer stacking context:
The usual top to bottom, then negative z-index, non positioned, float non positioned, inline non positioned, positioned elements + z-index auto/zero, positive z-index (a positive z-index creates a new stack, and the process is repeated within that!! – this is a gotcha)
Another voice to add your list of CSS road pavers: Adam Morse, http://mrmrs.cc/, responsible for http://tachyons.io/.
Vim, vscode, and atom aren’t IDEs. They’re code editors, and fine for CSS which isn’t Turing complete, but to call them IDEs is wrong.
I agree, that got edited on the way. the point still stands though, the better you know your text editor, the better your ideas will flow :)
Isn’t it though…?
specificity was a thing i didn’t know for years of CSS development and was very helpful when i finally got it.
What about Emacs? It really is an IDE…
what is the better way to learn css ?
I’m not seeing any direct link between the article and CSS. Even #1 is applicable to every aspect of development that I can think of.
Try to maintain this approach in all development endeavors. Awesomeness is not about the end result. It’s about how you’re getting there.
any good articles about specificitiy?
i asked because the above article is not specific about it, but a quick google search brings up your other article: https://css-tricks.com/specifics-on-css-specificity/#article-header-id-2
Padding: Why the fuck does this add to the width of my element. A love / hate story.
Very true. And then you realize that “box-sizing: border-box;” is right there to remedy the situation.
I would also recommend learning the history. For someone just starting off, using the grid module to layout 4 columns might be fine, until they learn they can do the same with floats while only writing half the code they need to with grid.
There is a reason we use grid, there is a reason we use lots of things that may seem more complicated than their older counterparts. Learn the history.
display: inlineand the extra 1-2px that it adds to the width unless you comment out all the space between the sibling elements in the HTML.
Thank God we have Flexbox nowadays! :P
or you can set font-size:0 to your parrent div
Resist the overwhelming urge to ignore SASS/LESS, which was easy to ignore after for someone who got used to manually composing uncompiled CSS since 1999. SASS/LESS are still overkill for some projects, but that’s no reason to avoid using them and discovering their features and benefits.
Regarding sharing, be welcoming to new sharers. Never speak negatively about them, especially on Git or Twitter. It happened to be when I volunteered for an open source project and I’m hesitant to volunteer for an open source project again. That was their bad, not mine, and I wouldn’t wish this on anyone!
I am sorry you had a bad experience. Hatters are everywhere but not every community is the same.
If I can help you get back to open source I am involved in a few open source communities that will be extremely happy to have new contributors.
Perhaps this advice is lost on beginners but I would say you should decide what your projects’ abstract design decisions are, such as:
– Color palette
– Font sizes
– Border radii
– Line heights
– Spacing (paddings and margins)
These can take the form of CSS pre-processor variables if you’re using Sass or Less, or they could be CSS variables.
In any case, making these decisions up front will help you write css faster, make css file maintenance easier, and net you a lot of consistency in your UIs.
SMACSS changed my whole approach, really got me organized about it: https://smacss.com/
I’ve been doing web development for about a year now, and things I wish I knew are:
I wish I had known about the Shadow DOM (actually, I wish it had existed when I started). Diving into it has helped tremendously with styling things like input tags, and building components is sweet. Oh, and scoped CSS? Yes, please. :)
6 things CSS developers wish they knew before they started:
1 – learn css
2 .. :)