Copying over from Manual talk:Coding conventions/CSS/Archive 1#CSS/Less property order proposal as it's still an unresolved topic:
It would be useful to have a coding convention for the order of the declarations in a declaration block. A consisted order improves the gzip compression and makes it easier to find or insert declarations.
The intuitive order is the alphabetical order. A alphabetical order has the disadvantage that it may disrupt declarations that belongs together, especially when there are blocks of comments.
An other possibility would be the order in the CSS specification. But CSS 2 is the last complete specification.
Is it desired to have an order for declarations? --Fomafix (talk) 11:46, 21 December 2015 (UTC)
- https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/ -— Isarra ༆ 20:22, 5 January 2016 (UTC)
- I'm in favor of adding a CSS guideline for property order, especially when looking at the growing number of possible CSS properties. Here's one example where missing property order has caused unnecessary property duplication (
background-size
: https://phabricator.wikimedia.org/diffusion/MW/browse/wmf%252F1.27.0-wmf.9/resources/src/mediawiki.ui/components/checkbox.less;2cb36350c88ca6cd214ccdf996bdcba33eac94f9$90 - This is an outcome we definitely don't want to see.
- I'm in favor of adding a CSS guideline for property order, especially when looking at the growing number of possible CSS properties. Here's one example where missing property order has caused unnecessary property duplication (
- The outcomes of the poll results at css-tricks above (45% in favor of grouped by type) are interesting and also the summaries by the author:
I think this is a bigger deal in teams. There has to be a standard otherwise the CSS project-wide looks sloppy. I know that inconsistent styles would wear on my conscience and I'd spend time fixing trivial formatting stuff rather than doing actual work.
Cognitive load factors into this. If you can always count on certain properties being in the same place, you can understand the CSS a bit faster (less scanning). Again, a bigger deal when on a team and you are looking at code you are slightly less familiar with because you didn't write it.
- I couldn't agree more with those thoughts (emphasizing done by myself).
- Therefore I'd like to come up with a new proposal for a guideline on CSS property order:
CSS/LESS property order proposal
.mw-selector {
/* ::: Generated Content ::: */
content: '';
/* ::: Background/List Style, Color, Filter & Opacity ::: */
background-image: url( selector.svg ); //or:
.oo-ui-background-image-svg( /icons/circle-constructive' );
background-origin: border-box;
background-position: center center;
background-repeat: no-repeat;
background-size: 0 0;
color: @color-error;
list-style: square;
filter: blur( 1px );
opacity: 0.2;
/* ::: Display (& Flex Box properties) ::: */
display: block;
clip: rect( 0, 0, 0, 0 );
visibility: visible;
/* ::: Positioning ::: */
// Float Model
float: none;
clear: both;
// Positioning Model
position: absolute;
top: @offset-component;
left: @offset-component;
bottom: 0;
right: 0;
// Stacking Context
z-index: 1;
/* ::: Box Model (from outside to inside) ::: */
box-sizing: border-box;
min-width: auto;
width: @size-selector;
max-width: 100%;
height: @size-selector;
margin: 4em 2em;
border: @border-error;
border-radius: @border-radius-base;
padding: 0;
box-shadow: @box-shadow-menu;
outline: 0;
overflow: auto;
/* ::: Typography incl. Print properties ::: */
direction: ltr;
hyphens: none;
font-family: @font-family-flow-text;
font-size: 1em;
font-weight: bold;
line-height: 1;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
text-shadow: 0 0 1px #fff;
text-transform: uppercase;
vertical-align: baseline;
white-space: nowrap;
/* ::: Animations & Transitions ::: */
animation: orbit 3s infinite linear;
transition: opacity @transition-base;
/* ::: Others ::: */
cursor: default;
zoom: 1;
}
- Generated content comes first, as content gets priority,
- Backgrounds (in alphabetical order of sub properties), colors, list-styles as similar to background-images, filter and opacity properties are next, as they are together with box sizing the most used and most altered properties and therefore should be on top of the list
- Display is next, as it is also a often used property group
- Box Model in order of outside in, so outline > margin > padding > border and min- & max- values before the fixed property value.
- Typographic values in alphabetical sub order
- Animations and transitions are last, as they are extending the scope of the styles applied to the element
- Others are last,
--VEckl (WMF) (talk) 03:48, 10 January 2016 (UTC)