13 replies [Last post]
enave
Offline
Enthusiast
Last seen: 14 years 32 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Do you use
margin-top 10px;
marting-right 10px;

etc.

or do you use
margin 10px, 10px, 0, 0;

Is there any reason to prefer one or the other? This question applies to any tag that has shortcut notation. margins, padding, fonts, etc.

Also, do you have a particular order that you put the tags in? I find it makes things more readible if I put demension attributes first, then margin and padding, and then things like font styles. When I'm scanning a long list of styles, this seems to make it easier for me to spot places where I should have let an attribute be inherited, etc. I'm just interested in hearing what other people are doing along these lines.

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 15 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Do you use shortcut notation?

Where possible it makes sense to always use short hand notation in my opinion. This has the effect of reducing file sizes, increasing download speed and saving bandwidth which are all good things.

As to order I have no particular habit - I think it's what comes to mind first to be honest...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Do you use shortcut notation?

Not to mention its easier to read.

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

Do you use shortcut notation?

And support varies between browsers for certain properties, 'background' tends to be better supported than 'background-image' ,being one example.

Hugo.

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Do you use shortcut notation?

For a rundown, check my post http://www.csscreator.com/css-forum/ftopic6672.html, or google Shorthand CSS.

Verschwindende wrote:
  • CSS doesn't make pies

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

Do you use shortcut notation?

The most important thing is not whether shorthand is used or not, but whether there is an organization to your selectors and whether your formatting enhances human readability and understanding.

The machine will read anything as long as the syntax is correct. The machine will not do editing nor debugging. That's a human's job, and a human needs organization and white space to help the mark I, mod 0 eyeball to scan efficiently.

Using shorthand notation improves readability. Using \n and spaces do the same. Compare

 
blockquote {margin-top: 1em; margin-right: 20px; margin-bottom: 1em; margin-left:20px; border-width: 1px; border-style: solid; border-color: black;}

to
 
blockquote { 
    margin: 1em 20px; 
    border: 1px solid black; 
    }
Note that the indentions are spaces, not tabs. Always use spaces unless your editor converts tabs to spaces before saving.

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.

enave
Offline
Enthusiast
Last seen: 14 years 32 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Do you use shortcut notation?

kk5st wrote:
The most important thing is not whether shorthand is used or not, but whether there is an organization to your selectors and whether your formatting enhances human readability and understanding.

oh yes, I agree completely. that's what I was getting at when I said: "I find it makes things more readible..."

kk5st wrote:

Always use spaces unless your editor converts tabs to spaces before saving.

uh, why?

Spectralizer
Spectralizer's picture
Offline
Enthusiast
Toronto, ON. Canada
Last seen: 17 years 26 weeks ago
Toronto, ON. Canada
Timezone: GMT-5
Joined: 2005-03-30
Posts: 53
Points: 0

Do you use shortcut notation?

I'm wondering about the tabs/spaces issue myself.... In fact, I stay away from tools such as PHP IDE because it inserts spaces all over the place. Tab = one 7-bit character, 3-5 spaces, well you do the math... I've never encounted a problem with anything parsing tabs improperly and figure that it makes for leaner code to have one vs. several characters...

inquiring minds want to know...

This is my .sig... there are many like it, but this one is mine.
My .sig is my best friend... It is my life.
I must master it as I must master my life.
My .sig, without me, is useless... Without my .sig, I am useless.

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

Do you use shortcut notation?

It's simple really. Tabs are editor dependent while spaces are editor agnostic. In my own editor, Emacs, I've set html indentions (tabs) at two spaces, css I tab four spaces, and programming languages take a three space tab. In each case, I tab. Emacs converts the tabs to spaces before saving (a configuration issue). No matter what editor you open my source in, the 'tabs' will be 2, 3, or 4 spaces. If you open tabbed code in another editor, there is no telling what the tab value will be.

An awful lot of editors seem to tab eight spaces, an insane value. Ugh. Impossible to read the code. Set your tabs to a sane value and save as spaces. If your editor won't do that, you need a better editor, or start hitting the space bar Sad

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.

enave
Offline
Enthusiast
Last seen: 14 years 32 weeks ago
Joined: 2004-10-29
Posts: 86
Points: 0

Do you use shortcut notation?

kk5st wrote:
If you open tabbed code in another editor, there is no telling what the tab value will be.

But I guess the question is, who cares what the tabbed value is? As long as you're using tabs to indicated hierarchy (this block is subordinate to that block) then it doesn't matter how many spaces a tab equals.

On the other hand, if you're using tabs to line things up, then yes, I agree, viewing it in another editor will mess it up. For example, I've seen people do something like this:

i=4 and (x=7
or x=4)

That is sort of a contrived example, but what I'm getting at is that some people will try to tab over until x=4 is right below x=7. Their heart is in the right place (they're trying to make the code more readable) but they're going about it wrong. That's violating the metaphor and obviously that would look wrong in a different editor.

If you use tabs for exactly one purpose, to show relationships between blocks of code, then there's no problem with them at all.

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

Do you use shortcut notation?

Quote:
But I guess the question is, who cares what the tabbed value is? As long as you're using tabs to indicated hierarchy (this block is subordinate to that block) then it doesn't matter how many spaces a tab equals.
We're getting away from css a bit, but since it's the tyro's forum, the subject is certainly germane to learning good practices.

Let's consider a not uncommon example, first with an eight character tab (I've seen all too many examples of double tabbing each level—sixteen spaces, ouch);
 
<body> 
        <div id="wrapper"> 
                <ul> 
                        <li>top level menu item 
                                <ul> 
                                        <li>sub menu item</li> 
                                </ul></li> 
                </ul> 
        </div> 
</body>
Note that a five level nesting is easy to come by. That's forty spaces. For historical and readability reasons, the maximum width of any line should be eighty characters. A more usual value is in the sixty-eight to seventy-two range. As you can see, at even four levels of indention you're approaching the halfway mark of the line. The code above is uncomfortable to read, more so in an editor without proper word-wrap. Even with word-wrap, the last level allows only twenty-eight to thirty-two characters per line unless wrapped lines lose their indention level (and that's really ugly).

Now look at the same code with tabs set to two spaces;
 
<body> 
  <div id="wrapper"> 
    <ul> 
      <li>top level menu item 
        <ul> 
          <li>sub menu item</li> 
        </ul></li> 
    </ul> 
  </div> 
</body>
Notice how the readability is improved. Even at level five, you're only ten spaces in. If you want more separation, a three space tab would work well. Four spaces would, IMO, be overkill. N.B. I use four space indention in css because I want the selectors to stand out. There is no flow or nesting, it's just a visual thing—enough to stand out, and no more.

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.

Cyberman
Cyberman's picture
Offline
Regular
Last seen: 17 years 33 weeks ago
Joined: 2005-02-11
Posts: 37
Points: 0

Do you use shortcut notation?

briski wrote:
Where possible it makes sense to always use short hand notation in my opinion. This has the effect of reducing file sizes, increasing download speed and saving bandwidth which are all good things.

For bandwith, there is content compression.

When specifying all attributes, shorthand may make sense - otherwise I´d not use it, mostly because I´m not used enough to it to know which values apply where.

--

About tabs: what if the editor doesn´t recognize the tab character? It´s not white-space, is it?
Or what if it´s rendered as 1 space - doesn´t look too readable either.

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

Do you use shortcut notation?

Gary forgot his new found vulgarity and wrote:
Germane


:roll:

And who's Tyro when he's at home Smile Honestly you and your dictionary, 'newbie' would have sufficed Smile

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

Do you use shortcut notation?

Hugo wrote:
Gary forgot his new found vulgarity and wrote:
Germane
:roll:
Hmmph! I think you've used the word, and when it comes to vulgar, well, I am trying to talk down to your level. Tongue
Quote:
And who's Tyro when he's at home Smile Honestly you and your dictionary, 'newbie' would have sufficed Smile
C'mon, it's two fewer keystrokes. Wink

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.