Shorthand CSS Rule Toggler ?

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 16th, 2008, 7:40 pm

Consider these two forms of the same CSS rule.

CSS Code: [ Select ]
#container
{
   margin: 1px 1px;
}
  1. #container
  2. {
  3.    margin: 1px 1px;
  4. }


CSS Code: [ Select ]
#container
{
   margin-top: 1px;
   margin-right: 1px;
   margin-bottom: 1px;
   margin-left: 1px;
}
  1. #container
  2. {
  3.    margin-top: 1px;
  4.    margin-right: 1px;
  5.    margin-bottom: 1px;
  6.    margin-left: 1px;
  7. }

 
Now arguably the first one could be written as
 
CSS Code: [ Select ]
#container
{
   margin: 1px;
}
  1. #container
  2. {
  3.    margin: 1px;
  4. }


but I'm trying to get two points across here.

The first point is that I always forget which element is first in the shorthand formats, as I did while creating this thread hence the bad examples. :)

The second point is that while it's shorter filesize-wise to use the shorthand formats, using the margin-* format is easier to read.

So I'm wondering if anyone knows of some sort of commandline application or script I could use to automaticly toggle between the short and long formats of CSS rules in a stylesheet.
Ideally I would be able to wire it into Gedits' External Tools, which is basicly a macro manager if you don't know.
Strong with this one, the sudo is.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 16th, 2008, 7:40 pm

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post August 17th, 2008, 4:01 am

I have no tool suggestion for you. :( Just wanted to comment.

I prefer CSS as shorthanded as possible. I just find it to be easier on my eyes and brain for some reason. Plus, I like it, optimally, all in one line.

I'd rather read...

Code: [ Select ]
.class{color:#333;font-size:8pt;margin:5px 3px 0 12px;padding:6px 321px 18px 4px;text-decoration:none;text-transform:uppercase;
}
  1. .class{color:#333;font-size:8pt;margin:5px 3px 0 12px;padding:6px 321px 18px 4px;text-decoration:none;text-transform:uppercase;
  2. }


...than...

Code: [ Select ]
.class {
   color: #333333;
   font-size: 8pt;
   margin-top: 5px  
   margin-bottom: 3px
   margin-right: 0
   margin-left: 12px;
   padding-top: 6px
   padding-bottom: 321px
   padding-right: 18px
   padding-left: 4px;
   text-decoration: none;
   text-transform: uppercase;
}
  1. .class {
  2.    color: #333333;
  3.    font-size: 8pt;
  4.    margin-top: 5px  
  5.    margin-bottom: 3px
  6.    margin-right: 0
  7.    margin-left: 12px;
  8.    padding-top: 6px
  9.    padding-bottom: 321px
  10.    padding-right: 18px
  11.    padding-left: 4px;
  12.    text-decoration: none;
  13.    text-transform: uppercase;
  14. }


I don't have any trouble remembering the side of the box. Just like a clock. :)
- dM
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 17th, 2008, 4:14 am

But does it start on the left, or the top ?
Is the first one top and bottom, or left and right ?

Maybe I should change my question to looking for a good way to remember which comes first in each situation. :D

Wow I can't say I've ever known anyone to prefer a single line rule.
It drives me nuts trying to find what I'm looking for unless they're like you've got in the bottom piece there.
Strong with this one, the sudo is.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post August 17th, 2008, 4:33 am

Well, it's just like a clock, it starts at the top and goes...um...clockwise. :)

I know that some people (most) don't like it in a single line. For me it's more tabular. I can quickly scroll down, find a selector than taxi over to a value.

The other way, for me, it just feels like covering a lot of ground and picking up too little info on the way.
- dM
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 17th, 2008, 5:37 am

CTRL+F to get to the selector I'm looking for, when it's not a stylesheet I have positions memorized in. :D

The clock analogy makes sense, but what about the two measure shorthand ? :scratchhead:
Strong with this one, the sudo is.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post August 17th, 2008, 6:50 am

Isn't it top-sides?
- dM
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post August 17th, 2008, 7:04 am

That's what my latest stylesheet says. :D

I think I'll be able to remember the clock from now on. I'll have to repeat it to myself & have it be the first thing I say when I talk to someone for an hour or so like I used to do with Nintendo game passwords when I was a kid. lol
Strong with this one, the sudo is.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 159 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.