css-reorder README

This is an extension for reordering your CSS based on the 9Elements rules

Features

Why order the declarations in a CSS rule at all? The goal is to understand the essence of the styles by reading few declarations. Most of the time, the essence is how the element is laid out and its size is determined. A proper ordering of rules allows to “scan” the declaration block for properties quickly.

General rules:

From most important to less important. So what is important? Rules that affect the layout and the box size. What happens inside of the box and does not affect the layout/size is less important. Group properties that belong together in terms of the CSS specification: Positioning, float/clear, font-, text- Order of CSS layouting as defined in the CSS specification:

position: absolute may override float: left/right. float: left/right may override display, with the exception of display: none. So the order is: position, float, display.

Text is laid out in line boxes, then words, then glyphs. So properties for font-size and line-height come first, then text-, then word-.

Order by box model, start at the outer edge and move inward Clockwise longhand order: _-top, _-right, _-bottom, _-left


Requirements

If you have any requirements or dependencies, add a section describing those and how to install and configure them.

Extension Settings

Known Issues

Actually the extension does not reorder mixins

Release Notes

1.0.0

Initial release