Don't put custom styling at top of markdown file

From this tweet:

I suspect this was due to the description field in the RSS being generated by {{ .Summary }} which by default takes the first …80? characters below the frontmatter. So by putting the style at the bottom, it won’t pull that into the description.

Why use style tags in the body of a post to begin with?! :face_with_monocle:

Hugo is not like Worpress or Blogger or Tumblr or whatever else, where one has to override weird cr@p all the time with CSS in bizarre places.

Yeah, this isn’t a tip, it is a cautionary tale: Hugo doesn’t change HTML rules.

I wonder if that person scoped the style element for inclusion in the body…

Might have wanted a particular post to be different from the norm in a particular way. She could have used a shortcode but other than not having the style in the markdown, it would be the same thing.

Yea, but there isn’t a Cautionary Tale category for threads… lol. i changed it to uncategorized.

That’s not the way to do this. I use Hugo tags as classes so that when a post’s container has a certain class its children use different CSS rules.


Here you go:

<section class='permalink {{ delimit .Params.tags " " }}'>

doesn’t that mean that section is fixed with respect to the content?

Correct me if I’m wrong, because I’ve been trying to wrap my mind around this too. The whole point is to not have to make layouts for specific posts… that would be silly and defeat the purpose of the static site model. (not talking about the pages like a landing page or homepage or about or things like that).

So, if you want to do something special in a post, instead of trying to predict what you might want in the future and building all the flags into the template, or making a shortcode in case it’s something you might want to do again… why wouldn’t putting the html in the content itself be a reasonable compromise? (I know the model is supposed to be keep content and structure and styling all separate).

The section is the container. It could be a div also.

But in my Hugo project I have different layouts for posts with 3 photos in a row, 2 photos and just one.

So to render these different post layouts whenever I need them I use a different class for each that is assigned through a tag. eg. .three .double .single

Now if I ever need something more extravagant in the future I can always create a new tag for it and write the corresponding CSS.

if one is doing a one-off unique thing in a post or style or whatever, I don’t see how your way is a better or faster way? Our mental models on this are obviously different, and I’m trying to see yours for this particular case where there is a one off thing… but it doesn’t seem beneficial. to me at least.

Placing the <style> element in the body of a page is bad. Very bad. LOL!

See the answers to this very question over here:

But whatever…

Another way to do what you ask is by using a custom frontmatter parameter and append CSS rules for said post in your document’s style. Of course you need to use block templates for that. Don’t ask me how to achieve this as I never had a need to be this extravagant with my CSS.

Remember that an id= has the highest specificifity. You can thereby “scope” and page-specific hacks you might need with a combination of page title and urlize. I usually then keep these styles in the last called sass import, which source I organize to SASS guidelines. Not saying it’s the best way. Not saying it’s the only way. Just saying there are many ways to observe separation of concerns in your Hugo projects and avoid muddying content, which, IMNSHO, should stand the test of time as style/theme/generator independent…

1 Like

indeed. well, Sara is no slouch in front end web dev. So i wonder why she did it that way. Thanks for the input all.

How individuals choose to structure their content is their decision. Issues inserting an inline style block in content, shortcode or not, would likely be a bug or enhancement to Hugo unless the individual is clearly doing something not allowed by the architecture or is using invalid markup.

i agree, it may be “messy” or frowned upon by convention, but it can’t really be said to be “wrong” unless the build breaks because of it.

If you aren’t writing code for anyone else, and it solves a problem, and the author understands what they are doing, I don’t see it being not ok to do. A better way to do it might take a lot longer given the same starting point, and be unneeded in the future.

Just my view.

Sure. But according to W3C

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.


And the scoped boolean is currently supported only by Firefox.

The above refers only to the <style> element in other places than the head of a document. It’s not about inline styles that are perfectly valid and don’t cause problems (I’m also using inline styles when needed).

You really piqued my inner nerd here @alexandros. Not sure if you’ve seen it but you may find it instantly invaluable if you haven’t:

Within DevDocs you will find links to various specs from WHATWG and W3C for each element in HTML, various other HTML-related technologies and even other APIs and common libraries.

WHATWG refers to style elements inside a Document as style sheet that is blocking scripts and also provide some guidance on which elements a style tag may be placed within at the top of the spec. Neat stuff.

Applied to the example provided in the OP it appears as though the user was using YAML for front matter (given the -- preceding the style rules) and may have thrown off the parser. I’d be surprised if Hugo or YAML actually had a bug here. But who knows. Maybe.

What kinds of inline styles do you use? Inline means stuff like <div style="margin: 0; color: #000;"> ?

Thank you for your input.

If using CSS within the body of your content makes your pages faster then good for you.

I have yet to see significant performance gains from such a practice. Whenever I had to do something like this I’ve always run into problems sooner or later.

RSS feeds tend to give away such tricks as OP found out. Also if a site is migrated for whatever reason it will be great fun deleting all the different style elements from the content.

With Hugo sometimes I define inline styles through the template when I have no other option.

For example like this:

<style="background:url({{ .og_image | html }});">

This is for a range of posts on my index page. And I also use background-size: cover; with this.