How To Improve Your CSS Skills

I answered a question on Quora this morning and really wanted to share it. CSS is tricky. Thus, improvement here is the key to being a great Developer. Most of the time, it seems like simply picking the right selector for the job. As your project scales, organization and style become extremely important for the maintainability of your CSS. This is where the real mastery lies.

I’m going to build a hierarchy of advice based on a few tiers of skill that I’ve perceived over the years:

Basic CSS:

  • Learn about basic pseudo-selectors (:after, :hover, etc.).
  • Learn about z-index.
  • Make sure you know the Box Model inside and out, and learn about collapsible margins.
  • Learn when to use Float and when NOT to use Float.
  • Bookmark W3Schools and MDN.

Advanced CSS:

  • Learn about new relational units (viewport units).
  • Learn about advanced pseudo-selectors (:nth-child, etc).
  • Bookmark, and learn how to write polyfills to gracefully degrade unsupported features on older browsers.
  • Learn about Stacking Order/Stacking Context.
  • Learn about using style guides (BEM, OOCSS, and my favorite- SMACSS).
  • Learn about CSS preprocessors. Most developers use SCSS or SASS though you can also explore LESS and Stylus as well.
  • Learn about the preprocessor compilers. What are the differences between Compass and Libsass?
  • Explore other CSS3 features such as gradients, transitions, filters, etc.
  • Learn about Flexbox. This knowledge is must-have, in my opinion.
  • Learn about Media Queries. The W3C continues to work on this specification so be sure to keep up with the changes.
  • Learn about fluid grids and Responsive Design. Your fluid grid is essentially the glue of your UI, so you must be able to make sure your grid behaves exactly as you want it to.
  • Learn about additional tools, such as stylestats, which can help you manage your CSS as your repo scales.

Cutting Edge CSS:

  • Bookmark World Wide Web Consortium (W3C) and learn about the phases of specification maturation.
  • Learn about “CSS4”.
  • Learn about new experimental features (at this time, a couple good ones would be native variables and display: grid;).
  • Participate and give technical feedback on W3C recommendations and drafts.

There are tons of cool things you can do with CSS now. And never forget: practice makes perfect. Play on CodePen and see what you can do. There are SO many resources available that a curious mind will always find ways to improve in this domain.