Configure SCSS linter

[skalee]

Investigate code style issues in metanorma/metanorma-ogc#70, and prepare some good style book for SASS.

[skalee]

I can adjust the style guide for SCSS, but I have questions about which rules do you prefer. I wanted to tell them from https://github.com/metanorma/metanorma-ogc/blob/7100b9c0c2ce203d798de36ef106787558e928de/lib/isodoc/ogc/html/ogc.scss, but there are few style inconsistencies there, possibly legacy ones, hence it was impossible.

Alternatively, SCSS style checker can be easily disabled project-wide or organization-wide by adding following to respective .hound.yml:

scss:
  enabled: false

But given the fact that there are formatting inconsistencies in e.g. https://github.com/metanorma/metanorma-ogc/blob/7100b9c0c2ce203d798de36ef106787558e928de/lib/isodoc/ogc/html/ogc.scss, perhaps it should stay on.

---

Anyway, here are things I need to know if we're going to use this linter. The list seems long, but questions are simple and answers easy to make, hopefully.

It is all entirely up to you and your aesthetic and practical preferences. For any of these we may adopt particular style or disable respective checks.

1. Class naming

I guess CamelCase, right? Are there any exceptions, for example there: https://github.com/metanorma/metanorma-ogc/blob/7100b9c0c2ce203d798de36ef106787558e928de/lib/isodoc/ogc/html/ogc.scss#L646-L649? And what about naming convention for mixins?

2. Indentation

Tabs or spaces? How many of them?

3. Where to put opening and closing curly brackets?

.coverpage_docstage
    {text-align:center;
    font-size:30.0pt;
    color:#2e81c2;}

vs

.coverpage_docstage {
    text-align:center;
    font-size:30.0pt;
    color:#2e81c2;
}

vs any combination of these?

4. Should colon be followed with a white space?

margin-right: 36.0pt;

vs

margin-right:36.0pt;

5. Metrics

Hound warns if there are more than 10 properties set within a rule. Does this limit make any sense for you? It is violated many times, e.g. here: https://github.com/metanorma/metanorma-ogc/blob/7100b9c0c2ce203d798de36ef106787558e928de/lib/isodoc/ogc/html/ogc.scss#L211-L234. If the answer is "yes, with exception of this project", then perhaps we can think of some overrides.

6. Avoiding fractional part in measurements

Hound says:

UnnecessaryMantissa: `10.0pt` should be written without the mantissa as `10pt`

Do you agree?

QualifyingElement: Avoid qualifying class selectors with an element.

7. Class selectors with element name

Hound says:

QualifyingElement: Avoid qualifying class selectors with an element.

This is about selectors like this one: p.example in following piece of code:

p.example, li.example, td.example {
  margin-right: 0pt;
  margin-left: 0pt;
}

div.example {
  margin-right: 36.0pt;
  margin-left: 36.0pt;
  margin-top: 0cm;
  margin-bottom: 0cm;
}

p.example, li.example, div.example, td.example {
  mso-pagination:none;
  font-size:10.0pt;
  font-family:$bodyfont;}

Given the fact that you use it quite extensively, should I turned if off?
Or maybe you want to eventually refactor it into following?

.example {
  &p, &li, &td {
    margin-right: 0pt;
    margin-left: 0pt;
  }
  
  &div {
    margin-right: 36.0pt;
    margin-left: 36.0pt;
    margin-top: 0cm;
    margin-bottom: 0cm;
  }
  
  &p, &li, &div, &td {
    mso-pagination:none;
    font-size:10.0pt;
    font-family:$bodyfont;}
  }
}

8. Inline color literals

At line https://github.com/metanorma/metanorma-ogc/blob/7100b9c0c2ce203d798de36ef106787558e928de/lib/isodoc/ogc/html/ogc.scss#L666 Hound says:

ColorVariable: Color literals like `#2e81c2` should only be used in variable declarations; they should be referred to via variable everywhere else.

Do you agree?

9. Leading zeroes

Hound says:

LeadingZero: `.0001` should be written with a leading zero as `0.0001`

Do you agree?

10. Spacing between rules

Hound says:

EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line

Do you agree?

11. URL format

Hound says:

UrlFormat: URL `file:///C:/Doc/FILENAME_files/header.html` should not contain protocol or domain

Do you agree?

---

cc @opoudjis @strogonoff @ronaldtse

[skalee]

@opoudjis Any opinion on that, or should I use my own favourite settings? ;) The above post seems long, nevertheless there's not much thinking in it. Especially that "disable this check" is also a good answer sometimes.

[ronaldtse]

Ping @abunashir @strogonoff thoughts?

[opoudjis]

I have zero opinion on CSS. @strogonoff OTOH has definite opinions, and I defer to him.

[ronaldtse]

Agree. Ping @strogonoff