Write Better CSS By Borrowing Ideas From JavaScript Functions

Many problems with website layouts happen when we don’t write CSS with the same care we’d use when writing a JavaScript function. Let’s look at how we can borrow best practices and ideas from writing good JavaScript functions for writing CSS.I like to think of writing CSS, like writing functions that describe how your layouts respond to change. When we forget the principles of writing a good function, here’s some of what can happen: We lose time.When we have to worry about side effects, changes take longer. We create bugs.My favorite example is an online store where the “Buy” buttons were hidden due to misuse of viewport units. We build fewer features.When changes are scary and time-consuming, they often don’t happen. 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. Avoiding Unwanted Side Effects When you change something in your system, it shouldn’t change something else by surprise. That’s as true for CSS as it is for JavaScript functions. Let’s look at this arrow icon in a circle as an example: It looks fine, but let’s