I am encountering an issue with the rendering order of CSS between debug=0 and debug=1. I understand the asset manager is disabled when debug=1 and I always clear my asset manager cache within the global settings to make sure I am working with the current versions.

$config = '3.9.0';
$config = 349;
$config = '180604';
$config = true;
$config = '30036';

I have extended the Fruity theme and added some CSS into the custom.css file. I also have a custom question theme with CSS that is intended to override some settings within custom.css. I know I can accomplish my intent by manipulating the specificity on some of the directives but that is not the intent of this question.

My question is why is the CSS loaded in a different order when debug is on or off? With debug = 1, I do not have to for specificity using the !important directive. With debug = 0, the CSS loads in a different order requiring specificity using the !important directive.

I have attached two screen shots from the chrome dev tools showing the different CSS load order for the same question within the same survey.

I appreciate any insight as to why this might be occurring.

Hi,

I think it's an issue and must be reported.

And i think the good order must be
- All LimeSurvey core css
- Question template css
- Survey theme css

Survey theme must be the last, always (and more for custom.css)

If you can : update to last version and report the issue www.limesurvey.org/community/bug-tracker

I agree that it should be reported as a bug but I don't agree with your order. I think the custom question theme should be last - the questions are more granular and can be placed in any theme so should override theme styles.

- Core styles CSS
- Custom survey themes CSS
- Custom question theme CSS

tpartner wrote: the questions are more granular and can be placed in any theme so should override theme styles.

But then : admin GUI don't have a clean solution to update css of question template.

I really think question template mus be before for this reason

Question template can easily add own class, not in «default» theme.

For example :
<input class="form-control my-form-control">

And the question css have .my-form-control.form-control{background:red}

Or use .myquestion-template .form-control{background:red}

then Survey theme css can set .myquestion-template .form-control{background:orange}


Really more easily

@aellison9 : there are an issue with your system.

If you set 2 radio question, one with your template one without : your css apply to the 2 question.

You must restrict the css to your template … something like

.questionRadio .label-placement{…}

@tparner : i think css class of question for Question template have automatically set to question template name. Don't seem to be. can you confirm ?
I think it's the solution : here : github.com/LimeSurvey/LimeSurvey/blob/50...ntimeHelper.php#L387

Set the question class to : "core-class question-template-class"
No ?

PS : adding the template name to question class here : github.com/LimeSurvey/LimeSurvey/blob/50...timeHelper.php#L1703

Sorry, I still think the CSS should cascade down through the structure - Core --> Survey --> Question.

Yes, you can enforce rules by making them more specific but that works both ways.

Regarding your comment about the GUI, I assume that at some point it will be possible to edit custom question themes as we now can with survey themes.

Yes but : survey theme are attached to Survey.

Maybe in one survey you want : green color, and in another red color for same question template. Then : if question template is loaded after Survey template : only solution for such situation is to use !important;

Related feature request : bugs.limesurvey.org/view.php?id=13883

PS :
For css : i'm always to more global to more specific, then here it's
- Question type (core class and css)
- Question (question class and css)
- Question in THIS survey (Survey theme class and css)
- THIS Question in THIS survey (Survey theme class and css + Question setting class)

Thank you both and much like each of you, I can argue pros and cons to the load order each of you propose. If pushed for a position, I might agree more with Denis that Question Themes should load before the Survey Theme custom.css since this would lend itself better for "survey branding and color schemes".

@tpartner - using your cardSort custom question theme as an example and assuming the Survey Theme custom.css loads before cardSort.css: if I have different survey themes and want to manipulate the colors of the "cards", then I have to include the class in my custom.css, change the color, and flag the specificity as !important. If the custom question themes loaded before the Survey Themes, I would still need to include the class in my custom.css but it would not encumber me with specificity requirements and in my opinion, be the cleaner option.

On the flip side, my custom question theme incorporates several question types (list-radio, array, multiple-choice, etc) which essentially leverage the same CSS (and classes) so it made more sense to incorporate it into the Survey Theme custom.css and use the Question Theme .css file for anything that might be slightly different in the implementation.

At the end of the day, we just need a consistent load order between debug and non-debug. At least then we can work around any nuances without being overly convoluted. I will upgrade to the latest to see if the issue persists. More to come.

@denischenu - I am not sure this makes sense to me.

@aellison9 : there are an issue with your system.

If you set 2 radio question, one with your template one without : your css apply to the 2 question.

You must restrict the css to your template … something like

.questionRadio .label-placement{…}

.label-placement is a class specific to my custom question theme and assigned to the label element within the .twig for the view. Unless I make both questions to use my custom question theme, then only 1 question would be impacted by the css. If an element doesn't have the class, then the styling will not apply. This is the reason I essentially extended some of the base question types with my custom question theme.

as always with hard debate, it will finish with an option to choose the order

If there is an option, the debate will get to the question: What is the default order?

using your cardSort custom question theme as an example and assuming the Survey Theme custom.css loads before cardSort.css: if I have different survey themes and want to manipulate the colors of the "cards", then I have to include the class in my custom.css, change the color, and flag the specificity as !important.

@aellison9, that's not true. Yes, you need to add a rule to the survey theme CSS file (as you would anyway), but simply specify the survey theme class. The <body> element is assigned a theme-specific class for situations like this.

aellison9 wrote: …
@denischenu - I am not sure this makes sense to me.

@aellison9 : there are an issue with your system.

If you set 2 radio question, one with your template one without : your css apply to the 2 question.

You must restrict the css to your template … something like

.questionRadio .label-placement{…}

.label-placement is a class specific to my custom question theme and assigned to the label element within the .twig for the view. Unless I make both questions to use my custom question theme, then only 1 question would be impacted by the css. If an element doesn't have the class, then the styling will not apply. This is the reason I essentially extended some of the base question types with my custom question theme.

OK,

Then you need survey theme replace Question theme .label-placement . Sorry for missunderstanding , i dond't have your theme for testing

tparner wrote: The <body> element is assigned a theme-specific class for situations like this.

Oh tight , it fix the issue . Question : did this apply to child themes ? vanilla3 extend vanilla2 extend vanilla : have 3 Survey theme class ?


But i still think less is better . In general : i think Question theme dev create new specific class for new Question and set a "default style" in class. LimeSurvey admin can set another style more easily (and in future : have css for each survey ).