CSS Optimizer

HTML & CSS
1

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:

[COLOR="#008000"]/* Fonts */[/COLOR]
.myElement01 {
   font-size: 1em;
   line-height: 1.4em;
   font-family: serif;
}
.myElement02 {
   font-size: 2em;
   line-height: 1.4em;
   font-family: sans-serif;
}

[COLOR="#008000"]/* Color */[/COLOR]
.myElement01 {
   color: #000;
   background-color: #fff;
}
.myElement02 {
   color: #000;
   background-color: #fff;
}

[COLOR="#008000"]/* Layout */[/COLOR]
.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;
}

[COLOR="#008000"]/* optimized */[/COLOR]
.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

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.


.something {
  /* display */
  /* margin/padding */
  /* borders */
  /* fonts */
  /* css3 */
}
3

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. :slight_smile:

Edit:

Or maybe not! :lol:

4

Sass won’t allow you to write the css like that, it encourages best practices :wink:

5

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. :slight_smile: