17 replies [Last post]
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 11 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

So, I was just wondering...
I have an application that I've been developing for a while that the CSS file has over 3000 lines of code.

Besides just the basic "optimizers" that squish all the code into one gigantic unreadable line, has anyone seen a "smart" optimizer that if I have "padding-left: 10px" on 45 different elements, it would sort it out and set it once instead of repeating it?

If something like this doesn't exist, would anyone be interested in using such a product if it were to be developed?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tags:
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is one of the higher

This is one of the higher skills that sets the men from the boys. If you have that many rulesets and that complicated an application then it does become increasingly difficult to manage properties in rulesets and the possibility of unnecessary properties being duplicated. I have a similar sounding set of sheets that manages a backend web admin, that grew and changed as we built it, and it proved a nightmare trying to avoid this issue and I know that there are times when I had to add a style or two that I know if I had prior knowledge of could have been better stated.

And no I'm not interested in helper apps , as stated earlier this sets the men from the boys it told me that I had not allowed for the possible growth of similar but slightly different styling and that my reliance on the trusted approach of descendent styling can not always be appropriate or suited to certain requirements, it was a lesson learned and I continue to look for the problems and refine and improve it where possible.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 11 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Ya... understandably so... I

Ya... understandably so...
I did however, run across this
http://wiki.github.com/chriseppstein/compass

I know you purist frontend types might not like it, but being a developer, this seems phenomenal!
Will try it out one of these days and see how it goes...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's just that there simply

It's just that there simply can't be a hellper app that can do the job I require and that you allude to; CSS is not straightforward in this respect and can only be managed by the human mind on a per case basis, it's fluid and dynamic, conceptual and loose, we can't apply strict programming methodology to it's use, and this is why I tend to find programmers and backend scripters that struggle to work with it, always desperately trying to append some programming paradigm to it in order that it may make more sense to them and what they are used to, I figure this is part of the cause and rise of these horrible grid layouts - an attempt to avoid having to get too involved, a one size fits all solution

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Had a quick peek at that

Had a quick peek at that link, hmm; perfect example of trying to apply some sort of framework to frontend coding.

Perhaps it's really great but I won't be expending valuable time finding out, quite interested in seeing what exactly they think they are achieving though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 11 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Hugo wrote:I figure this is

Hugo wrote:

I figure this is part of the cause and rise of these horrible grid layouts

Dear God No!! I can't stand those things. I much prefer to write 3000 lines of code by hand!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I couldn't use one

I couldn't use one whatsoever. The link you posted is interesting though and probably worth spending time reading more thoroughly.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 11 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

The screencast is pretty

The screencast is pretty long and I haven't had a chance to watch but the first 10 minutes or so, but it appears to be pretty neat in it's way of creating selectors, simple math processing, and variable and "function" handling...

Might a tool that could save a lot of time or be a giant hindrance in future trouble shooting...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I've been wanting to give

I've been wanting to give http://wiki.github.com/anthonyshort/csscaffold a go for a while now but haven't found the time yet.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Is that simply out of

Is that simply out of curiosity Tyssen or do you think it would help you work better, faster etc?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Curiosity first but with a

Curiosity first but with a view to improved workflow.

But as with anything where you're learning a new way of doing something your already do, there's that period where your output will actually be slower/less while you're learning the new system before it gets back up to speed and then passes it and I haven't really had the time to give myself that luxury recently.

It's the same reason I still use my Vista PC for most of my work even though I've got an MacBook Pro (which doesn't get use for much except reading Twitter); I don't feel like I can afford to spend the time to get used to doing things in a different way.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 14 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:even though I've got

Quote:

even though I've got an MacBook Pro (which doesn't get use for much except reading Twitter); I don't feel like I can afford to spend the time to get used to doing things in a different way.

Oh well then I can be of some use here since I've already spent some time so pack it up and send it down here please Tyssen - I'm sure Twitter reads just as well on the PC! Tongue

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Tyssen wrote: I've been

Tyssen wrote:

I've been wanting to give http://wiki.github.com/anthonyshort/csscaffold a go for a while now but haven't found the time yet.

Finally got around to trying this today. Unfortunately it doesn't seem to play nicely with my XAMPP set up on Windows and each page refresh takes about 7 seconds. I tried it out quickly on my Macbook and it was fine. Puzzled

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Had a read through that link

Had a read through that link and it has peaked my curiosity and do want to give it a test run and see if there are issues running on a WAMP package.

It occurred to me that it was slightly the equivalent of a JavaScript library (jQuery) to javascript, my reasoning for liking jQuery as it extends javaScript , improves it albeit at some small overhead. Maybe the same argument could be used for this framework, although the nested rulesets just confused my tiny brain.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I've now moved on to

I've now moved on to http://xcss.antpaw.org/ which doesn't seem as flexible or powerful as Scaffold but doesn't have any performance issues on my Windows set-up. I'm probably only really going to take it slowly and use it for the ability to add constants and save having to remember or scroll around to find colour values or font stacks. Basically I see the main advantage to me at the moment in that it'll save typing, e.g. it'll be quicker to do this:

ul#navigation {
   li {
      ...;
      a {
        ...;
      }
   }
}

than

ul#navigation {
...;
}
   #navigation li {
      ...;
   }
      #navigation a {
        ...;
      }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Those nested rules actually

Those nested rules actually make a lot of sense and appear rather elegant, they suggest a structure and grouping. I like the idea of stating #nav and then saying all that relates to the styling of this element is neately contained within that parent.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The lack of a nesting syntax

The lack of a nesting syntax is a shortcoming of css; especially as the whole cascade thing implies nested selectors.

Can you imagine the effect of nested rule sets on the tyros' stylesheets? Laughing out loud Or mine, perhaps.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You should see the utter mess

You should see the utter mess I create when nesting functions Shock

In terms of Inheritance (or thinking about it , not, as Inheritance is not expressed) nesting would make some sense though but ought we not be having to write like this:

html {
  body {
   #header {
    #logo {
    }
    #nav {
    }
   }
  }  
}

But I kind of like that.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me