Skip to content

Instantly share code, notes, and snippets.

@klihelp

klihelp/Property Order.md

Forked from daneden/Property Order.md
Created December 1, 2015 12:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save klihelp/547a96698042e64a9363 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save klihelp/547a96698042e64a9363 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @daneden daneden created this gist May 13, 2015.
    35 changes: 35 additions & 0 deletions Property Order.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    Regarding property ordering, I have to disagree that alphabetical is the sensible route. My ordering might seem strange, but the properties are grouped and ordered by relation to one another. Given the following example:

    ```scss
    .element {
    box-sizing: content-box;
    color: blue;
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    padding: 30px;
    width: 100px;
    }
    ```

    You can imagine the author’s expectation would be for the `.element` to render with a width of 100px, but because `box-sizing: content-box` is present, the width is actually calculated as 100px **plus** the 30px padding, totaling 160px.

    This may be an extreme case, but it illustrates the problem. By grouping related properties (box model/layout, font properties, visual styles, etc.), it’s more obvious to authors what properties are affecting one another. The above example could be written like so:

    ```scss
    .element {
    box-sizing: content-box;
    display: block;
    padding: 30px;
    width: 100px;

    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 400;

    color: blue;
    }
    ```