Customizing multiple index sections at the same time (Brine 7.0)

All CSS tricksCustomization tips7.0Learn code

Aug 25

Brine makes customizing our client sites fairly easy by allowing us to use the URL slug as the index section ID, so we can quickly target things in our CSS.

However, when there are multiple index sections involved, it can become time consuming and repetitive to write the same customizations for each area over and over again.

So, for today’s post, I want to share with you 2 ways in which you can “group” all of the index sections you want to modify under ONE same snippet.

Let’s go!

The "regular" way

Just so we’re on the same page, let’s take a quick look at how we usually do these modifications.

The “regular” way is to target each index section (or a specific container inside that particular section) and then add our properties to it, like this:

#index-section-a {
  background-color: #fafafa;
}

But what if we want to add the same background color (or any other style of our choosing) to multiple index pages across our site?

By following the same logic as before we usually end up with something like this:

#index-section-a {
  background-color: #fafafa;
}
#index-section-b {
  background-color: #fafafa;
}
#index-section-c {
  background-color: #fafafa;
}
#index-section-d {
  background-color: #fafafa;
}
#index-section-e {
  background-color: #fafafa;
}

Which is totally fine, but it can make our code heavier and make it more time consuming to readjust these styles during rounds of revision if we have to look for each individual snippet.

So, why don’t we take a look at the alternatives?

The comma-separated way

The first way we can write less code and have all our sections neatly grouped is by grabbing all our index section selectors and putting them together, separated by commas, like so:

#index-section-a,
#index-section-b,
#index-section-c,
#index-section-d,
#index-section-e {
  background-color: #fafafa;
}

That’s literally it!

The commas act as an “AND” connector, so instead of pointing to just the index section A, you’re pointing to the index section A, and the index section B, and the index section C, and the index section D, and the index section E.

And to ALL of them, in this example, we’re giving a background color of #fafafa.

The filter way

The other way to do this is really helpful when you know you’ll be creating the same type of section more than once across your site.

Or, when you’re giving your client a template index page so that they can duplicate the different sections and create their own pages.

In either case, this approach saves a lot of time because you only have to set the code once and then “enable it” for other sections through the actual URL slug of the index section you’re building.

Sounds cool?

Good, ‘cause it is!

How it works

The way this works is that instead of using the exact index section IDs (e.g #index-section-a) we’re going to use a selector that acts as a filter, allowing us to point to any IDs on the site that contain or include the keyword(s) of our choice!

Without getting into too much boring detail, that “filtering” selector is called an attribute selector.

It can be used in different ways and many situations, but for this particular case we’ll be using it with the following structure to target our index sections:

[id*=example] {

}

In human lingo, that’s telling our browser to “look for the HTML elements with an id attribute that carries a value that INCLUDES the word ‘example’ somewhere”.

Yes, it’s a chatty snippet!

The star sign (*) before the equals is what acts as our “includes” filter and, to use this on our projects, all we need is a keyword (or two) that will help us differentiate the index sections we want to target from all others.

Example

Continuing with the example from this post, let’s say we want to add the same background color to certain sections of a site.

First we need to decide on a keyword that will help us filter them through our CSS.

I’ll simply go with the word background.

Next, we need to add that keyword to the URL slug of each index section we’re looking to target:

Note: because we’re using the “anywhere” star filter, we can place the word background wherever we like inside our URL slug. However, to make things more consistent, I recommend adding it to the same part of the slug each time. I prefer using it as a prefix or suffix.

After we’ve done that for all of the sections we want to target, these are the IDs we’ll end up with:

#index-section-a-background
#index-section-b-background
#index-section-c-background
#index-section-d-background
#index-section-e-background

And now, in our CSS, instead of using the comma-separated approach:

#index-section-a-background,
#index-section-b-background,
#index-section-c-background,
#index-section-d-background,
#index-section-e-background {
  background-color: #fafafa;
}

We can use our filter instead:

[id*="background"] {
  background-color: #fafafa;
}

Neat, right?!

What about 7.1?

With 7.1, unfortunately the filtering method does not work because we don’t have a way to modify the ID of each section, at least not at the moment.

However, you can absolutely use the comma-separated method!

So, instead of writing this:

[data-section-id="5ee2546762b4773271ac8408"] {
  background-color: #fafafa;
}
[data-section-id="5ee2546762b4773271ac840a"] {
  background-color: #fafafa;
}
[data-section-id="5ee2546762b4773271ac840c"] {
  background-color: #fafafa;
}
[data-section-id="5ee2546762b4773271ac840e"] {
  background-color: #fafafa;
}
[data-section-id="5ee2546762b4773271ac8410"] {
  background-color: #fafafa;
}

We can group all of our data-section-id attribute selectors like so:

[data-section-id="5ee2546762b4773271ac8408"],
[data-section-id="5ee2546762b4773271ac840a"],
[data-section-id="5ee2546762b4773271ac840c"],
[data-section-id="5ee2546762b4773271ac840e"],
[data-section-id="5ee2546762b4773271ac8410"] {
  background-color: #fafafa;
}