Squint is a verbose and spacious coding style. It favors specific naming conventions and generous whitespace. Code should be as self documenting as possible and easy on the eyes.
BE CONSISTENT.
If you're editing code, take a few minutes to look at the code around you and determine its style. If they use spaces around all their arithmetic operators, you should too. If their comments have little boxes of hash marks around them, make your comments have little boxes of hash marks around them too.
The point of having style guidelines is to have a common vocabulary of coding so people can concentrate on what you're saying rather than on how you're saying it. We present global style rules here so people know the vocabulary, but local style is also important. If code you add to a file looks drastically different from the existing code around it, it throws readers out of their rhythm when they go to read it. Avoid this." - Google
Code quality can be measured by how efficiently it can be changed.
This project aims to help developers in their pursuit of more efficiently writing code that is lasting and welcoming to change.
( ! ) Work in progress. Think this project could be better? Submit a pull request, issue, or let me know.
Read the Documentation to learn the defaults with code examples.
Use the Config Files in combination with the tools listed below to enforce good code style on your projects.
A coding style guide is a complex thing. It can be hard to remember all the rules, especially when just starting out. In order to help enforce squint-style (or any style guide) you can use the following tools:
- scss-lint - for enforcing Sass linting rules.
- View scss-lint config file.
- View documentation and reasoning behind this config file.
- csscomb - for convenience as well as some style options that scss-lint doesn't offer.
- eslint - for enforcing JavaScript linting rules.
- Gulp.js - As streaming build system.
To setup the tools mentioned above in your project you can use these instructions as a guide. You can also use the example Gulp tasks as a starting point for your project.
Prerequisites
- Install gulp.js
npm install -g gulp
- Download all of the config files, and place them in your root directory.
git clone https://github.com/RyanWarner/squint-style.git
- Install scss-lint and respective Gulp plugin, gulp-scss-lint.
gem install scss-lintnpm install --save-dev gulp-scss-lint.
- Install csscomb Gulp plugin, gulp-csscomb.
npm install gulp-csscomb --save-dev
- Install eslint Gulp plugin, gulp-eslint.
npm install --save-dev gulp-eslint
- Add Gulp tasks for all 3 tools. See example gulpfile.js.
- GitHub
- Wordpress
- Idiomatic CSS
- "CSS Style Guides" - CSS Tricks
Inspired by @lilhinx.