hyperoslo / hyperoslo/playbook
Code style for Stylus (and CSS in general)
- 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.