Search code examples
cssvuepress

VuePress - Ignore Core Styles Within a Specific Section of Page

Im building a documentation website for a site I work on.

I'm happy with the VuePress core stylesheet provided but I would like to be able to exclude specific parts of pages from the core style sheet.

For example, I want to show how my website's CSS renders a tag, I have included my sites CSS within my documentation project and can see styles are applied, but the VuePress core styles are also applied and i'd like them to be ignored.

Im aware of style.styl for overwrites but this doesnt solve my problem.

I have tried 'ejecting' the core CSS into my project files and modifying the stylus files using some thing like:

*:not(.my-custom-css-only-class)

but this does some weird things like effecting core link styles in sidebar.

Im hoping there is some built in class I can add to the sections which I only want to use my custom CSS but I cant find anything like this having searched.

An example of my markdown template:

# Styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="my-custom-css-only-class">
<h1>Only apply my sites CSS to this element</h1>
</div>
Solution

  • I would simply try to override the library CSS with your own. Most Vue plug-ins (javascript libraries in general) that provide styling don't give you an easy out.

    To override CSS there are a few things to keep in mind.

    1. CSS Specificity matters. If the parent class is applied to an id and you're using a class to override, the id styles will win.

    2. Order matters. Make sure your CSS is applied AFTER the VuePress CSS.

    3. Sometimes its easier to reset things and start fresh. You can do that with the initial keyword.

    Scorched earth reset (this will even remove browser level stuff like block vs inline so be careful)

    .element {
   all: initial;
   // your new styles below
}

    Individual property reset

    .element {
   color: initial;
   border: initial;
   // your new styles below
}