{"id":3058,"date":"2009-07-13T04:53:58","date_gmt":"2009-07-13T11:53:58","guid":{"rendered":"http:\/\/css-tricks.com\/?p=3058"},"modified":"2015-03-04T09:42:10","modified_gmt":"2015-03-04T16:42:10","slug":"different-ways-to-format-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/different-ways-to-format-css\/","title":{"rendered":"Different Ways To Format CSS"},"content":{"rendered":"

This post will focus on the different ways to format CSS, which differs from the different ways to organize<\/em> CSS<\/a>. Definitely related concepts, but I think organization has more to do with how things are grouped and ordered while formatting has to do with spacing and indenting.<\/p>\n

Formatting has nothing whatsoever to do with how the CSS functions. These are merely aesthetic choices by the coder. But that’s not to say formatting isn’t important. That would be like saying the choice of canvas isn’t important to a painter. It affects how it feels to write CSS, how easy it is to read, how easy it is to navigate, and how easy it is to revisit and reacquaint yourself with previously written CSS.<\/p>\n

<\/p>\n

The reason there are so many choices with CSS formatting is that there are no hard syntax rules when it comes to spacing and line-breaks. For example:<\/p>\n

div        {       width:      50px         }<\/code><\/pre>\n
is the same as:<\/p>\n
div{width:50px}<\/code><\/pre>\n
is the same as:<\/p>\n
div\r\n\r\n{\r\n\r\n      width: 50px\r\n\r\n}<\/code><\/pre>\n
Multi-line Format<\/h3>\n
.navigation_rss_icon {\r\n\tposition: absolute;\r\n\tleft: 940px;\r\n\tbottom: 0px;\r\n}\r\n#navigation_rss {\r\n\tposition: absolute;\r\n\tleft: 720px;\r\n\tfont-family: Verdana, Arial, Helvetica, sans-serif;\r\n\ttext-transform: uppercase;\r\n\tcolor: #897567;\r\n\tline-height: 2.5em;\r\n}\r\n#navigation_rss li {\r\n\tdisplay: inline;\r\n}\r\n#navigation_rss li a:link, #navigation_rss li a:visited {\r\n\tcolor: #fffffe;\r\n\ttext-decoration: none;\r\n\tpadding: 0px 2px;\r\n\tletter-spacing: -0.05em;\r\n}\r\n#navigation_rss li a:hover {\r\n\tcolor: #eed2a1;\r\n\ttext-decoration: none;\r\n}<\/code><\/pre>\n
I’d wager to say this is the most common. It is the easiest to read when it comes to short snippets, which is why written tutorials most often use this format. The example above doesn’t have a blank line between the closing brace and next selector, but that is fairly common as well.<\/p>\n
Multi-line Format with Indenting<\/h3>\n
.navigation_rss_icon {\r\n    position: absolute;\r\n    left: 940px;\r\n    bottom: 0px;\r\n}\r\n#navigation_rss {\r\n    position: absolute;\r\n    left: 720px;\r\n    font-family: Verdana, Arial, Helvetica, sans-serif;\r\n    text-transform: uppercase;\r\n    color: #897567;\r\n    line-height: 2.5em;\r\n}\r\n    #navigation_rss li {\r\n        display: inline;\r\n    }\r\n        #navigation_rss li a:link, #navigation_rss li a:visited {\r\n            color: #fffffe;\r\n            text-decoration: none;\r\n            padding: 0px 2px;\r\n            letter-spacing: -0.05em;\r\n        }\r\n        #navigation_rss li a:hover {\r\n            color: #eed2a1;\r\n            text-decoration: none;\r\n        }<\/code><\/pre>\n
A block that is indented indicates the selector is a more specific selector than the parent above it that and targets what will be child elements of that above selector.<\/p>\n
Single-line Format<\/h3>\n
div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }\r\nul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }\r\nul.nav li { display:inline; margin:0 10px 0 0 }\r\ndiv.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }\r\ndiv.post_wrapper { background:url(http:\/\/cdn.images.elliotjaystocks.com\/presentation\/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }\r\ndiv.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }\r\ndiv.wrapper a:hover img { background:#fff }<\/code><\/pre>\n
This is probably the most space and size efficient, short of being completely compressed to remove all spaces and line breaks. This technique would require the least vertical and horizontal scrolling as you write and edit CSS, but at the potential cost of looking messy and somewhat difficult to browse and find things you are looking for. <\/p>\n
Single-line Format with Tabbing<\/h3>\n
h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }\r\nh2 a, h2 a:visited                    { color: #2e2e2e; }\r\nh2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }\r\np, li, dd                             { font: 13px\/18px \"Lucida Grande\", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }\r\ntd, th                                { font: 13px\/18px \"Lucida Grande\", Arial, Helvetica, Sans-Serif; text-align: left; }<\/code><\/pre>\n
Single-line Format with Indenting<\/h3>\n
#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }\r\n    #content-area ol ol             { list-style: lower-alpha; }\r\n#content-area ul                    { margin: 0 0 0 5px; list-style: none; }\r\n    #content-area ul li             { padding: 0 0 0 20px; background: url(\/images\/bullet.png) 0 3px no-repeat; }\r\n    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }\r\n         #content-area ul ul li     { background: none; padding: 0; }<\/code><\/pre>\n
A selector that in indented indicates that the selector targets something that is a child of the selector above it. <\/p>\n
Mostly Single-line Format<\/h3>\n
I prefer the single-line format, but I use Soft-Wrap in my text editor, so that long lines don’t go on forever, they wrap at the window edge. So for really long lines with lots of selectors, I put a hard-return and tab over the new line of attributes.<\/p>\n
h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }\r\nh1                                    { font-size: 36px; }\r\nh2                                    { font-size: 30px; }\r\nh2 a, h2 a:visited                    { color: #2e2e2e; }\r\nh2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }\r\np, li, dd                             { font: 13px\/18px \"Lucida Grande\", Arial, Helvetica, Sans-Serif;\r\n                                        margin: 0 0 15px 0; color: #5e5d5d; }\r\ntd, th                                { font: 13px\/18px \"Lucida Grande\", Arial, Helvetica, Sans-Serif;\r\n                                        text-align: left; }<\/code><\/pre>\n
Variations<\/h3>\n
The single line format could be taken further by moving the opening brace onto it’s own line, which is something I see in PHP quite a bit:<\/p>\n
div\r\n{\r\n    padding: 10px;\r\n}<\/code><\/pre>\n
In the multi-lined format with tabbing, I have seen the opening brace used as kind of separator wall:<\/p>\n
#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }\r\n    #content-area ol ol          {       list-style: lower-alpha; }\r\n#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }\r\n    #content-area ul li          {       padding: 0 0 0 20px; background: url(\/images\/bullet.png) 0 3px no-repeat; }\r\n    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }\r\n         #content-area ul ul li  {       background: none; padding: 0; }<\/code><\/pre>\n
Combo<\/h3>\n
A combination of single-line and multi-line would be only grouping related attributes onto a single line:<\/p>\n
.navigation_rss_icon {\r\n    position: absolute;\r\n    top: 10px; left: 10px; bottom: 10px; right: 10px;\r\n    font-size: 12px; font-weight: bold;\r\n}<\/code><\/pre>\n
Readability vs. Scrolling<\/h3>\n
Your choice of formatting boils down to readability. You need to be able to navigate your CSS quickly and find what you are looking for and make changes quickly. If you find the single-line format difficult because it is hard for your eyes to find the attribute you are looking for, then you should probably avoid it. <\/p>\n
Personally I find the multi-line format easy to read, but it increases the length (like actual number of lines) by 5-8x. This actually makes the whole document less readable for me, because of all the vertical scrolling. If you have a somewhat narrow monitor, the single line format might cause a good bit of horizontal scrolling which is sometimes even worse. <\/p>\n
The perfect format for you is one that maximizes readability while minimizing scrolling. Plus, in a more abstract sense, it just needs to feel right.<\/p>\n","protected":false},"excerpt":{"rendered":"
This post will focus on the different ways to format CSS, which differs from the different ways to organize CSS. Definitely related concepts, but I think organization has more to do with how things are grouped and ordered while formatting has to do with spacing and indenting. Formatting has nothing whatsoever to do with how […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":148296,"url":"https:\/\/css-tricks.com\/force-marginpadding-element-next-floated-element\/","url_meta":{"origin":3058,"position":0},"title":"Force Margin\/Padding On Element Next To Floated Element","date":"August 27, 2013","format":false,"excerpt":"Jeff Starr explains a classic CSS layout issue and suggests a fix. It's the overflow that does it by triggering what I believe is called a new block formatting context.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311225,"url":"https:\/\/css-tricks.com\/how-to-convert-a-date-string-into-a-human-readable-format\/","url_meta":{"origin":3058,"position":1},"title":"How to Convert a Date String into a Human-Readable Format","date":"May 25, 2020","format":false,"excerpt":"I'll be the first to admit that I'm writing this article, in part, because it's something I look up often and want to be able to find it next time. Formatting a date string that you get from an API in JavaScript can take many shapes \u2014 anything from loading\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/date-formats.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312039,"url":"https:\/\/css-tricks.com\/on-fixed-elements-and-backgrounds\/","url_meta":{"origin":3058,"position":2},"title":"On fixed elements and backgrounds","date":"June 3, 2020","format":false,"excerpt":"After just playing with apsect-ratio and being pleasantly surprised at how intuitive it is, here's an example of CSS acting unintuitively: If you have a fixed element on your page, which means it doesn\u2019t move when you scroll, you might realise that it no longer acts fixed if you apply\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/chen-hui-jing-elements-bgs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300134,"url":"https:\/\/css-tricks.com\/now-you-see-it\/","url_meta":{"origin":3058,"position":3},"title":"Now You See It","date":"December 16, 2019","format":false,"excerpt":"I recently accepted a teaching position at a local college here in SoCal where I'll be spouting off whatever I know (or more likely don't know!) about HTML and CSS. It's suffice to say I was all ears (well, actually eyes) when Rachel Andrew recently published a post on teaching\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/display-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303786,"url":"https:\/\/css-tricks.com\/seen-by-indeed\/","url_meta":{"origin":3058,"position":4},"title":"Seen by Indeed","date":"February 20, 2020","format":false,"excerpt":"Are you looking for a tech job where you clock in, or for a career where you\u2019ll be\u00a0seen? Seen by Indeed is a matching service for software engineers, product managers and other tech pros that sorts through thousands of companies -- like Twilio, Overstock, VRBO, and PayPal -- and matches\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/seen-by-indeed.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":357692,"url":"https:\/\/css-tricks.com\/show-dont-tell\/","url_meta":{"origin":3058,"position":5},"title":"Show, Don’t Tell","date":"December 23, 2021","format":false,"excerpt":"How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about just the words, or how your readers will engage with those words? With these few tips in mind, you can make\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/IKEA.png?fit=1200%2C820&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3058"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3058"}],"version-history":[{"count":17,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3058\/revisions"}],"predecessor-version":[{"id":197304,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3058\/revisions\/197304"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=3058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}