Is there a tool to automatically generate CSS templates from HTML source?

Question

css

The layout process for me usually looks like this:
1. I study the layout, cut the pictures.
3. I write the HTML markup according to the layout, coming up with names for the styles as I go. (At this stage, the output is a "porridge" of text)
4. I describe the styles so that everything looks like on the layout.
So it would be convenient at the beginning of the 4th stage, so that based on classes from HTML, a view blank was generated:

.wrapper {}
.header {}
.header-logo {}
.content {}
.content-header {}
.footer {}

In order not to switch back and forth, remembering the structure of the document and the names of the classes.
Then manually remove the excess, and add the right one.
Maybe in some editors or plugins there is such functionality?
Well, maybe someone will share a different layout practice, more correct, convenient and fast.
Thank you.

Answer 1

https://github.com/Darklg/HTML2CSS

Answer 2

Create a similar structure several times, almost all layouts have the same structure (for example - header, sidebar, content and footer), in this case you will not forget, and blanks are not a good idea, even worse, it is a terrible idea.

Answer 3

I usually type in parallel. Wrote a module in HTML, wrote styles for it.

Answer 4

If I were you, I would take bootstrap, customize it, and develop a second css file with helper classes that I would use in all projects. It turns out like this:
Simply put, you need a universal base that will pass from project to project and my-project.css which will contain the styles of a specific project. At the same time, we never touch the top two files (do not change).

Answer 5

Try the opposite. Phpstorm and others have a reverse function. We write CSS, and then in the IDE it suggests classes that have already been described.

Answer 6

I use Emacs as an editor, so both files, the template and styles, are right in front of my eyes.