Sometimes we have a need for very specific CSS on small sections of a page.
case: code snippets with Rouge
They usually are isolated to a few places, but don't necessarily warrant the overhead
- Web Components
- Bundling the CSS with the page
I'm proposing a feature that allows the author to specify "Hey, this page has some extra custom css"
without it affecting the shared aspects of other pages of the same type.
Current hierarchy with Per Page CSS
With context specific CSS the hierarchy could be
- Site wide CSS
- Page class css
- Page specific css
- Block specific css
Prepending the CSS files in the page's frontmatter with a symbol, would instruct the parser to keep the file separate from the others during concatenation, but should still be processed and minified.
---
css:
- page.css
- !block.css
---
Another option would be to add liquid tags when Jekyll is parsing the page
Something like:
{% hyde_css block.css %}
Sometimes we have a need for very specific CSS on small sections of a page.
case: code snippets with Rouge
They usually are isolated to a few places, but don't necessarily warrant the overhead
I'm proposing a feature that allows the author to specify "Hey, this page has some extra custom css"
without it affecting the shared aspects of other pages of the same type.
Current hierarchy with Per Page CSS
With context specific CSS the hierarchy could be
Prepending the CSS files in the page's frontmatter with a symbol, would instruct the parser to keep the file separate from the others during concatenation, but should still be processed and minified.
Another option would be to add liquid tags when Jekyll is parsing the page
Something like:
{% hyde_css block.css %}