I have always done this. Ordering CSS properties in any rule I have written just gets done in alphabetical order. There was no real reason why I did this, but some kind of subconscious decision was made, and it’s now always how I have done it.
A few years back, a work colleague questioned why I ordered my CSS properties like this. When I actually thought about it, it just made logical sense to me. Everyone knows the alphabet, they learn it in school and it’s a common foothold for anyone, whether they be a CSS master, or just starting out to learn (I think it may actually help people pick CSS more easily myself).
But today I saw a conversation pop up on Twitter about ordering properties in your CSS (which began with this tweet).
From what I can gather, people order their CSS properties in the following ways:
- Alphabetically
- Chronologically (new properties added to the bottom of the list)
- According to the box model
I’m not usually one to start a conversation, but thought this would benefit from input from more developers than those in the conversation on Twitter.
So, what do you do? And what do you think is best?
N.B. I’m not trying to get every developer to come up with a set of standards, but to see how other people work and what the benefits are of the different approaches.
I do it chronologically but the inner neat freak in me would like it alphabetical. I never get round to doing that though. I should start using the app http://procssor.com/
I’ve seen that tool before, but never used it. I can see where that would be extremely useful when you have a team of devs working on the same thing, but they order their CSS properties differently.
Consistency is key!
I suppose for me, it takes longer to look through everything alphabetically?
The way I’ve always done it is to group by the type of property it is – so for example, all the type declarations are grouped together, all the box model properties (so width, padding, margins, etc etc) are grouped. Then, any special “newer” properties go at the very end (border radius, box-shadow, that sort of thing).
This makes it much easier for me to scan and follow but I can understand how a lot of developers find it easier to work with alphabetically ordered CSS. Personally, I find it very difficult as I find it difficult to associate the different declarations that are made with each other. *Usually* the way I group the declarations I make helps me make that distinction and see what clearly affects what.
Having said that though, I used to be really OCD about line lengths and wanted them all to follow depending on the width, so it would look like this:
.element {
blah: 1;
blah: 11;
blah: 111;
}
Snapped out of that thankfully
Never really considered ordering them alphabetically. I always stick to a particular order though, position/size/layout stuffs first, next margin/paddings, then things like border styles, shadows and so on, then text styles and on.
No particular reason why I started doing it that way but I can find my way around my own CSS pretty quick.
I don’t apply any order to the properties within a CSS block. I do order the blocks, I also indent them to mirror their usage in the HTML, like this:
.header {
— color: #fff;
— background: #000;
}
— .menu {
— — float: left;
— }
Ignore the dashes, they represent tabs.
I really didn’t know what I was starting with my tweet!
I was always a bit freeform with my CSS in the past. I didn’t have any hard rules, everything just flowed. Box model stuff was sort of grouped, same with fonts, etc etc. Stuff that needs tinkering with together were close to each other…
But, if I’m being honest, I’ve never been that bothered. Years of self taught bad habits does that to you.
Even working through other peoples code. It’s just been a case of gritting teeth and getting on with it – it’s never that hard to find a rule at the end of the day.
I’m more worried about how things are formatted, I *will* reformat whole files if isn’t indented how I like it.
Now I’ve got my head into thinking alphabetically it’s actually pretty natural and looking at my older code hurts my eyes. I realise that it does make things a little bit more straightforward. I can definitely see how it helps in teams.
At the end of the day though it’s never that hard to find a rule in a list. Even in this vendor prefix filled age a list is rarely long enough to make it hard to find where the margin rules are.
Especially if you indent properly.
Absolutely no gavick, if you appield !important tag in external CSS and try to make any changes its value using inline style it doesn’t work, because external style value will take its precedence.
Same as Di Turner : I don’t apply any order to the properties within a CSS block.
For blocks, I will try and have in logical groups, with generic element styles near the top. Line numbers from inspect element + find are my friends.
I tend to put them in logical order rather than alphabetically. Box properties like display, position, margins, paddings go first, then backgrounds, borders, shadows etc, then font stuff at the end of the selector.
That’s just the way I’ve always done it, I’m not overly strict thought, there may be some of mine that are in a random order (makes me sick to think about it!).
Here’s a couple of examples from my site’s CSS file:
.banner #banner_next {
display:block;
position:absolute;
top:120px;
right:20px;
width:69px;
height:84px;
background:url(img/banner-next.png) 0 0 no-repeat;
z-index:10;
}
.portfolio-item span.text {
display:block;
position:absolute;
bottom:0;
left:0;
width:100%;
background:rgba(126, 138, 145, 0.85);
color:white;
font-size:14px;
}
I order it by box model, then by typography with box shadows and backgrounds last.
We do it as a general convention at work for all us front-end devs which has made it easier for us to find our way around the style sheet when we know the order the styles are in.
I try to use this order most of the time :
1) display/position
2) background
3) width/height
4) font/colors/etc
5) margins/paddings
6) borders/border radius
7) misc
Consistently using this helps me easily find the property i am looking for.
For cambridge web design contact us.