“CSS is not easy “ is probably one of the biggest complaints in the web development community. I strongly believe that beyond learning the fundamentals, CSS requires creativity and the ability to visualize things. CSS is powerful and the more you dig in, the more of a magician you become. When it comes to essentials, these are what I consider to be the top 15 things to master at first.
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.
Oftentimes, to accomplish the style you want you may want to structure your HTML differently but you should not sacrifice structure and semantics for styling. The better you get with CSS the better is your HTML structure and a great web developer knows how to get the UI right without introducing too much unnecessary HTML, compromise accessibility, or make content un-manageable.
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.
One thing that is often left out when talking about the box model is the outline which is the line that sits between the border and the margin which is also stylable.
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.
Learn how specific you need to be, in which order your style is applied by the browser, how to override third-party styles, the issue around the !important flag, etc. Try to follow the CSS flow and how it works and often times it requires you to come up with a CSS structure that works for you and sticking to 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 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.
Responsive and fluid design goes beyond knowing your way around display flex and grid. It requires a developer to understand device and viewport scale, how different tags behave under available space constraints, HTML meta tags, the right distance in between elements given the viewport, different device sizes, etc. It is all about the experience and so many other things that factor into it.
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.
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 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.
Color is not just about the values. CSS currentColor property is something to factor in as well. You can also add an additional 2 values to your hex color values to control the alpha of color like RGBA. For example, #29910d82 is an opaque green where the extra 82 controls the alpha value similar to the last value when using RGBA.
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.
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.
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.
There are also other preprocessors besides SASS like LESS & Stylus and they all promise about the same things with some syntax changes. Whichever you pick, it is important to introduce a preprocessor to your website styling routine as a very important tool to help you create a complex style with much less CSS.
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.
It is much faster to parse as it does not wait for the browser render cycle. It exposes these things called Worklets which you can use to modularize CSS and remove the need for preprocessors for modular CSS code. It is a really advanced concept in a simple API that turns you into a magician like a Harry Houdini.
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:
- BEM — Block Element Modifiers
- OOCSS — Object-Oriented CSS
- SMACSS — Scalable Modular Architecture for CSS
All these options are simple CSS structure style guides you can follow to better structure your selectors and style in general. You can even come up with your own to fit your liking. This is totally optional concept to adopt but it is worth mentioning in case you come across things like this out there.
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.
Mastering CSS is about having fun and utilizing your creativity and your power to visualize things or bring them to life. I love CSS and there is nothing I enjoy writing about more. To watch me write CSS check my Youtube channel or my website.