This way, we can use different icons without messing up the container. The container dimensions have been isolated from the content.There are two improvements in this example: Here’s a demo of how to fix the squished icon: Ideally, the interior icon shouldn’t change the shape of the containing circle. If we inspect the element in DevTools, we can see that the shape of the containing circle depends on the size of the inner icon and the padding around the icon. Using a narrower arrow ruins the shape of the circle. Now the containing circle is squished! This is an example of an unwanted side effect. It looks fine, but let’s say we want a narrower arrow icon: ( Large preview) Let’s look at this arrow icon in a circle as an example: ( Large preview) That’s as true for CSS as it is for JavaScript functions. When you change something in your system, it shouldn’t change something else by surprise. Let’s look at how we can borrow best practices and ideas from writing good JavaScript functions for writing CSS that is easy to use, free from unwanted side effects, and resilient to change. When changes are scary and time-consuming, they often don’t happen. My favorite example is an online store where the “Buy” buttons were hidden due to misuse of viewport units.

When we have to worry about side effects, changes take longer. When we forget the principles of writing a good function, here’s some of what can happen: I like to think of writing CSS, like writing functions that describe how your layouts respond to change. Let’s look at how we can borrow best practices and ideas from writing good JavaScript functions for writing CSS. Many problems with website layouts, such as unwanted side effects, painful updates, and brittle code, happen when we don’t write CSS with the same care we’d use when writing a JavaScript function.

Write ideas