As I write my first website with the Bulma CSS framework, I'm actively trying to fit my mind around the framework's intended way of accomplishing various layouts. Here are some layouts and their example HTML that I found myself using repeatedly while implementing the design for a friend's website. Following is one practice I found myself getting into when implementing layouts in Bulma.
HTML is made up of tags (i.e. elements), such as <html>, <body>, <div>, and <p>. These tags may contain attributes, a collection of name-value pairs that may transform the behaviour of the element or provide some metadata in order to target that element from JS or CSS. Bulma largely uses the class attribute to target elements for styling.
While tweaking my Bulma layouts, I found myself wanting to quickly scan my layout for Bulma classes. In some cases, I found it difficult to grok the layout, because I had to scan through an element's attributes until I found the class attribute. To mitigate this, I began to write the tags with their class attribute immediately after the tag name. This greatly improved my ability to quickly scan the HTML and modify the Bulma styles within my layouts.