CSS Codestyle: separating rulesets

Development
#1

Good afternoon!
I would like to propose a new codestyle to add in our CSS codestyle.
I think it should be added to the recommended codestyle section (“The following recommendations could be followed”).

##Start of the proposal##
Separate adjacent rulesets with an empty line.
##End of the proposal##

As far as I know, this is an unspoken rule we’ve been following (not perfectly) in our recent CSS/LESS files. However there’s still a some (mostly older and rarely updated) files not following this possible codestyle at all. Since changing this should have no influence on the compilation of CSS, I think fixing such files should be done whenever we come across some, in order to converge towards a more consistent CSS codebase.

Do you agree with the addition of this codestyle? Do you have different ideas on how we should work towards it?

Thank you in advance for your feedback!
Lucas C.

#2

Hi Lucas,

thanks for the proposal, I’m not sure to see exactly what it means, could you give some examples?

1 Like
#3

Hi @surli !
Here is an example of a codeblock that doesn’t respect this codestyle (from attachments.css):

/* Attachment form style */
.attachmentActionButton {
  background-color: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 80%;
  margin-bottom: 4px;
  background: transparent 2px center no-repeat;
  padding-left: 20px;
  cursor: pointer;
}
.add-file-input {
  color: $theme.linkColor;
  background-position: 2px top;
  background-image: url("$xwiki.getSkinFile('icons/silk/textfield_add.png')");
}
.remove-file-input {
  background-image: url("$xwiki.getSkinFile('icons/silk/cross.png')");
  width: 16px;
  text-indent: 30px;
}
.uploadFileInput {
  margin: 5px 10px 5px 0 !important; /* !important is needed for Toucan. */
}

After modifications to respect the proposed codestyle, it would be:

/* Attachment form style */
.attachmentActionButton {
  background-color: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 80%;
  margin-bottom: 4px;
  background: transparent 2px center no-repeat;
  padding-left: 20px;
  cursor: pointer;
}

.add-file-input {
  color: $theme.linkColor;
  background-position: 2px top;
  background-image: url("$xwiki.getSkinFile('icons/silk/textfield_add.png')");
}

.remove-file-input {
  background-image: url("$xwiki.getSkinFile('icons/silk/cross.png')");
  width: 16px;
  text-indent: 30px;
}

.uploadFileInput {
  margin: 5px 10px 5px 0 !important; /* !important is needed for Toucan. */
}

Here, the difference is that after every closing bracket (marker for the end of a ruleset), I added an empty line. This line is not necessary for computation but helps separate adjacent rulesets when reading.

Have a good day!

1 Like
#4

Thanks, so indeed the rule makes sense +1

#5

Hello. From your example below, do I understand correctly that this style will be used only for proposals and not directly in style rules (existing CSS files)?

#6

In my opinion, it’s a small enough change that we can add it to existing CSS files, but low priority enough so that we don’t need to update all of them at once.

Thanks,
Lucas.

#7

It’s good idea. It improves readability and consistency across files. This change won’t affect CSS compilation, so updating older files gradually is a practical approach. This addition to your codestyle guide can help in maintaining a clean and organized codebase.

#8

Not sure, it will help. If we start applying it for rules which cover massive classes/ids - it will improve their readability. However, if a proposal covering fix/improvement affects only one CSS rule - this rule approach will overload existing - simply commenting in one line is more content.

#9

wait, I’m probably looking wrong at it. Are you planning to add commenting lines according to CSS syntax?

#10

This codestyle rule should be added only to HTML & CSS Code Style - XWiki , I think a single item in the already existing list would be enough. The bold and # are here just to put emphasis on the content of the proposal itself, it’s just formatting to make it easier to spot the actual content I want to add and discuss.

I did not specify the position of comments related to this newline. In my opinion, we can have both, and we add the empty line before the comment for the style rule. This would give something like:

.add-file-input {
  color: $theme.linkColor;
  background-position: 2px top;
  background-image: url("$xwiki.getSkinFile('icons/silk/textfield_add.png')");
}

/* This is a generic comment about the ruleset defined thereunder. */
.remove-file-input {
  background-image: url("$xwiki.getSkinFile('icons/silk/cross.png')");
  width: 16px;
  text-indent: 30px;
}
#11

+1 as I sometimes check the CSS style for what can be modified to my needs, the updated codestyle rule will enhance navigation to separate desired style rules.

1 Like
#12

+1 thanks

#13

I updated the CSS codestyle with this new rule :slight_smile:
Have a good day!

1 Like
#14

+1 also, but I think that more than a recommendation (that we can forget) it would be nicer to provide a “codestyle” file to configure our IDEs like we do for Java. I’m not sure how complex it is, but it would be very beneficial. And we need one for JavaScript too :slight_smile:

Thanks,
Marius

1 Like