Существует ли инструмент для автоматической генерации заготовки для CSS по исходному HTML?

Question

[sardius]

Процесс верстки у меня обычно выглядит так:
1. Изучаю макет, нарезаю картинки.
3. Пишу HTML-разметку в соответствии с макетом, по ходу придумывая названия для стилей. (На данном этапе на выходе получается "каша" из текста)
4. Описываю стили, чтобы все выглядело как на макете.

Так вот было бы удобно при начале 4-го этапа, чтобы на основе классов из HTML генерировалась заготовка вида:

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

Чтобы не переключаться туда-сюда, вспоминая структуру документа и названия классов.
Дальше уже вручную удалять лишнее, и добавлять нужное.

Может в каких-то редакторах или плагинах присутствует такой функционал?
Ну и возможно кто-нибудь поделится иной практикой верстки, более правильной, удобной и быстрой.
Спасибо.

Answer 1

[Котик Антон]

https://github.com/Darklg/HTML2CSS

Comments

[sardius]

Вот примерно это я и искал! Спасибо!

Answer 2

[IceJOKER]

Несколько раз создавайте похожую структуру, практически все макеты имеют одинаковую структуру (к примеру - шапка, сайдбар, контент и подвал), в таком случае не забудете, а заготовки - это не очень хорошая идея, даже больше - это ужасная идея.

Answer 3

[Александр Вульф]

Я обычно верстаю параллельно. Написал модуль на HTML, написал для него стили.

Answer 4

[Super User]

На вашем месте я бы взял bootstrap, кастомизировал его и разработал второй файл css с helper классами, которые бы и использовал во всех проектах. Получается так:

• bootstrap.css
  
• helper-classes.css
  
• my-project.css
  

Проще говоря нужна универсальная основа, которая будет переходить из проекта в проект и my-project.css в котором будут стили конкретного проекта. Два верхних файла при этом мы никогда не трогаем (не меняем).

Comments

[sardius]

Своя основа есть (Простая заготовка html, reset.css + что-то типа helpers.css), бутстрап везде таскать - смысла не вижу, много лишнего, даже если кастомизировать.
В каждом проекте столько специфических моментов, что основа эта помогает незначительно.

Answer 5

[Андрей Андреев]

Попробуйте, наоборот. В Phpstorm и иже с ними есть обратная функция. Пишем CSS, а потом в IDE в подсказывает классы которые уже были описаны.

Answer 6

[Станислав Дубровский]

Пользуюсь Emacs в качестве редактора, поэтому перед глазами сразу оба файла, и шаблон и стили.