Jenga CSS Style Guide

This guide aims at improving collaboration, code quality and enabling supporting jenga infrastructure. It applies to raw, working files that use CSS.

Draft Mode / 2020

Theme Variables : Variable names should mean and/or suggest their purpose. Should be full words variable names. Those related should be decalred after each other and in alphabetical order.

html {
  --alert-background: #00796b;
  --alert-color: #000;
  --message-background: #fafafa;
  --message-color: #222;
}

Components : Use meaningful or generic ID and class names which suggest their purpose or related element they are applied on. Try as much as possible to use class naming as opposed to IDs.

.button {
  border: 2px solid var(--border-color);
}

Naming : Use "semantic" name styling for semantic HTML5 where necessary. This helps you to maintain significant user interface design consistency when applying global rules.

main {
  background-color: var(--background-color);
}
       
footer {
  background-color: var(--footer-background);
}

Spacing : Separate words in ID and class names by a hyphen. End every declaration with a semicolon for consistency and extensibility reasons.

.article-section {
  color: var(--primary-text-color);
}

Use a single space between property and value (but no space between property and colon) for consistency reasons.

Use a single space between the last selector and the opening brace that begins the declaration block. The opening brace should be on the same line as the last selector in a given rule.

/* recommended */
.accordion {
  color: var(--primary-text-color);
} 

  /* not recommended */ 
  .accordion{
    color:var(--primary-text-color);
}

Quotation : Use single ('') rather than double ("") quotation marks for attribute selectors and property values.

body {
    font-family: 'open sans', arial, sans-serif;
}

Naming order : Put declarations in alphabetical order in order to achieve consistent code in a way that is easy to remember and maintain.

.alert {
    background-color: var(--alert-background);
    border-radius: 7px;
    color: var(--primary-text-color);
    display : block;
}