• Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
  • Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
  • #Deals
  • #News
  • #WiKi
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk

MyCodeTips mycodetips-newlogocopy1

  • Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
Programming

Organizing and Sorting CSS

Organizing and Sorting CSS

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.

Recommended Reading:TIPS FOR HOW TO WRITE BETTER CODE

Technically, CSS has no restrictions when it comes to ordering properties. The following example…

.class { 
background-color: #f3f3f3; 
width: 100px; 
height: 100px; 
font-color: #000; 
}

… will output the same result as the following:

.class { 
width: 100px; 
font-color: #000; 
background-color: #f3f3f3; 
height: 100px; 
}

But as we’ve 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’s where CSSComb comes in handy.
How To Use CSSComb
CSSComb is a sorting utility for CSS that is built by Slava Oliyanchuk. CSSComb supports CSS2 to CSS4, and is available in many popular code editors such as TextMate, Coda, Notepad++ and Sublime Text, as a plugin or an extension.

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:

Hit the default key combination: Shift + Ctrl + C.
Right-click and select: Sort via CSSComb option.
Open Command Palette – Command + Shift + P and select Sort via CSSComb.
In this example, we have the following style rule.

.class { 
padding-top: 1px; 
border-left: 1px solid #fff; 
-moz-box-shadow: 0 0 1px 0 #000; 
-webkit-box-shadow: 0 0 1px 0 #000; 
box-shadow: 0 0 1px 0 #000; 
border-right: 1px solid #fff; 
height: 23px; 
padding-bottom: 10px; 
background-color: #fff; 
}

The style rule above works, and there is nothing wrong with it, except that it’s a bit unorganized. Now, after running CSSComb, the properties are sorted in the following order.

 

.site-header > .container { 
padding-top: 1px; 
padding-bottom: 10px; 
height: 23px; 
border-right: 1px solid #fff; 
border-left: 1px solid #fff; 
background-color: #fff; 
-webkit-box-shadow: 0 0 1px 0 #000; 
-moz-box-shadow: 0 0 1px 0 #000; 
box-shadow: 0 0 1px 0 #000; 
}

Above is the default ordering rule in CSSComb, but if you don’t want to order it like that, you can customize the order, by going to the Preferences > Package Setting > CSSComb menu, and setting a new order rule under Sort Order – User.

  • Click to share on Reddit (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - 1058 Views
Tags | CSS
AUTHOR
Ranjan

I m Ranjan and Sharing my years of experience in Software Development. Love to code in Mobile apps (IOS, Android, Power Apps, Xamarin, Flutter), Machine Learning ( Beginner ), Dot Net, Databases ( SQL Server, MySql, SQLite), WordPress, Cloud Computing ( AWS, Azure, Google, MongoDB) and many more as required on project-specific. Besides this love to travel and cook.

You Might Also Like

mycodetips-newlogo2

Tips for beginner programming mistakes

November 19, 2013
mycodetips color

Tips To Convert Images to Grayscale

December 13, 2013
HTML Cheatsheets or References

HTML Cheatsheets or References

July 18, 2021
Next Post
Previous Post

Subscribe for updates

Join 5,733 other subscribers

whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

techlynk

Techlynk

techbyte

Do2Day

techbyte

Techbyte

Latest Posts

  • Frameworks of IOS
    Frameworks of IOS – Part ( I )
  • NSFileManager or NSPathUtilities
    NSFileManager or NSPathUtilities in Objective-C
  • Passing data between view controllers in Objective-C
    Passing data between view controllers in Objective-C
  • structures-classes-enum
    Structures and Classes in swift !
  • control-system-swift
    Control Flow in Swift
  • swift-concurrency-await
    Concurrency in Swift
  • time-complexity-dsa
    The Term Time Complexity in DSA
  • objective-c-datatypes1
    Objective-C Data Types
  • Convert-jpeg-word
    Convert JPG to Word – Tips You Should Try!
  • objective-c-control-statements2
    Objective-C control statements and loops !

Quick Links

  • #about
  • #myapps
  • #contact
  • #privacy

Other Websites

  • #myQuestions
  • #myBhojanalaya
  • #gadgetFacts
  • #ifscCodesDB

Tag Cloud

Android Android Studio API APP Programming Apps ARC asp.net blogging Browser Config CSS DATABASE DFD error Features GUI HTML HTML5 IDE IIS installation Interview Questions IOS iPhone javascript Mac objective-c OneDrive OS Programming quicktips SDK SEO Settings SMO SQL swift swiftUI Teams Tips & Tricks Tools UI Web Wordpress Xcode

©mycodetips.com