Daniel Samuels
1 min readMar 29, 2017

--

It’s really not. If you set your linter up to enforce logical groupings (position, display, styling, etc), then your code becomes a lot more usable.

Compare the following two code blocks:

display: block;
width: 100px;
height: 40px;
padding: 7px 10px;

font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;

background-color: #fff;
border: 1px solid #666;
color: inherit;

and

background-color: #fff;
border: 1px solid #666;
color: inherit;
display: block;
font-size: 14px;
font-weight: 600;
height: 40px;
line-height: 1;
padding: 7px 10px;
text-transform: uppercase;
width: 100px;

One looks logical and the other looks a mess. Alphabetical within logical groupings makes sense — for example, you want height and width next to each other — everything being alphabetical just doesn’t.

Sorting by letter and sorting by line length are far from the only options available, it’s simply incorrect to state that they are.

--

--