Shorthand CSS Rule Toggler ?

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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. :)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Isn't it top-sides?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 92 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.