CSS styles for all the different UL uses

Question

The ul tag is very generic and something I continually struggle with.

Initially I had a base style rule defined for my ul and li tags to handle bullet points in my generic text blocks for WYSIWYG text. I am using BEM so I figured I would just add a class to any ul which had a different role (say a menu, or a list of news thumbnails, etc.)

The problem is that I don't always have control over the markup; my current problem is a pagination plugin which uses a ul/li structure but doesn't allow me add a class to the ul.

I am using BEM so I don't really want to use descendant selectors, and especially element selectors, but I realise I will probably need to do so when I don't have access to the ul/li markup.

Any advice would be appreciated - especially with base/rest rules, as I have ul/li lists all over the place in so many sites and once and for all want to master this problem.

Thanks

Answer 1

A solution:

• Reset the styles for ul/li with a CSS reset;
• Make an exception in your BEM principles, and use a cascade for the formatted text. Example:

CSS:

.text ul {
    list-style: circle;
}
.text li {
    margin: .5em 1em;
}
.text p {
    margin-bottom: 1em;
}
/* etc. */

HTML:

<div class="text">
    <p>Here all the text is formatted</p>
</div>

Answer 2

I agree with @Tarh

So this comes up with WordPress theme dev all the time. All content areas get generic element that you can't attach classes too. So you have two solutions here:

1. Like Tarh describes above, you use a reset to kill all styles on UL/LI, and you only use BEM for styling them through out your site. But when you reach the content areas that don't allow you to add classes to elements, you just wrap the whole content area in a div with the BEM class of your liking, and you follow the steps above.

2.In WP there is a little know way to handle this, but it requires writing some functions. You can read about how to do this here. Basically, you make the hidden formatting dropdown visible, then you hide the default "paragraph/heading" dropdown hidden. Then you can format generic elements however you want. Like:

array(
  'title' => 'Large heading',
  'block' => 'ul',
  'classes' => 'content__list'
)

But I don't know if you are actually referring to WP stuff, so I'm just going to end this here.

Best of luck! Stay awesome!