15 CSS Things to Master and Become a Better Web Developer

HTML

I know, I know! This is a CSS post, but CSS becomes way easier when you learn all the basics of HTML. CSS is butter for HTML and they always go together.

Box Model

The way I approach things on the page is by thinking that everything is a box. The CSS box model is pretty much one of the top secrets to better learn CSS. The margin is how you distance the box apart, the border is the box walls, the padding is the space between the box content and the walls and then you have your content which can be other boxes or text.

image from codinglead.github.io

Specificity & Cascading flow

This is pretty much what defines CSS because CSS stands for Cascading Style Sheets. The number one issue when writing CSS is having the style be overwritten by some other style either third-party or yours. Many tools have emerged promising fixing this by isolating your style block but the best way to fix this is to understand it.

Selectors, Combinators, Pseudo Class & Pseudo Elements

I made a video about all the Selectors, Combinators, Pseudo Class, and Elements and there is so much magic in learning these CSS details. The selectors help you target HTML, the combinators help you combine and target with patterns. The pseudo-classes help you target state and the pseudo-elements help you target or create specific parts of your HTML. It is magical when you master these concepts and so important in becoming a CSS magician.

Variables

Variables pretty much take CSS to the Next Level. CSS already has some useful functions and needed the variables to help make it even more powerful. Variables introduce the idea of sharing and scoping values and knowing your way around how to use variables will take your CSS style to the next level.

Display and Positioning

The CSS display and position properties allow you to control how the elements are positioned in and outside the content flow. Any CSS developer should master these two and everything that derives from using them. Positioning things remain one of the biggest challenges when it comes to CSS and because of that, you should not neglect your way around the display and position properties.

Responsive Design & Fluid Layout

Being able to adapt your website to any size and being able to change the layout to adapt to the available space is a superpower on its own. I normally would recommend focusing on CSS media queries but CSS has come a long way which means you can make responsive pages without using media queries by using the display grid and/or flexbox and controlling font with CSS clamp.

Image & Background

Two things that go hand in hand are the <img/> tag and the CSS background and you must know when to use the image tag vs the CSS background. In particular, the CSS background is powerful and you can even use it to create text underlines and some amazing other background effects you can check on this playlist I put together for you. For me, it is one of the most fun parts of CSS and one you should definitely not ignore.

Font

Here something often devs neglects but I find it to be very important. You need to know how to optimize Fonts for your site and it often means how to load them, what other options are available, how to control them in order to really take advantage of a font to make things look great. It is hard to find a font that is just perfect so you need to know how to take it to the next level and this is something designers often manipulate to get just right so you need to do the same to get the page to match the designs.

Color

Color is pretty much everywhere. You use it for border, background, outline, etc. Most developers use plain hex color values or the color name but you can take CSS colors too many steps forward by using the RGBA to control the alpha of the color, HSLA to control the hue, saturation, and lightness on top of the alpha value.

Transition & Animation

Transition is a way to control how CSS value goes from state A to B and animation is a way to animate something with many keyframes stop. Any webpage comes to life when the animation is used well. Animation and transition can be used to enhance the experience and create effects that will further enhance the interaction with the site.

Transform

Another thing you can use to enhance any website experience is introducing 3D effects. Transform is often something you need to animate and transition which makes transform go hand in hand with CSS animation and transition. I have never worked on a website that did not require me to transform something which is why I believe is something you really need to understand your way around it.

Preprocessors

I love SASS and I am yet to work in a place or project that did not use pre-processors. CSS Preprocessors allows you access to concepts like mixins, functions, and modularity with the ability to import and compose style. Preprocessors are powerful and let you use things in CSS you wish existed natively.

CSS Houdini

CSS Houdini is a low-level API that lets you get access to the CSS engine which allows you to extend CSS with features you want. Instead of waiting for a specific feature to existing or be supported in the browser, you can introduce it yourself.

CSS Architecture

It is easy to introduce conflicts when writing CSS as your app grows bigger. Eventually, you need to make sense out of your CSS alone, and that’s when you need to adopt a technique to help you with it and remain consistent. It must be something you like or the team agrees with, here some examples:

  • OOCSS — Object-Oriented CSS
  • SMACSS — Scalable Modular Architecture for CSS

Conclusion

Mastering CSS is a continuous process and requires a lot of practice. It just has no effect to master these concepts without continuously trying to use them and expose you to various projects where you can practice. I recommend small CSS projects just so you can sharpen your knowledge about particular areas like devs do on CodePen. You can also adopt best practices and read about them to get an idea of how to approach it.

Blog & YouTube Channel for Web, UI & Software Development - beforesemicolon.comyoutube.com/c/BeforeSemicolon — Writer: Elson Correia

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store