[Helltoy]

Hy,

I want let user to customize his profile page (like background color/image, text color and so on).

I would like to know what is the best solution for this. Should I use "data attributes" or I should simply add "style" into html document.
With data attributes i should have javascript but I don't see point of using it (maybe I miss something) if I can simply add styles.
Can anyone suggest me solution for this?

Code

<div class='test' data-bg-color="red" >teste</div>
//script to change body color

or

Code

<div class='test' style="background-color: red; >teste</div>

Or should I put all profile content into one div and then style that div?

Thanks.

[ryan⚜]

Don't quote me, but I'm pretty sure it's better to use class selectors unless you're trying to store data or just need customize a specific element. I personally don't even use them unless I'm working on existing site, makes it way easier.

[Rushax]

For my custom built WordPress themes, I just echo out the field they want as inline if it's for e.g a background image. No need for messing about/adding more files than needed, what's the point imo.

[Nachfolger]

If you're selecting from a premade list, always use a styled class. It's not even recommended that you would allow user input that lets them choose the color from an input. You're opening yourself up to a world of vulnerabilities.

Let them select a list of colors (Eg. Colors 1-8) and send the ID to a server. Never take the input at face value (Eg. <option val='#FFFFFF'></option>), use something like "<option val='1'></option>" and let the server make the relation between colors.

1 = #fff,
2 = #000,
etc

As for the classes etc, why would you iterate through the data attributes to apply the classes/styling? Makes no sense. Just do it at the time of loading using either a class (I would recommend that, for sake of simplicity) or inline styling.

[Helltoy]

Thanks all for help.

It's not even recommended that you would allow user input that lets them choose the color from an input. You're opening yourself up to a world of vulnerabilities.

This is exactly what i want to do (let user to chose any color). Make input field where user can "write" color hex code for specific element.

I don't understand what you thought by "opening yourself up to a world of vulnerabilities" because I would add some input check (to make sure that user wrote color hex code).

[Rushax]

There is color pickers available in HTML5.
Depends what sort of backend your working with I guess for this sort of question though.
https://www.w3schools.com/colors/colors_picker.asp