Hi community,
I'm studying for the Front end certification, and thought I'd start with something easy for this sunny day, but after only a few minutes I'm all confused ! I know that most styling typically should be left to the screen / theme, but this is for when you want specific styling for things in your block.
Maybe this was always the case, and I just hadn't noticed, but I always assumed that block CSS would only affect elements inside that block, but it can affect all elements on the screen, including all other blocks on that screen ! That is quite powerfull, and means that one badly designed block can mess up all screens it is on.
a few examples of what can go wrong :
- styling something in your block css that has not been styled anywhere else ( eg. styling div would affect all other div on same screen that don't have more specific rules going on)
- styling something in your block with higher specificity than same thing on the screen (eg. a rule of .btn.btn-primary could affect all buttons on the screen's background color)
- styling your own class inside a block, that happens to be used as a class name for something completely different on the screen or another block as well
Can anyone confirm that this is indeed the case and what they do to best deal with this ?
One thing I was thinking of, is to create a container at highest level of the block, give that a class name related to the block name, and write all css selectors starting with that class, is that advisable ? See attached oml for demo
Or do you prefer to apply inline styling on elements in your block to not have to deal with this kind of complexities ?
Would appreciate anyone's insights on this,
Dorine
Just in case this is not by design but a bug, I first noticed this today, and I'm working in my personal environment with the new/beta Service Studio Version 11.53.3, and it's a reactive app.
Hi dorine,
If you’re using a block at all places and you don’t want same css in all the places then you should create a custom classes in place where your block is. What you have mentioned is the right approach to do so.
Regards,
Ulrich
Ok,
just coming back to this one more time : I'm looking at this video, and at 3:20 it says that block CSS only affects the elements inside that block. As demonstrated with my example oml, that is not the case.
I think the real line in the lesson should probably say something like
" if the canvas is displaying a block, the leftmost tab is then the block stylesheet, defining style rules that affect the whole screen the block is rendered in, including other blocks on that screen, unless they are overridden by the CSS of a block placed lower on the screen or the CSS of the screen."
Oooor, is what is said in the lesson the intentional behaviour (as I would hope) and is this currently a bug ?
@Douglas Aldridge It is not a bug, the block css will be added as a stylesheet (internal stylesheet) to the page and it will reflect not only to the specific block but the whole page if the same class is mentioned anywhere in the page that will also got effected. As you know it will not reflect in the other pages where the web-block is not used.
Yes,
I know that is what is happening, but i find that
1) the learning video is giving wrong information
2 ) this makes consumer applications fragile to using badly designed blocks affecting their own style
Hi @Dorine Boudry,
Let me try to help you on understand it!
- So, for each css selectors you add directly to a block, platform will add it as a css file resource (as you can check at the inspect mode) and, if you have several instances of the same block inside a screen, platform is intelligent enough to only add one resource to that screen with those css selectors you added there (since they are the same). Those resources will only be added to the screen when/if that block is also there.
- Platform do not add any pre-selector based on the block to those added css selectores you added, that said, if you have different blocks with (same) css selectors at the same screen, the selector that will be applied will be the one in the last file resource loaded (css default behaviour).
We can also say that this is not a good practice (different blocks with same selectors), since that way you are not styling specific stuff for a block content only. If you want to do it you should use a pre-selector in order to turn your css selector specific for that context only (like you did to the well-behaved-block)!
Every time you want to style general selectors (.body, *) you should add them at the screen level instead, however let me say this is not a good practice as well since on this cases you will end up on having too much selectors with different styles across screens with will ends on having on an application without design consistency, if you have the same styles on those screens you will end up on a scalability issue due to the amount of places to manage...
As a wrap up:
- CSS selectors directly added to a block should always be wrapped in a pre-selector that add specificity for the intent context only. Also do not forget platform will add a css resource file each time you do it!
- Repeated CSS selectors at blocks/screen level will always ends up on scalability issues, add them to the theme level!
Hope it help,
Cheers,JR
thanks @José Rio and all others.
I get it, I add specificity to my blocks to avoid this type of side effect.
I think the learning video should give correct information, though.
Well, the information shared on the video is not incorrect, but I agree that could be more accurate and clearly ;)
they are literally saying this :
"Alternatively, if the canvas is displaying a block, the leftmost tab is then the block style sheet, defining style rules that affect only the block where they were defined."
How is that not incorrect ?
Replying to Dorine Boudry's comment on 12 Dec 2022 15:44:24
Since platform is creating a new resource file and you are using global selectors right?
As I said before, in other words... a resource file do not have the capability to define a selector in a specific context you didn't specify. Imagine the structure your block can have? What was the specific selector platform should create in order to achieve your intend result? You have the ability to create a block that contains 2 header tags for example, so, if each one has a different style, how this can be achieve from an automatism behaviour perspective? It can't right? That's why we should always have a wrapper selector in those cases.
I suppose you are "looking" into very simple and straightforward cases, which can or not happen.
Hope the explanation was good enough to you understand,