# CSS #

01. Capitalization rules:

    1.  Generally, HTML element names should be lowercase.
        This is important for compatibility with XHTML.
        For scripts directly embedded into an HTML document, uppercase names *may* be used instead, but this makes the stylesheet harder to copy­‑paste.

    2.  At­‑rules should also be lowercase.

    3.  IDs and class names should match the source (naturally).

    4.  Pseudo­‑selectors, property names, and function names should be `Capitalized`.

    5.  `<color>` values should be `CamelCase`.

    6.  Units (`PX`, `EM`, etc) and pseudo-elements (`::BEFORE`, etc) should be `UPPERCASE`.

    7.  A property may be marked important like so: `Text-Indent: 0 ! IMPORTANT`.

02. Decimal numbers should not have a leading zero (eg, `.02EM` not `0.02EM`) and units should follow immediately after.

03. There should not be spaces within or between selectors (eg, `section>p` not `section > p`).
    Avoid quotes where unnecessary (`[role=note]` not `[role="note"]`).

04. `*` or `*|*` should always be used in selectors with no specified element.

05. Tabs are preferred over spaces for indentation.

06. A ruleset with only one declaration should be written as follows:

        p { Text-Indent: 2EM }

    A ruleset with multiple declarations should be written as follows:

        p {
            Margin: 0;
            Text-Indent: 0;
        }

    Inside of the `style` attribute, declarations should be written as `Margin: 0; Text-Indent: 0` (with no final semicolon).

07. Rulesets should be written on successive lines.
    When multiple selectors are being matched, each should be given its own line, like follows:

        li,
        p { Margin: 0 }
        ol,
        ul {
            Margin: 1EM Auto;
            Padding: 0 2EM;
        }

08. When a property takes multiple values separated by commas, each should be given its own line, like follows:

        b {
            Font-Weight: Bold;
            Text-Shadow:
                -1PX 1PX #FAE13E,
                1PX -1PX #B01C1C;
        }

09. Properties should be given in the following order, for consistency:

    1.  `Display`
    2.  Properties specifying the writing direction
    3.  Properties specifying the flex and grid axes
    4.  `Float`, `Clear`
    5.  `Position`
    6.  Properties specifying the positioning of the box within its container (`Align-Self`, etc)
    7.  Offset properties (`Top`, `Bottom`, `Left`, `Right`)
    8.  Margin properties
    9.  Border properties (style, then colour, then width; in the shorthand this order is reversed)
    10. Padding properties
    11. Outline properties
    12. `Width`, `Min-Width`, `Max-Width`, `Height`, `Min-Height`, `Max-Height`
    13. `Overflow`, `Clip`, `Visibility`
    14. `Vertical-Align`
    15. Properties specifying the positioning of contents within the box (`Align-Items`, etc)
    16. `Color`
    17. `Background` (color, then image)
    18. `Box-Shadow`
    19. `Opacity`
    20. Font properties
    21. `Line-Height`, `White-Space`
    22. Text properties
    23. `Hyphens`
    24. `Transform`
    25. CSS Transitions
    26. CSS Animations
    27. `Z-Index`
    28. `Content`

10. Inline comments should be written `/* Like this */`.
    Block comments should look like this:

        /*
        This is a block comment.
        It contains multiple sentences.
        */

    Block comments should be indented to match the surrounding markup.