hyperoslo / hyperoslo/playbook

Code style for Stylus (and CSS in general)

Open
#70 11 comments 4 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
40
Forks
8
PR merge metrics
No merged PRs in 30d

Description

So I started looking into some code styles and linting for Stylus today. As Peter pointed out, making guidelines for unopinionated language like CSS is hard. But I still believe we'll benefit from some structure across projects.

The readme for codestyles in the playbook already outlines some basic rules, but with the addition of linting this can be done in a much more detailed maner.

The most promising linting tool for css/stylus thus far is [Stylint](https://github.com/SimenB/stylint). For now they provide linting relying on a `.stylintrc` file in your project. That has a set of rules you can customise to your liking, but no imports or advanced rule setting. They have a 2.0 version in the making that will aim to mimic the functionality from `ESlint` that we already use for javascript. There is no ETA, but the project is being actively developed on, although the last PR was a month ago.

This is the default ruleset:
```json
{
"blocks": false,
"brackets": "never",
"colons": "always",
"colors": "always",
"commaSpace": "always",
"commentSpace": "always",
"cssLiteral": "never",
"customProperties": [],
"depthLimit": false,
"duplicates": true,
"efficient": "always",
"exclude": [],
"extendPref": false,
"globalDupe": false,
"groupOutputByFile": true,
"indentPref": false,
"leadingZero": "never",
"maxErrors": false,
"maxWarnings": false,
"mixed": false,
"mixins": [],
"namingConvention": false,
"namingConventionStrict": false,
"none": "never",
"noImportant": true,
"parenSpace": false,
"placeholders": "always",
"prefixVarsWithDollar": "always",
"quotePref": false,
"reporterOptions": {
"columns": ["lineData", "severity", "description", "rule"],
"columnSplitter": " ",
"showHeaders": false,
"truncate": true
},
"semicolons": "never",
"sortOrder": "alphabetical",
"stackedProperties": "never",
"trailingWhitespace": "never",
"universal": false,
"valid": true,
"zeroUnits": "never",
"zIndexNormalize": false
}
```

And this is the modifications I'm using in my test project:
```json
{
"exclude": ["node_modules/**/*"],
"extendPref": "@extend",
"namingConvention": "lowercase-dash",
"namingConventionStrict": true,
"none": "always",
"parenSpace": "never",
"placeholders": false,
"quotePref": "single",
"semicolons": false,
"universal": "never",
"zeroUnits": "never"
}
```

Note that you have to include your changes into the whole config to get the default functionality. Thats a bit unfortunate.

**If you have some input on this matter it will be greatly appreciated.** What sort of ruleset should we use, is it possible to convert old projects into this ruleset easely or is there anything besides all of this linting that can be done to keep styles more structured in a project.

For some inspiration and further reading check out [Github](http://primercss.io/scaffolding/) and [Googles](https://google.github.io/styleguide/htmlcssguide.xml) css styleguides

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.