Thread

I have a feeling that my CSS is more complex than necessary. The challenge is that I am a CSS luzer, so are there any tools or services that can/will help me minimize/optmize the CSS on my site?

Thanks

These might help…

http://www.cssoptimiser.com/
http://www.cleancss.com/

It’s well worth looking at how you write your css, learning css shorthand will help -  example:

.class {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}

can be written as

.class {
padding: 5px 10px 15px 20px;
}

Also looking at your template structure, minimising the amount of <div> containers, and reducing the number of classes you use.

I think things like css optimizer can be good for one thing. converting to shorthand, but I’d warn that it also depends on your site.

The part that is grossly missed in CSS and I’m a HUGE example of it, it bloated CSS files due to many different classes and id’s doing the exact same thing.

One of the ways I found around this is to use something that actually manages a css page. Microsoft Expression Web is a great example.

You can open your page, attach the stylesheet, and expression web will immediately show you all the classes and id’s that are not even used in the page.

next, if you add something as a design element to your page, and expression web finds what you’re doing is already defined somewhere it wont’ create a new class or id. it will tag that section with the definition that’s already existing. So it won’t stack your css.

the bad part is it will create a lot of classes and id’s for things you dont notice. so watch the code.

CSS from what I see can be efficiently done two ways. 1. use a tried and true framework. They are out there. I remember not so long ago I commented to someone here about how great a framework would be, and others declined to agree. Now everyone seems to find them usefull 😊

2. REALLY study your site, and build your CSS before hand. Don’t build elements on the fly, and add classes and id’s at random. Understand how your site is structured and style your pages with existing things you start. Essentially it’s still using the framework, but your own, not someone elses.

I’m really the poster child for bloated CSS. and after this last rebuild of my theme from scratch I can safely say it would have saved me a ton of work and been much more efficient to do this prior.

As a Movabletype developer I seee this a lot with their css and templates. Overdoing it and nailing everything down when it’s not needed. Maxdesign has an excellent tutorial which I quote in part below, as this is ver common. MT ended up with 1,100) lines in their css doing this.

maxDesign selectorial

Class selectors can also be overused. For example, you may need to style a range of elements within a div. All elements within the div could be styled using one class applied to the div. You should try to avoid unnecessary markup like this:

<div class="sidenav">
<h2 class="sideheading">Site navigation></h2>
<ul class="sidelist">
<li class="sideitem">List item</li>
<li class="sideitem"><a href="#"><span class="sidelink">List item</span></a></li>
<li class="sideitem">List item</li>
</ul>
</div>

Instead, you could style all the elements within the <div> using one class like this:

<div class="sidenav">
<h2>Site navigation</h2>
<p><ul><br />
<li>List item</li><br />
<li><a href="#">List item</a></li><br />
<li>List item</li><br />
</ul><br />
</div>

Then .sidenav h2 sidenav ul etc in css.

I also see a LOT of (and related):
padding-top:10px padding-right:5px padding-bottom:8px padding-left: 4px

Instead use: padding: 10px 5px 8px 4px
.
See also there: The document tree

Great topic… my boss asked me to lend a hand to slim down and manage his application’s css.
The total of CSS lines called on the homepage is 1545 lines in nine different sheets.
The first thing I googled up that worked wonders was cleancss.com’s optimizer trimming the 40k in the nine sheets total by nearly a third.
I’m sorely tempted to redo the entire layout, but I get the feeling that may not be the wisest solution.
This is a new job role for me for sure, “CSS Guru” imagine that a couple years ago I didn’t use any CSS in my design’s and was a true “Purveyor of Deprecation”... 😊
You can also use padding in a pattern:
padding: 0 16px;
This will create padding zero on both the top and bottom, and 16px on both the right and left.
If however the item you wish to add the padding too does not have enough declared width in it’s total, it will leave you wondering why pattern based css is not working.

A few pointers for writing efficient CSS:

1. often overlooked: start with clean, lean and mean HTML markup
2. don’t go overboard with classes and id’s
3. use the full scope of css selectors
4. I also usually include a hard reset of all browser defaults. (I prefer the Yahoo UI reset but there are others as well.
5. learn shorthand notation.

If you use Bare Bones’ BBEdit or TextWrangler for editing you can try this; one of John Gruber’s projects over at Daring Fireball.

JiF

A few pointers for writing efficient CSS:

1. often overlooked: start with clean, lean and mean HTML markup…....

I could not agree more; it’s my primary reason for not using tools like Freeway.

A whilst ago I came across this; of course I ignore the <?php include(’ stuff; EE’s {embed= tag is just as easy to use instead.

Good one e-man

JiF