{"id":19014,"date":"2014-01-09T13:01:11","date_gmt":"2014-01-09T05:01:11","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19014"},"modified":"2022-08-02T18:04:52","modified_gmt":"2022-08-02T10:04:52","slug":"css-sorting-with-csscomb","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/","title":{"rendered":"Sorting And Organizing CSS Using CSSComb"},"content":{"rendered":"<p>Compared to other web-related languages, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\" rel=\"noopener noreferrer\">CSS<\/a> is <strong>relatively straightforward and easy to write<\/strong>. But at the same time, it is also <strong>hard to organize<\/strong>, particularly when it comes to  codes that consist of thousands of lines.<\/p>\n<p>It would be great if we\u2019re able to organize CSS and make it easier for other developers to read and maintain the codes \u2013 which is useful if you are <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/online-collaboration-tips\/\" rel=\"noopener noreferrer\">working  in a team<\/a>.<\/p>\n<p>In this post, we are going to show you <strong>how to sort and organize CSS<\/strong> using a tool called <strong>CSSComb<\/strong>. But first, let\u2019s take a look at a short example on CSS property ordering.<\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-back-to-basics-terminology-explained\/\" rel=\"noopener noreferrer\">CSS Back To Basics: \u2013 Terminology Explained<\/a><\/p>\n<p>Technically, CSS has no restrictions when it comes to ordering properties. The following example\u2026<\/p>\n<pre>\r\n\t.class {\r\n\t\tbackground-color: #f3f3f3;\r\n\t\twidth: 100px;\r\n\t\theight: 100px;\r\n\t\tfont-color: #000;\r\n\t}\r\n<\/pre>\n<p>\u2026 will output the same result as the following:<\/p>\n<pre>\r\n\t.class {\r\n\t\twidth: 100px;\r\n\t\tfont-color: #000;\r\n\t\tbackground-color: #f3f3f3;\r\n\t\theight: 100px;\r\n\t}\r\n<\/pre>\n<p>But as we\u2019ve mentioned previously, being organized will help your teammates easily maintain your codes. Sorting CSS codes, however, requires a lot of cutting & pasting, and thoughts on how to order it. And that\u2019s where CSSComb comes in handy.<\/p>\n<h2>How to Use CSSComb<\/h2>\n<p><a target=\"_blank\" href=\"https:\/\/packagecontrol.io\/packages\/CSScomb\" rel=\"noopener noreferrer\">CSSComb<\/a> is a <strong>sorting utility for CSS<\/strong> that is built by <strong>Slava Oliyanchuk<\/strong>. CSSComb <strong>supports CSS2 to  CSS4<\/strong>, and  is available in many popular code editors such as TextMate, Coda, Notepad++ and Sublime Text, as a plugin or an extension.<\/p>\n<p>If you are using Sublime Text, CSSComb can be installed easily via the Package Control. Once installed, you can sort the CSS properties in several ways:<\/p>\n<ul>\n<li>Hit the default key combination: <span class=\"key\">Shift<\/span> + <span class=\"key\">Ctrl<\/span> + <span class=\"key\">C<\/span>.<\/li>\n<li>Right-click and select: <strong>Sort via CSSComb<\/strong> option.<\/li>\n<li>Open Command Palette \u2013 <span class=\"key\">Command<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">P<\/span> and select <strong>Sort via CSSComb<\/strong>.<\/li>\n<\/ul>\n<p>In this example, we have the following style rule.<\/p>\n<pre>\r\n.class {\r\n\tpadding-top: 1px;\r\n    border-left: 1px solid #fff;\r\n    -moz-box-shadow:    0 0 1px 0 #000;\r\n    -webkit-box-shadow: 0 0 1px 0 #000;\r\n    box-shadow:         0 0 1px 0 #000;\r\n    border-right: 1px solid #fff;\r\n    height: 23px;\r\n    padding-bottom: 10px;\r\n    background-color: #fff;\r\n}\r\n<\/pre>\n<p>The  style rule above works, and there is nothing wrong with it, except that it\u2019s a bit unorganized. Now, after running CSSComb, the properties are sorted in the following order.<\/p>\n<pre>\r\n.site-header &gt; .container {\r\n\tpadding-top: 1px;\r\n\tpadding-bottom: 10px;\r\n\theight: 23px;\r\n\tborder-right: 1px solid #fff;\r\n\tborder-left: 1px solid #fff;\r\n\tbackground-color: #fff;\r\n\t-webkit-box-shadow: 0 0 1px 0 #000;\r\n\t-moz-box-shadow:    0 0 1px 0 #000;\r\n\tbox-shadow:         0 0 1px 0 #000;\r\n}\r\n<\/pre>\n<p>Above is the default ordering rule in CSSComb, but if you don\u2019t want to order it like that, you can customize the order, by going to the <strong>Preferences &gt; Package Setting &gt; CSSComb<\/strong> menu, and set ting a new order rule under <strong>Sort Order \u2013 User<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Compared to other web-related languages, CSS is relatively straightforward and easy to write. But at the same time, it is also hard to organize, particularly when it comes to codes that consist of thousands of lines. It would be great if we\u2019re able to organize CSS and make it easier for other developers to read&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[507,2902,864,3414],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Sorting And Organizing CSS Using CSSComb - Hongkiat<\/title>\n<meta name=\"description\" content=\"Compared to other web-related languages, CSS is relatively straightforward and easy to write. But at the same time, it is also hard to organize,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sorting And Organizing CSS Using CSSComb\" \/>\n<meta property=\"og:description\" content=\"Compared to other web-related languages, CSS is relatively straightforward and easy to write. But at the same time, it is also hard to organize,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-09T05:01:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-02T10:04:52+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Sorting And Organizing CSS Using CSSComb\",\"datePublished\":\"2014-01-09T05:01:11+00:00\",\"dateModified\":\"2022-08-02T10:04:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/\"},\"wordCount\":369,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Tools\",\"organize\",\"toolkit\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/\",\"name\":\"Sorting And Organizing CSS Using CSSComb - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2014-01-09T05:01:11+00:00\",\"dateModified\":\"2022-08-02T10:04:52+00:00\",\"description\":\"Compared to other web-related languages, CSS is relatively straightforward and easy to write. But at the same time, it is also hard to organize,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sorting-with-csscomb\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sorting And Organizing CSS Using CSSComb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sorting And Organizing CSS Using CSSComb - Hongkiat","description":"Compared to other web-related languages, CSS is relatively straightforward and easy to write. But at the same time, it is also hard to organize,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/","og_locale":"en_US","og_type":"article","og_title":"Sorting And Organizing CSS Using CSSComb","og_description":"Compared to other web-related languages, CSS is relatively straightforward and easy to write. But at the same time, it is also hard to organize,","og_url":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-01-09T05:01:11+00:00","article_modified_time":"2022-08-02T10:04:52+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Sorting And Organizing CSS Using CSSComb","datePublished":"2014-01-09T05:01:11+00:00","dateModified":"2022-08-02T10:04:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/"},"wordCount":369,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Tools","organize","toolkit"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/","url":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/","name":"Sorting And Organizing CSS Using CSSComb - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2014-01-09T05:01:11+00:00","dateModified":"2022-08-02T10:04:52+00:00","description":"Compared to other web-related languages, CSS is relatively straightforward and easy to write. But at the same time, it is also hard to organize,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-sorting-with-csscomb\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Sorting And Organizing CSS Using CSSComb"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4WG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19014"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19014\/revisions"}],"predecessor-version":[{"id":61038,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19014\/revisions\/61038"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19014"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}