Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configure SCSS linter #23

Open
skalee opened this issue Jan 7, 2020 · 5 comments
Open

Configure SCSS linter #23

skalee opened this issue Jan 7, 2020 · 5 comments
Assignees

Comments

@skalee
Copy link
Contributor

skalee commented Jan 7, 2020

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

@skalee skalee self-assigned this Jan 7, 2020
@skalee skalee changed the title Configure SASS linter Configure SCSS linter Jan 8, 2020
@skalee
Copy link
Contributor Author

skalee commented Jan 8, 2020

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
Copy link
Contributor Author

skalee commented Jan 12, 2020

@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
Copy link
Contributor

Ping @abunashir @strogonoff thoughts?

@opoudjis
Copy link
Member

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

@ronaldtse
Copy link
Contributor

Agree. Ping @strogonoff

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants