Roots Discourse

Soil-clean-up body class may conflict with existing css class

Using the page slug as an automatic classname for the body can create conflicts with existing css.
I would prefer the following naming convention : page-$slug

if (!in_array(‘page-’.basename(get_permalink()), $classes)) {
$classes[] = ‘page-’.basename(get_permalink());

1 Like

I am open to changing this. At this point we’ve been doing this for several years, and Sage’s JavaScript routing is also dependent on this existing naming convention.

It took a few minutes to figure out why the layout was broken on one of my client’s pages, but it’s down to this same problem.

The website has a page called ‘Media’ and thus a class called ‘media’ is added to the body, which conflicts with Bootstrap’s ‘media’ class and applies a flex layout to the whole body.

So I removed the $classes[] = basename(get_permalink()); block entirely. I don’t think I would ever use that for CSS targetting.