Andras/BoundlessFlowCampus2K
3
6
Fork 0
Code Issues 144 Pull requests 13 Projects Releases Packages Wiki Activity Actions 2
Page: CSS Coding Convention
Pages
API SMHI API TimeEdit Accessibility Testing Api documentation Bat/Ps Branch Creation C# Coding Convention CSS Coding Convention Coding Conventions Creating new databases Dapper Documentation for service endpoints Documentation of useTemperature and mock sensor Energy endpoints Environment Evaluation react-grid-layout Evaluation Localization Evaluation Password hashing Evaluation Testing framework Evaluation of Logging Frameworks Formatter Frontend model Generic Diagram for Sensor data flow Home How to- Creating Databases in Docker Implementing different Styles Implementing new Mockup sensors Implementing new Views Installation script documentation Installation Issues JSON Coding Convention Jest Testing Layout endpoints Linux Localization Login endpoints Mac Middleware model Mock API Ceation Guidelines Mockup models Model Tools and Standards Parking endpoints React/JavaScript Coding Convention React Reviews Room booking endpoints SQL Coding Convention Scheduled Database tasks Scripting Coding Convention Secrets and .env Server Access Server-Deployment Service/API models System models System requirements Temperature endpoints Testing API with Bruno Testing Architecture Testing frontend for Mobile devices Testing frontend with Playwright Testing methodology Västtrafik API Webpage Design Windows pg_cron and scheduled database jobs xUnit Testing
6 CSS Coding Convention
a24julot edited this page 2026-05-11 11:46:11 +00:00
Table of Contents

CSS Coding Convention

Terminology for CSS

selector {
  property: value;
}
  • A declaration block is the code between the curly braces “ { } “, it consists of zero or more declarations.
  • A rule set (rule) consists of the selector followed by a declaration block.
  • A declaration consists of a property name followed by “ : “, followed by a value, and lastly a semicolon “ ; “.

Formatting

  • Indentation should be done with prettier (4 spaces).

  • Use double quotes when for example naming a font - “Arial”.

  • Put spaces after “ : “ in property declarations.

  • Put spaces before “ { “ in rule declarations.

  • Use hex codes for colors, check the design document (issue #16) for the correct hex code. https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Webpage-Design

  • The use of rgba is allowed for css in cases where it fits better then hex such as shadows or transparency.

  • Always have a blank line between rule sets.

  • A rule set within a rule set should be indented one level relative to their rule set.

    • Example:
selector {
  selector {
    property: value;
  }
}
  • If a ruleset has multiple selectors, each selector should have its own line, followed by a comma “ , “.
    • Example:
selector,
selector {
  property: value;
}

Naming

  • All classes, id and attributes should be named using kebab-case.

example:

.example-xxx

Referencing

  • when refering to a css in js we should always use bracket notation.

example:

className={styles['tool-tip']}
className={styles['p']}

Comments

  • Have descriptive comments for every rule set. They do not have to be long, but others should not have to guess what your code does.
  • All comments should be placed above the line of code you are describing.
  • The comment should be indented in the same way as the property or rule set it is describing.
/* comment about the rule set*/
selector {
  /* comment about the declaration*/
  property: value;
}

Modularity

  • There should be a parent CSS file specifying the default layout and style.
  • Other CSS files should be made for specific themes or users and may override some rules in the parent CSS file.
  • For example:
    • index.css
    • index.bluetheme.css
    • index.purpletheme.css

Exceptions:

  • Large blocks of rule sets with single properties may be formatted differently, one line per rule set. There should be a space after “ { “ and before “ } “.
selector { property: value; }
selector { property: value; }
selector { property: value; }
  • If the property has many values, the values can be arranged over multiple lines to maintain readability. Still with the indentation with two spaces as shown below.
selector {
  property: 
    value;
    value;
}

CSS Specificity

  • CSS Specificity determines which style declaration is applied to an element. The following examples show the highest specificity.

  • Example: Specified the color red for

    elements. The text will be red.

<html>
<head>
  <style>
    p {color: red;}
  </style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
  • Example: Specified the color green for the class selector. The text will be green because the class selector has higher specificity than HTML tags.
<html>
<head>
  <style>
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
  • Example: Specified the blue for the id selector. The text will be blue because the id selector has higher specificity than class selector.
<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
  • Example: Specified the color pink in an inline style tag for

    elements. The text will be pink because inline style tags has the highest specificity.

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>

1. Setup

2. Standards

3. Models and Diagrams

4. Testing

5. Documentation

6. Guides and How-to's

7. Micro Service Mockup Api

8. Server and deployment