CSS Styling Guidelines

CSS styling and implementation standards for the front end oneleif website.

The stack used for styling is Sass which is a CSS preprocessor, can find more information about Sass here.

All of these standards are able to be reevaluated and up for discussion; you can make a proposal by following these steps.

If you have any questions feel free to reach out in the #oneleif-website channel in our discord.

---

Table of Contents

• HTML Naming Conventions
  • IDs
• CSS Naming Conventions
  • Class Names

---

HTML Naming Conventions

Naming Style of ids

• id should be in camelCase
• Example id="fakeId

Reason: most common convention and will make the id look different from classNames

CSS Naming Conventions

Naming Style of class names

• class name should be in kebab-case
• Example className="fake-idd

Reason: most common convention, able to tab between each word in a CSS file, Also, using hyphens allows you to take advantage of the |= attribute selector, which selects any element containing the text, optionally followed by a dash:

span[class|="em"] { font-style: italic; }