# Syntax and Formatting

The Ushahidi Platform uses the SCSS syntax because it is more consistent and familiar with vanilla CSS.

Indentation should be 4 space tabs. CSS rules should be written on multi-lines.

```
// Yes
.foo {
    display: block;
    overflow: hidden;
    padding: 0 1em;
}

// No
.foo {
  display: block; overflow: hidden;

  padding: 0 1em;
}
```

White space after each declaration and after each ending curly brace.

```
// Yes
p {
    font-size: em(16);

    @include media($small) {
        font-size: em(18);
    }

}

// No
p {
    font-size: em(16);
    @include media($small) {
        font-size: em(18);
    }
}
```

## Nesting

Nesting is one of the best features in Sass, but it can be overused and create unwanted CSS. A best practice is to nest no more than 3 levels deep and to only nest classes when that relationship is absolutely necessary to declare in order to achieve the desired style. Nesting for the sake of organizing the stylesheet is discouraged.

### Sass

```
.unordered-list {
    list-style-type: none;

    .unordered-list__item {
        display: inline;

        a {
            color: blue;

            span {
                text-decoration: underline;
            }

        }

    }

}
```

### Compiled CSS Output

```
.unordered-list {
    list-style-type: none;
}
.unordered-list .unordered-list__item {
    display: inline;
}
.unordered-list .unordered-list__item a {
    color: blue;
}
.unordered-list .unordered-list__item a span {
    text-decoration: underline;
}
```

## Color Formats

Hex is the default color format with RGBA being used when opacity is needed.

### Hex

Hex values should be written in all caps.

```
// Yes
.foo {
  color: #FF0000;
}

// No
.foo {
  color: red;
}
```

### RGB

When using RGB, single space after commas and no spaces after parentheses.

```
// Yes
.foo {
  color: rgba(0, 0, 0, 0.1);
}

// No
.foo {
  color: rgba( 0,0,0,0.1 );
}
```

## Numbers

Numbers should display leading zeros before a decimal value less than one and never display trailing zeros.

### Zeros:

```
// Yes
.foo {
  padding: 2em;
  opacity: 0.5;
}

// No
.foo {
  padding: 2.0em;
  opacity: .5;
}
```

### Units:

```
// Yes
$length: 2em;

// No
$length: 2;
```

### Calculations

```
// Yes
.foo {
  width: (100% / 3);
}

// No
.foo {
  width: 100% / 3;
}
```

## Strings

Single quotes should be used with strings.

### Font Stack Example:

```
// Yes
$font-stack: 'Helvetica Neue Light', 'Helvetica', 'Arial', sans-serif;

// No
$font-stack: "Helvetica Neue Light", "Helvetica", "Arial", sans-serif;

// No
$font-stack: Helvetica Neue Light, Helvetica, Arial, sans-serif;
```

### Image URL Example:

```
// Yes
.foo {
  background-image: url('/images/kittens.jpg');
}

// No
.foo {
  background-image: url(/images/kittens.jpg);
}
```

## Commenting

Commenting is CSS is an essential practice that can help explain why and how code is written. Ushahidi's CSS commenting is simple.

```
// Comments are preceeded by two backslashes
.foo {
    background: #000;
}
```

## Css Rulesets

* related selectors on the same line; unrelated selectors on new lines;
* the opening brace ({) spaced from the last selector by a single space;
* each declaration on its own new line;
* a space after the colon (:);
* a trailing semi-colon (;) at the end of all declarations;
* the closing brace (}) on its own new line;
* a new line after the closing brace (}).

```
// Yes
.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

// No
.foo,
.foo-bar, .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto }
```

## Letter Case Usage & Naming Conventions

When naming classes use lower case letters and a hypen between words.

```
// Yes
.button-primary

//No
.ButtonPrimary

//No
.button_primary
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ushahidi.com/platform-developer-documentation/dev-legacy-v3/front-end-development/changing-ui-styles-introduction-to-the-pattern-library/syntax-and-formatting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.