Bricks Version: 1.4
Browser: Chrome latest
OS: Windows 11
Not sure if this is a bug or not.
But when I copy the styles from an element ID that has custom CSS in the element’s custom CSS box, it does not get copied to the global created class when pasted.
So when you reset the ID styles it loses this custom CSS.
Again this may not be a bug and actually a feature request so that custom CSS is copied when copying styles.
Thanks
Mick
Hi Michael,
This is not a bug, because the custom CSS is or can be completely different than the styles you apply through the builder. You can also use the field to add other styles that have nothing to do with the element itself.
Instead of adding the styles to the custom CSS of the element, you should add them in Bricks » Settings » Custom Code (so you can access them from anywhere), or alternatively via Page Settings " Custom CSS. The only downside is that you can’t use “root {}” to address the element. But even that is easy to solve with a class or a custom ID.
I’ll move the thread over to Feature Requests anyway and get back to it when I find time to go through the requests (they had to be put on hold due to the plethora of changes in 1.4).
Best regards,
timmse
Thanks Stefan,
Yeah, I was not too sure if it was a bug or not as it is styles applied to the element. Thank you and no rush it does not hinder me from designing. 
Well I don’t agree with you on this.
I understand that element custom CSS can apply to anything, even unrelated to element, if not using root, but it should actually be used to set element related CSS.
Any other CSS should be set in page custom CSS or code element or global CSS or third party plugin.
So it should be copied from ID to class.
What is strange, and probably a related bug, is that when copying/pasting styles from class to class, custom CSS is actually copied, but unfortunately root is changed into source class, so it doesn’t apply to destination class:
IMHO all styles should be entirely and exactly copied without change from id to class, class to class, and class to id 
Hi Yan,
So when you copy and paste a custom class to another custom class your custom CSS added in the element CSS box gets copied too? I appreciate it removes root in your example, but does the rule get copied to the new class? In my case, copying the ID styles with custom CSS does not copy it over it just deletes it from the ID when I reset ID styles.
Also, I thought the same too:
My understanding was:
I thought that way you keep unused CSS to a minimum & easier to locate the CSS in terms of where it has been written too (IMO).
So is this the wrong way of doing it? In my example below I am targeting a string in the animation heading. I cannot target root as that will not work, so I targetted .typed as I thought it was local to this element only due to being applied to the element CSS box and would ONLY be applied to this element on this page.
So should it be root .typed {} added in either an ID or Custom Class?
– Yes, custom CSS is copied between classes when using the copy/paste styles.
But root seems to be changed to source class name in the destination class CSS, so CSS is not applied to destination class unless you edit it to replace the source class by root.
I don’t think it is expected behaviour, or it is very strange… @timmse ?
– As for ID to ID, everything is copied without root change.
– From ID to class, you’re right, nothing is copied.
I really think it should, and with no root change.
– Finally, from class to ID, all CSS is copied without root change!
→ This is really confusing… I think the behaviour should be the same in every way: all custom CSS should be copied as is, without any change.
– And for your last question, yes I think you should add root so that other .typed elements are not targetted.
(And as you understood, if you want to target them, put the CSS in page CSS.)
Thanks, Yan,
Again I cannot disagree with you, Like the thread about templates, I think it would be best for it to be consistent across the board which would make it easier for everyone to understand.
It would be great if the element CSS box was isolated to that element That would allow you to pre-append root to the Element CSS editor. This would help by:
Not sure I understand this:
For me the current system is great since you can style children elements (root .child-class #child-id etc.).
For instance look Oxygen, element custom CSS is very limited because you can only style the element class/id.
100%, and you still can.
Take my example in the above post:
Because I have added the custom CSS at the Element level, if the element CSS editor has root applied by default (pre-appended) meaning, it is always applied and does not need to have root written in the Element CSS editor.
If I want to target the whole Element, I would just write in the declarations such as color: #4093f5, for example (without typing in root as it is already being targeted)
However, I would write as per the image above and add .typed because I wanted to target a string or a child class. But the actual code output would be root .typed
This means anything I add to the element CSS editor is always isolated to that Element only. And because the root declaration is always present, it would stop the conflicts when copying and pasting as the source class name will always be root followed by any other targets such as child classes and IDs, etc.
From what I understand from this thread is that my code is wrong and if I have another anim-typing element anywhere else on the site it gets affected by this CSS which seems wrong to me (if i wanted that to happen I would use page CSS (multiple elements on the page) or Global CSS (multiple elements across the site).
This would only apply to the Element CSS editor when targeting a singular element.
Not sure if that is any clearer?
Yes, much clearer!
The thing is this solution, even if very seductive, would require parsing the CSS to detect rules with or without selector and then add selector and accolades:
color: red; /* Here, add the element selector + accolades */
.child { color: green; } /* Here, add only element selector */
I guess it’s easier with root ... { }, since you just need to replace all root occurences by element selector in the string.
Same for copy-pasting from or to other custom CSS or external or web article, a valid CSS is better and a simple find/replace would work directly 
Root would always be present (just not visible or require it to be typed in manually). I’m guessing root as the selector would need to be parsed anyway as It would need to identify its association to the element you are applying it to, wouldn’t it?
So this is what you would type:
.typed {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
But because root is automatically applied, this is the actual code when it gets read:
root .typed {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
Because all element CSS boxes come preset with root, you would never have issues when copying and pasting between classes as root is always the prefix. You would however need to change to the ID to class behavior because at the moment it does not copy the rules across when copying and pasting as it does for the rest of the scenarios you mentioned earlier.
You would also not have the issue of CSS placed in the element CSS editor affecting the same elements on the site because you forgot to type root as part of the original selector.
That being said, I can appreciate that for a coding purist, not having the root selector visible inside the CSS editor and just adding declarations could be off-putting. An alternative would be to have an open root {} selector already typed in the element CSS editor when it’s opened.
Also, please correct me if I am wrong as I might have the wrong understanding of the use of root whereas I would add root to target an element and if I wanted to target multiple of the same element on the same page or across the site, I would not use root and use the class such as .typed {}.
Thanks for spitballing this with me Yan
No, root does not have to be parsed because a string replacement with element selector is enough. Then the CSS can be directly output to frontend.
And if you target the element itself, not a child selector, you can’t add root only, you need the accolades:
root color: red; /* WRONG */
root { color: red; } /* OK */
So it adds complexity and requires parsing. I think the root string replacement is much easier.
And it is more valid CSS if you need to copy-paste (then replace root with anything in destination).
Thanks Yan, Yes I understand that
When i mention root is automatically applied it would have also have the accolades included if using the same example but targeting the element itself and not a child selector:
I would type this
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
But because there is a fixed root the rule would look like this:
root {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
But I can appreciate this does not ‘feel’ as valid even though the output is valid and correct. This why i mentioned this here:
I think in it simplest form you are:
The ability to target BOTH element and children selectors in the same custom CSS requires parsing to detect which rule is root or child so that accolades are added or not for each rule .
Way more complex than string replacement.
I would be OK for the pre-typed root !
root {
}
And maybe a small button to quickly insert a new block if other selector needed:
root your-selector {
}
Could you give me an example Yan?
It is probably me being thick, but I see no difference in having a pre-typed root or not having it visible in the editor:
Pre-typed (before adding code)
root {
}
Pre-typed (code added - no children)
root {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
Pre-typed (code added - with a child selector)
root .typed {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
Now compare that with root being automatically applied to these same CSS declarations
Code added to the editor (no child selectors)
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
output
root {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
Code added to the editor with a child selector
.typed {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
Output
root .typed {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
And just for good measure if I wanted to target two children - the code added to the editor would look like this
.typed {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
.suffix {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
And the output would be:
root .typed {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
root .suffix {
color: #4093f5;
text-transform: uppercase;
letter-spacing: -3px;
}
not sure if the singular root would be enough at the start of the rule for the second child or if a second root would need to be place before it also?
Again it might just be me being thick Yan, but I cannot see any difference to how I would do it normally if typing in the code manually? As mentioned at the start perhaps you have an example that is complex and would not be possible.
p.s. if you are targeting two elements on a page then page CSS would be for this. This is just for styling a singular element and any childs of that singular element.
I gave you a simple example in a previous message:
color: red;
.child {
color: green;
}
You will need to parse the code to convert this into:
#element-selector {
color: red;
}
#element-selector .child {
color: green;
}
Line 1 needs root + accolades around property, line 2 needs root added, line 3 and 4 nothing.
You need an algorythm to do this, this is what I call parsing. You need to decode the content to add stuff where it is needed, and as text editor is free, it is very difficult to code this kind of decoder (like grammar analysis).
With the use of root in the content, you just do a string replacement:
root {
color: red;
}
root .child {
color: green;
}
Replace root by #element-selector and that’s it, one function call.
Ah got you now
Haha thanks Yan