CSS rules at block level
Question

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.

QDR_Frontend.oml

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.