How to insert / edit / group css rules faster?


Tags: css,css3,css-selectors

Problem :

I find that a lot of my time while writing css is wasted on locating the right place to put new rules. For example, if I have this stylesheet:

.a, .b, #c {
  display:inline-block;
}

.d {
  color: #fff;
}

And I want to add .d {display:inline-block;), I'll often think for a sec about whether I should add this to the 1st or 2nd section. Meaning:

.a, .b, #c, .d {
  display:inline-block;
}

vs

.d {
  color: #fff;
  display:inline-block;
}

Obviously as CSS gets more complicated, there is more time wasted on this. Another time consumer is the process of locating existing rules in order to edit them, when the selector appears several time in the stylesheet.

Is there a specific workflow / tool that can make the CSS writing process faster and more efficient?


Please Note:

  1. A similar question already exists, but it was answered two years ago, so an up-to-date answer is required

  2. As a relatively new SO user I wasn't sure whether this belongs here or on Programmers. If this is off-topic on SO I'll be happy to migrate it.



Solution :

I ran into this problem a few years back and like you, I noticed that whenever I was working with large CSS files (say... 1000+ lines), that most of the time was spent looking up specific selectors, more so than editing or writing specific rules.

Because of that, I have a few conventions I follow that probably made working with CSS files 10x easier for me. The key is to realize that the bottleneck in your workflow is looking up selectors, so the key is to make this process easier.

  1. Write your CSS selectors in the order as they appear in your HTML mark up. More often than not, we start writing styles by looking at our mark up first (via inspect element, etc.) so when you write your selectors in the order of your markup, you have a rough idea for where to look for the rules in your CSS file.

    Thus, for your example code, the answer depends if you are sacrificing the organization for code reuse. Sure, you might be able to reuse code if you keep things in the same selector (i.e. .a, .b, .c, .d), but are you making the selector impossible for you to find when you revisit your CSS 6 months later? Use your judgement.

  2. Write styles on a single line. Unless there's some good reason you can't write this way (e.g. you're using a CSS preprocessor where you have to nest your rules, you work with an existing codebase maintained by 10 other developers, etc.), writing styles on a single line helps you find styles MUCH faster. For example, writing like:

    selector { property1: value, property2: value; property3: value; }
    selector2 { property1: value, property2: value; property3: value; }
    selector3 { property1: value, property2: value; property3: value; }
    

    Instead of:

    selector { 
      property1: value, 
      property2: value; 
      property3: value; 
    }
    
    selector2 { 
      property1: value,
      property2: value;
      property3: value;
    }
    
    selector3 { 
      property1: value,
      property2: value;
      property3: value;
    }
    

    Writing rules on a single line allows you to SCAN selectors. Plus, you can easily reduce a CSS file with 1000+ lines to 10 times fewer that amount, which makes it much more manageable. Again, remember that te bottleneck in our workflow is looking up selectors. So while writing the "traditional" way makes reading properties easier, it actually slows down the process for looking up selectors. What's more, if you write selectors in a single line, you can then use indentations like this:

    header { property1: value, property2: value; property3: value; }
      header h1 { property1: value, property2: value; property3: value; }
      header h3 { property1: value, property2: value; property3: value; }
      header h3 span { property1: value, property2: value; property3: value; }
    body { property1: value, property2: value; property3: value; }
    
  3. Find and replace is your bread and butter. If you organize your selectors using the two suggestions above, often finding selectors for major sections can lead you close enough to find the specific rules that you need. For example, if you're trying to find something ultra specific like #someDiv header ui li a:hover and you can just do a search for #someDiv and that would lead you close enough to find the rest.

Hope that helps :)


    CSS Howto..

    How do I make my lightbox not scroll?

    Displaying a title and description on a jquery slideshow

    How to make sure my css overlay is on top at any site?

    how to properly align list items vertically?

    how to make a space-keeping column use css and table tag

    How do I make my images in my div change opacity on hover?

    how do i hide anchor text without hiding the anchor

    How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

    How to add css for div tag and Panel in asp

    How does CORS (Access-Control-Allow-Origin header) increase security?

    How does free hosting website work? [closed]

    Primefaces: how to change the default icon on the button of the calendar field?

    (CSS) How to Shorten CSS code

    How to switch between css with jquery

    What's the proper way to name CSS selectors. It seems inconsistent how it works [duplicate]

    How to create tooltip with one element in CSS

    How to pin sidebar to the top of page but within its parent element using HTML/CSS only

    How to display the :after content outside element

    How to make a Xul button bigger using css as it get focus?

    How to override inline style dynamically?

    How to align image to top left of div

    How to prevent IE from loading hidden content using HTML/CSS only?

    How to Flip Div's in Randomly

    CSS - how to trim text output?

    How to get a picture randomly move and turn towards the changing direction around a page? (using jQuery & css)

    How to get just the responsive grid from Bootstrap 3?

    How to auto adjust parent DIV height according to the contents in child DIV?

    How to align image within nested div<> with spaces in div names

    How can I turn the page's font color to green when a button is clicked

    How to prevent CSS3 transform from make elements unclickable