SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Optimizer

  1. #1
    SitePoint Enthusiast cgCody's Avatar
    Join Date
    Jul 2012
    Location
    Arizona, US
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Optimizer

    Does anyone know of a tool that will not minify my CSS, but combine and optimize all my selectors? It would be nice
    to be able to keep CSS reset, color, font, and layout separated while coding, for ease of navigating the CSS while
    tweaking those various aspects. As a bonus, It would be nice if such a tool would convert any applicable styles into
    shorthand, as well. I've never tried this workflow, but I'd be willing to if such a tool exists.
    Ok, so this isn't the best example, but when you have a fairly hefty CSS file, having all your, say, font styles in one
    spot when tweaking the look of your fonts sure beats the heck out of scanning up and down your CSS, looking for
    that one class:
    Code:
    /* Fonts */
    .myElement01 {
       font-size: 1em;
       line-height: 1.4em;
       font-family: serif;
    }
    .myElement02 {
       font-size: 2em;
       line-height: 1.4em;
       font-family: sans-serif;
    }
    
    /* Color */
    .myElement01 {
       color: #000;
       background-color: #fff;
    }
    .myElement02 {
       color: #000;
       background-color: #fff;
    }
    
    /* Layout */
    .myElement01 {
       float: left;
       margin-left: 1em;
       margin-right: 2em;
       margin-top: 3em;
       margin-bottom: 4em;
    }
    .myElement02 {
       float: left;
       margin-left: 1em;
       margin-right: 1em;
       margin-top: 2em;
       margin-bottom: 2em;
    }

    Code:
    /* optimized */
    .myElement01 {
       font: 1em/1.4em serif;
       float: left;
       margin: 3em 2em 4em 1em;
    }
    .myElement02 {
       font: 2em/1.4em sans-serif;
       float: left;
       margin: 2em 1em;
    }
    .myElement01,
    .myElement02 {
       color: #000;
       background-color: #fff;
    }

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I don't know of one that will do that for you.

    It's just not a good way to write your css splitting everything out into those sections.
    I typically write my css properties in this order from most important to least important.
    Code css:
    .something {
      /* display */
      /* margin/padding */
      /* borders */
      /* fonts */
      /* css3 */
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    There are tools like SASS and LESS that can help with this (or at least help with organizing CSS), but I avoid them personally.

    I'm sure @markbrown4 has more to say about that.

    Edit:

    Or maybe not!

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I'm sure @markbrown4 has more to say about that.
    Sass won't allow you to write the css like that, it encourages best practices

  5. #5
    SitePoint Enthusiast cgCody's Avatar
    Join Date
    Jul 2012
    Location
    Arizona, US
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm sure you're right that it's not best practice. It's sort of counter-intuitive when you'd be juggling multiple instances of .some_class_name{} peppered throughout your CSS. But on the flip side, if you wanted to make some changes to all the colors, you could simply jump down to that section of your master.css file, make the changes, and recompile into your optimized.css. It's sort of taking the "separate content from layout" practice to the next level: content, content display, color, layout.

    Anyway, it was just an idea. If there was such a tool, I'd have to test it before really knowing if such a workflow would be beneficial.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •