New Screencast: CSS Formatting
Just posted a new screencast on CSS Formatting. I don’t go into any techniques at all here, I just talk about the different ways you can organize and format your CSS.
Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements. Do you do it by section, like header, content, footer? Or do you do it by types of attributes like typography and layout? Being organized, hierarchical, and using CSS shorthand will go a long way in making you a better CSS coder.
I managed to keep it a bit shorter this time, but I also screwed up the size of it somehow. I shot it in 800×600 but when I saved the combined video it reduced itself to 590×442. I have all the originals except the first chunk because that’s what I combined into, so we’re just stuck with the smaller size. Anyway, I’ll make sure this doesn’t happen again.
Loading ...
1
Hay,
Another good reason for using “single” line styling, is that u save whitespace, while saving whitespace.. it makes your CSS file size less heavy, it might save a few K, but if u can save it, with out troubles… Theres no reason not to save it that way
Also another way of formatting is alphabetic.
Abbr
Body
Div
- background
- color:
- font:
- zindex.
This will also make it easyer to find your attributes etc
But nice screencast
~ V1
-
Comment by V1 — March 7, 2008 @ 12:24 pm
2
I have really wanted to use the indentation method as you do for your header section and so on. There are a couple of downsides that I have discovered when creating complex applications such as Ecommerce sites. There are a lot of different sections on these types of sites, and if you want to group selectors because you want to have semantic value to your id names these elements usually have different ids.
The problem is you have a lot of the same styles as another element but have just enough differences where you don’t want to make a class to use for both. You can’t really use the indentation way if you group a lot of selectors. An example from your site would be the list style set to none in your header and menu. It would be more optimized to group that stuff together. Granted this could easily be done outside of the indentation but lets say you have a few more thing rather then just the list reseting.
It kind of gets messy and doesn’t seem to follow the pattern really nice. I’m not sure if I am explaining this where you can understand what I mean but pretty much it just sucks when you have a lot of selectors that you are wanting to group together
Comment by Dan Shields — March 7, 2008 @ 12:29 pm
3
@Dan: I understand you and I think you make a good point. I always think there is a good solution to formatting, no matter how complicated your CSS gets.
Remember also, that if you start thinking your CSS is getting WAY too complicated, you are RIGHT. If you are at the point you are looking at thousands and thousands of selectors, things are WAY too complicated. There are definitely ways you can simplify your CSS, your markup, and your design in general to get that number way down, and all three of those things will benefit.
Comment by Chris Coyier — March 7, 2008 @ 3:44 pm
4
Thanks for this screencast !
There is also an interesting breaking methodology introduced by Andy Budd in his “CSS Mastery” book.
I’m using it, and it really provides a clear CSS document with a documented header, summaries, information about the developers (as you can found in any other language like php) … , you should read it, I translated it to french on my blog … but it would probably not help you
Comment by Yves — March 7, 2008 @ 4:40 pm
5
Good tutorial, especially the ‘child indent’ part was new for me, a good tip to keep a css-file easy to read. I also prefer the ‘multi-line’ method, because I think it’s easier to read fast. At last I like that you have such a strong own opinion, but also show other ways. That helps your readers to decide which way they’ll do it, but you give good arguments to do it your way. Sorry for the bad English, it’s monday morning, but thanks again for the good videos!
Comment by Edwin — March 17, 2008 @ 4:06 am
6
Great video, I too prefer the ‘multi-line’ method, Its a lot easier to interpret and locate styles.
Also a good shout by “V1″ regarding alphabetical ordering for div styles.
Comment by Dan Collins — July 10, 2008 @ 1:44 am