What is the correct layout sequence for one block?

Question

Layout

The bottom line is that I want to develop a certain standard for the layout of blocks, for this I am trying to analyze in what order the blocks should be correctly laid out.
Here is an example for analysis:

At the moment, the order is as follows:
1) html - Create a container in which the block is located
2) html - Create a block frame that will position our block relative to the container
3)html - Create blocks for content
4)html - Write content and icons, respectively
5)html - Assign classes to blocks and elements for further styling
6)Launch eCSStractor and generate a css file, I write in sass, convert the css-sass design accordingly and save it to our common style file (main.sass, to example)
7)html - Adjust the positioning of the frame inside the main container (we need it in the center), if bootstrap is connected, the container does the work for us (horizontally).
8) Set up the positioning of the inner blocks, as well as the dimensions, margin, padding of the frame of the frame itself The border, it's partly about the dimensions. General content styling: list-style-type, overflow…
9) Set up positioning, sizes, margin, padding of blocks with content
10) Now that everything is in place - set up the design in the following order
First, the position of the element relative to others: position, left/right/top/bottom, float, clear, z- index.
Then the sizes and paddings: width, height, margin, padding…
Color and styling: background, color, font…
Please tell me how best and what to improve.

Answer 1

"Correct" will be the sequence to which you get used to so much that you will write the code without such thoughts as "correctly". Even if it will not be the same as the majority, or vice versa - as the majority does, the main thing is that YOU achieve results in the shortest possible time. And this will not give consistency, but a habit, which will eventually speed up the routine itself.