To style the tag for All H1

We use the BEM Convention

Block
Define a component

Element
Define a component inside a block
We use __ in front of the element name
‍
Modified
Define the state of a component
We write -- in front of a modified version
‍
Example
‍
.menu --> this is Block
.menu__link --> this is an Element inside the Block
.menu__link--blue --> this is a combo class and a Modifier of the original .menu__link Element

In Webflow's style manager the Blue link would look like this:
.menu__link + .menu__link--blue

Yes, with BEM you write out the name of the original element followed by double hyphen -- and the modifier. Might seem excessive, but it adds a lot of clarity to the code. Even within Webflow.


About title
I set Heading and Paragraph styles using high level tags, like H1, H2, etc. Then I have many different modifiers for each one. Like, h1--white, h1--centred, h1--margin10, etc. Since these aren't combo classes within Webflow, only way to find them is if you remember the name and that gets tricky with 750 classes. With BEM, I just need to type "h1--" and Webflow will show all the modifiers that I've created for h1.

To manage the separation between Section (div) we privilege the use of padding instead of marging. Because it's easier to see on wich section is apply the spacing.

The style of the tops of the sections is favoured.
‍