Enforce Namespace in Class Names

[taufik-nurrohman]

The CSS result size will definitely increase, but it will keep the UI isolated from external applications. So, if for example, you want to embed Bootstrap/Tailwind layout in Panel without using an <iframe>, then that would be possible. It would likely generate less CSS conflict (except for default tags styling that usually comes with typography).

This not a BEM (Block-Element-Modifier) pattern by the way. I am just making this up.

Before	After
a	as:a
button	as:button
content	as:content
description	as:description
input	as:input
is:separator	as:separator
lot	as:lot
lot:f	?
options	with:options
output	as:output
p	as:p
select	as:select
small	as:small
table	has:border
textarea	as:textarea
title	as:title
u	as:u

[taufik-nurrohman]

with:options is acceptable but that a, b, button, i, input, output, p, select, small, table, textarea, u are too overkill. Those classes could be used by the front-end style sheet and I think this is quite useful for both back-end and front-end. Those classes are used to isolate custom form elements styles and to add border to table via CSS (because border attribute is deprecated) so that any third party user interface that use native form elements plainly without classes will continue to be served plainly, unstyled.

I cannot imagine a calendar widget has its padding and border broken due to the layout specific style sheet.

I cannot imagine a modal ‘×’ close button has a background color attached on hover due to the global button tag style generated by the layout style sheet.

And so, NO 👎