NO PLUGIN and CONFIG required!
Why don't we believe in a strict code order?
While code linting is great, the order of the code is something that should be left to the developer.
We do follow a specific order of our styles, but never strict for the following reasons.
- New css properties that are not in the order of the style config, causing high maintenace.
- Cases where the code order makes no sense, yes they exist.
- CSS properties that work for multiple parent properties, for example,
gapwith Grid, Flex or Columns.
What CSS order to follow. #
We follow a DOM Like order, other options are the Alphabetical order or something else 🤷.
So the DOM order is;
- Var's/special setters
View a code sample of the order.
// var's/special setters
quotes: '"' '"' "'" "'";
grid-column: span 2;
flex-flow: row wrap;
border: 1px solid currentColor;
box-shadow: 0 0 0 #fff2;
fill: currentColor; // svg
stroke: currentColor; // svg
font-family: system-ui, sans-serif;
animation: 3s infinite;
transition: transform 0.2s linear;
Fylgja uses a set of groups, that specify the order of our code, the logic is to keep properties bundeled together.
For example the properties like, text-overflow, overflow-wrap and overflow are better together than split,
based on the role they have.
The same goes for the position properties top, right, bottom and left,
they should be bundeld together, not randomly somewhere in your class.
So DON'T do this 😫
Is there also an order for each group?
Yes the properties that have a direction should follow the DOM order.
That is: top, right, bottom, left or block, inline, also width comes before height.
Why is the variables/special setters group before the box group?
The properties in this group are specifically used to set values.
CSS variables should always come before all, similar to SCSS variables.
Other properties are used to set values used by the content property.
Should all browser specific styles come at the end?
That depends on the style.
Browsers prefixes should be avoided! Use autoprefixer instead.
But if they are needed, and they it only exist for 1 specific brower, then Yes but that property should come at the end.
Why is float part of the box group
Float moves the box, like position, while flex and grid move the children.
Why is list-style part of the layout group
Not really sure. Still working out the best position for it.
Momentarily Fylgja is using the default order used by Chrome and Firefox.
Another reason is that the
display property can have the value
Suggestions are welcome
Exceptions & Preprocessors #
There are some exceptions in the code order, Preprocessors are using some code order rules.
mixinsbefore but after
inline variablesbefore but after
For CSS this also applies to inline variables.