Climb to CSS Mastery Using CSS Functions in 2023
Hot off the press: a free CSS guide is published today, and it’s magnificent.
Produced by Front-End Masters and published by CSS-Tricks, this guide gives a complete breakdown of a skill many web developers do not know well: CSS functions.
We commonly think of Cascading Style Sheets (CSS) as a list of rules for HTML elements to follow. But the simplicity of it is deceiving. We can underestimate it, especially when tools like Sass introduces obvious features that CSS does not have. For example, CSS does not have partials, nesting, or variables.
So when we talk about CSS itself as having functions, it can be baffling. Does CSS really have these advanced features?
CSS has always been a dark art. The guide itself concurs, stating “CSS is maligned as frequently as it is misunderstood.” Back-end developers underestimate it and yet find themselves unable to wield its strange magic. One of my mentors took me under his wing because he told me that I have a “sense” for it. Over time, I have come to learn that not everyone does. CSS continues to show endless depth.
The guide appears to comment on a central theme — that CSS is powerful. The guide says the following:
The technologies that power the web are designed in such a way that someone with enough interest can build whatever they want. It’s a powerful, revolutionary concept[.]
That is to say — it is worth knowing our CSS functions.
I learned CSS before learning programming fundamentals. Because of this, I had been using functions without knowing it. Functions such as nth-child() was introduced to me early in my career, but my slow exposure to other functions masked that they were functions at all.
We have a source to completely demystify CSS functions. Learning and understanding CSS functions are an essential step toward advancing as a UI front-end developer.
In this article, I’m going to discuss some key insights this guide gives. Brew some tea, pull up a chair, and let’s get to improving our CSS strategy.
Overview
The free guide is called A Complete Guide to CSS Functions, similarly titled to universally beloved guide, A Complete Guide to Flexbox. The guide includes a brief introduction to functions and expandable sections explaining various types of functions with quality CodePen examples.
Some sections to expect in the guide:
“Common CSS functions” such as url(), attr(), :not(), and :calc().
“Color Functions” like rgba().
“Pseudo Class Selectors” such as :nth-child().
“Animation Functions” such as path() and steps().
“Grid functions” such as repeat
And way, way, way more.
Full disclosure: the guide is truly complete, listing and detailing every available function. Because of this, the guide can be overwhelming. The authors may have anticipated this and wrote section after the guide called “Why so many?”
A lot of CSS functions exist. Seeing them all in one place affirms just how powerful CSS is. Instead of thoroughly reading the guide in one sitting, I encourage skimming every section instead. Then, have the guide bookmarked. That way, when you come across a particular CSS challenge, you have enough knowledge to know that a solution exists when you need it.
In the meantime, here are a handful that are absolute musts in many situations.
Top CSS Functions
The following functions are CSS functions that have come the most handy in my career using CSS.
Filter Function
Think of ‘filter’ like an Instagram filter. I can saturate or turn an image black and white or have a color overlay without editing the image. CSS filters have been invaluable when working with customers that do not have a graphic design department. I did not want to demand that the customer create multiple images — one black and white and one color — just for my fancy hoverstate.
When a customer uploaded an image, all they had to do was define the focus point. Our tools would then auto-crop, auto-compress, and with the addition of the CSS filters, any uploaded image can look processed by a graphic designer.
Not Function
The ‘not’ function is particularly valuable when you do not have control of the HTML and need to use creative thinking to target the exact element you need. The guide acknowledges that there is a “great deal of versatility” and it can be “dangerously powerful.” Be warned!
Translate Function
The translate function and I have been friends for a long time. Getting an element absolutely positioned in the exact center of another element can be a challenge without a translate CSS trick. How many times have I looked like a wizard, solving others’ positioning problems with translate? You can, too.
Nth-Child Functions
Sometimes you do not want to uniformly style all children the same. If there is a pattern, you can use nth-child to execute that pattern. It’s a small function, but it can bring drastic and awesome results. As the guide says, “In the right hands, :nth-child() is incredibly powerful.” Nth-child gives you the tools to be a wizard, my friend.
Advance Your Career
Bookmarking this guide and referencing it throughout your front-end development career will be invaluable this year. I am so excited to have stumbled across this resource so that I can share it with you and unlock your CSS superpowers.
If you haven’t already, click the button below to go to the guide, and if you like me and want to continue learning and growing, I share great resources regularly through the Books on Code newsletter. Sign up below so we can meet again.
If you liked this article, share it with your web developer friends.
I look forward to seeing you in the next article. ✌️😊