How to lint your JavaScript and Sass files

If you are concerned about the quality of your code, run:

npm run lint:js
npm run lint:css

The same conventions will be enforced as the ones used by the team building the Lightning Design System at Salesforce:

• JavaScript: http://standardjs.com/
• Sass/CSS: SLDS stylelint config

Tip: run npm run lint:js -- --fix to automatically fix your JavaScript code.

.slds- prefix in CSS

The most useful enforced rule of the CSS linter is that it will prevent you from committing overrides that would interfere with SLDS classes themselves.

// Bad: overriding styles directly on an .slds-* class name
// The linter will throw an error
.my-component .slds-button {
  background-color: red;
}

// Good: using your own selector to override a button
.override-button {
  background-color: red;
}

I just need to break the rules once

Rules can be temporarily turned off by using special comments in your CSS.

Follow the stylelint configuration guide to learn how.

I really need to customize SLDS for my needs

If you need app-wide style changes (e.g. changing the color of buttons), you could consider overriding Design Tokens via Sass rather than overriding CSS classes.

Note: overriding tokens doesn't guarantee future support of your code with SLDS.