Как на JavaScript реализовать систему CSS-классов?

Question

[JackShcherbakov]

Здравствуйте, коллеги!

На днях я решил доработать свой конструктор сайтов. Я сделал почти всю фронтенд часть, после чего понял, что без PHP и MySQL ничего годного не выйдет. В итоге выучил MySQL и PHP и понял, что мое приложение генерирует просто ужасный код. Я зашел в свое приложение, накидал блоков и стилей...

... и в итоге вышел вот такой неподдерживаемый код:

<div class="output" style="width: 1490px; 	margin-left: -745px; left:50%; position: absolute; height: 5000px">
	<p style="box-sizing: border-box; padding: 0px; width: 434px; height: 225px; left: 183px; top: 94px; font-size: 25px; position: absolute; margin: 0px; border-color: rgb(102, 0, 51); border-width: 5px; border-style: solid; border-radius: 20px; background: url(&quot;&quot;) rgb(102, 153, 255);" class="">Блок</p></div>

Я хочу, чтобы приложение могло генерировать код, подобный приведенному ниже:

<style>
#output{
	width: 1490px; 
	margin-left: -745px;
	left:50%;
	position: absolute; 
	height: 5000px
}
.usersblock{
	box-sizing: border-box; 
	padding: 0px; 
	width: 434px;
	height: 225px;
	left: 183px; top: 94px;
	font-size: 25px;
	position: absolute;
	margin: 0px; border-color: rgb(102, 0, 51); 
	border-width: 5px; 
	border-style: solid;
	border-radius: 20px; 
	background: url(&quot;&quot;) rgb(102, 153, 255);
}
</style>
<div id="output">
    <p class="usersblock">Блок</p>
</div>

Я хочу сделать так, чтобы имя класса создаваемого блока можно было указывать вручную.

Есть ли какая-то библиотека для этого? Например, у которой были бы методы типа styles.addClass() или styles.editClass("background-color", "black"). Если нет, то как лучше реализовать это самому?
Заранее выражаю огромную благодарность всем, кто поможет

Answer 1

[Сергей delphinpro]

Есть ли какая-то библиотека для этого? Например, у которой были бы методы типа styles.addClass() или styles.editClass("background-color", "black")

Представьте, javascript без библиотек такое может
.classList.add()
.classList.remove()

Ну или банальный jquery

.addClass()
.removeClass()

Comments

[JackShcherbakov]

Вы хоть вопрос прочитали? Причем здесь это? Я итак знаю про эти методы. Прочитайте вопрос еще раз.

[Сергей delphinpro]

JackShcherbakov, вы лучше вопрос переформулируйте.
Как его еще понимать?

Я хочу сделать так, чтобы имя класса создаваемого блока можно было указывать вручную.

[JackShcherbakov]

Сергей delphinpro, Ну... мой вопрос не состоит только из этого предложения:

Я хочу сделать так, чтобы имя класса создаваемого блока можно было указывать вручную.

Там же есть еще куча всего, чтобы понять, о чем речь : )
Возможно я действительное непонятно излагаюсь. Вообщем я имею в виду не изменения атрибута style элементов, а добавление атрибута class HTML-узлу и модификацию CSS-кода (в моем случае CSS-классов) посредством некого средства.

[Сергей delphinpro]

JackShcherbakov, а как у вас построена система? вот вы накидали в редакторе блоков, назначили им стили. Как вы всё это сохраняете?

[JackShcherbakov]

Мое приложение просто пишет стили в атрибут style DOM-узлов. Но в этом то и заключается, что в итоге получается вот такая простынка кода:

<div class="output" style="width: 1490px; 	margin-left: -745px; left:50%; position: absolute; height: 5000px">
	<p style="box-sizing: border-box; padding: 0px; width: 434px; height: 225px; left: 183px; top: 94px; font-size: 25px; position: absolute; margin: 0px; border-color: rgb(102, 0, 51); border-width: 5px; border-style: solid; border-radius: 20px; background: url(&quot;&quot;) rgb(102, 153, 255);" class="">Блок</p></div>

Это очень трудно поддерживать.
Вот я и хочу, чтобы система генерировала не этот кошмар, а что-то подобное:

<style>
#output{
	width: 1490px; 
	margin-left: -745px;
	left:50%;
	position: absolute; 
	height: 5000px
}
.usersblock{
	box-sizing: border-box; 
	padding: 0px; 
	width: 434px;
	height: 225px;
	left: 183px; top: 94px;
	font-size: 25px;
	position: absolute;
	margin: 0px; border-color: rgb(102, 0, 51); 
	border-width: 5px; 
	border-style: solid;
	border-radius: 20px; 
	background: url(&quot;&quot;) rgb(102, 153, 255);
}
</style>
<div id="output">
    <p class="usersblock">Блок</p>
</div>

Ну а какой класс будет иметь каждый узел - решать пользователю.

[Сергей delphinpro]

JackShcherbakov, Я не о том, что куда пишется. Я о том, как оно сохраняется.
Ведь цель создать страницу, сохранить ее, чтобы потом можно было открыть.
И еще не понятна фраза о "неподдерживаемости".
Вы хотите сделать конструктор, который генерит читаемый код, чтобы его потом программисту можно было дорабатывать? Дохлый номер. Имхо. Расширяемый проект нужно проектировать с умом.

Если свести задачу просто к назначению класса, то добавьте в свой зелёный прямоугольник поле "CSS класс" для ручного заполнения. Пользователь будет писать класс, вы его сохранять. При этом в режиме редактирования вы будете применять стили напрямую, в style. А при экспорте генерить html+css.

[JackShcherbakov]

Сергей delphinpro,

Я о том, как оно сохраняется.

Сайт вообще никак не сохраняется - проект недоделан. В будущем будет сохранятся в базе данных.

Вы хотите сделать конструктор, который генерит читаемый код, чтобы его потом программисту можно было дорабатывать? Дохлый номер. Имхо. Расширяемый проект нужно проектировать с умом.

Я именно это и имею в виду. Ну почему дохлый? Я уверен, что это возможно и даже уже придумал вариант решения. Я хочу сделать интерфейс типа "Выберите стиль - выберете значение", мой код будет вытаскивать содержимое тега style и разбивать его на объект с объектами, который можно легко изменить. Юзер нажимает на сохранить и объект сериализируется в css-код. Это реализовать очень легко, не знаю, почему раньше в голову не пришло. Но все же интересно услышать другие идеи. А вообще, мне бы лучше иметь готовое решение.

Если свести задачу просто к назначению класса, то добавьте в свой зелёный прямоугольник поле "CSS класс" для ручного заполнения. Пользователь будет писать класс, вы его сохранять. При этом в режиме редактирования вы будете применять стили напрямую, в style. А при экспорте генерить html+css.

Бесспорно, это хорошая идея. Я, наверное, сделать это как дополнительную функциональность, но, все же, хочется иметь удобный интерфейс для манипулирования элементом

[JackShcherbakov]

Сергей delphinpro, Вот я тут набросал код парсера CSS - https://codepen.io/CitizenOne/pen/pLOPEW?editors=0010 Осталось самое простое - сериализация. Думаю идея Вам понятна.

[Сергей delphinpro]

JackShcherbakov, Написать парсер это круто )
Но в браузере уже есть свой парсер CSS
Посмотрите объект document.styleSheets

[JackShcherbakov]

Сергей delphinpro, Ухты! Спасибо за document.styleSheets - не знал об этом раньше. Но в выводе этого свойства я не смог найти элемента, который бы содержал объект типа:

body : {
    color:blue,
    width: "200px"
}

В объекте, который хранится в document.styleSheets есть только что-то подобное, но толку от этого нет.
cssText: "body { color: blue; margin-top: 10px; }
Видимо без написания своего парсера такой объект не получится получить.

[Сергей delphinpro]

JackShcherbakov, есть там. копайтесь.

Answer 2

[tema_sun]

Либо WYSIWYG, либо поддерживаемый код написаный ручками. По-другому не бывает.

Comments

[JackShcherbakov]

Бывает. Та же фигма успешно справляется с этой задачей.