Make your CSS Readable and Maintainable with the CSS Enabling Pattern


29 March, 2021 • ☕️ 1 min read

Photo by Atikh Bana on Unsplash

The “Enabling” Pattern is a CSS Pattern that can be explained in 1 sentence.

Instead of using “Disabling” selectors, you should focus on writing “Enabling” selectors.

Now I can hear you thinking.

“What does that even mean?”

Let me show you by example.

What should I NOT do?

Let’s say you’ve created a navigation using HTML:

Navigation using the nav and a tags

  a href="/html/">HTMLa>
  a href="/css/">CSSa>
  a href="/js/">JavaScripta>
  a href="/python/">Pythona>

Now you’d like to add a margin to all the “a” tags except for the last one.
Here’s the usual, disabling way:

a {
  margin-bottom: 1rem;

a:last-child {
  margin-bottom: 0;

First, you add a margin to all the “a” tags in the navigation. Then, you disable the bottom margin on the last element.

We call this the “disabling” pattern, because the a:last-child selector disables the previous selector’s rule.

However, we can do better!

What should I do?

Instead of overwriting our previous styling, we can style our navigation using “Enabling” selectors:

Using the :not selector to style our “a” tags

a:not(:last-child) {
  margin-bottom: 1rem;

The selector a:not(:last-child) is enabling margin-bottom on all elements except the last one. There’s no need to disable anything.

This will make your CSS not only more readable, but also a lot easier to maintain!

Another great selector that will get you (almost) the same result is the + CSS Selector. Using it like below will get you the same result!

Using the ”+” selector to styling our “a” tags

a + a {
  margin-top: 1rem;

In the above example, we add a margin-top to all the “a” tags that have a previous sibling.

This means that all the tags, except for the first one, will have a margin-top added to it.

That’s all there is to it!

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *