Usually I build an extra page with all my Text-Styles of the entire site to have an overview about all the Typography applied.
First i select the body (all pages) global class and define the font face and other global settings. like also shown in this entertaining blog-post from webflow.
Then i name all elements of the my default richtext field so that no client can break the styling.
So i define all Headings1, all Headings2 and so on. Like in the Tutorial here
then i give a class to my HTML-Headings in the selector and name them h1 to h6 and p for paragraph and so on.
My goal is to be as global as possible.
But now i do have two sets of styles because i applied an all-headings styling first and than a extra heading-naming to all html-headings. when i change those css classes of the html-headings, the richt-text headings remain the same.
Now my big question
Would it be better to just keep the html-tags unstyled and add no css-class to it because the global all headings of the richttext takes care of the styling – or not?
That’s a very good practice. The only way not to get messy with margins, especially. I use such a page and I’m always using the same content: a well crafted real-life article with every typography/layout property laid out.
Good.
This I don’t know about… I’d rather give a class to the RT, and style base elements inside (all p, all h1, all quotes…) and limit the effects to the class of the RT.
That I try to never do. I try to style h to be consistent for the whole site. They get a class when there’s an exception, and they get to be styled differently inside of RTs if the RT has a class. Same for p.
Also I’m using REM unit as much as possible.
The more you stick with this, the less you’re going to have to work on them and maintain them.
Styling titles is important and has to be done considering HTML5 rules. With HTML5, you can for example have many many H1 on the same page. Because any block of content that can be considered an individual piece of content should get an H1.
For example, if you have a page listing several kind of blog posts, your structure will go:
H1 title of the page
– H2 title of the first list of bog posts
– – H1 title of the first blog post teaser
– – H1 title of the 2nd blog post teaser
– – H1 etc
– H2 title of the second list of blog posts
– – H1 title of the first blog post teaser
– – H1 title of the 2nd blog post teaser
– – H1 etc
So obviously you don’t want the teaser H1 to look the same than the base H1. The first H1 of the page will be styled by the All H& selector, and the teaser title will have a class, like .secondary level h1. And if you click on it, you’ll go to the blog post page who will have a base H1.
I gave the RTF a class, but I did not set the field “when nested inside of” to all my “all paragraphs” or “all headings 1” which made all my global CSS styling goes into the file webflow.css instead of myproject.css
I just got an explanation from a front end friend. That to style “body (all pages)” makes sense, but that you should not style the HTML selectors and always give a class when styling is applied. To avoid a backlash of unexpected styling patterns with combo classes etc. as you described clearly in the example.
So, from now on. I style me RTF with nested “all paragraphs” and so on.
But one more question.
Do you give your primary css-classes of your text elements an equivalent name to the html tag?
.p .h1 .h2 and so on? or you name them Paragraph, Heading 1, Big Title what so ever?