to inline or not to inline

J

Jon Slaughter

In the following code I use selectors to position containers and I'm
wondering because of the "depth" of the selection if its better to inline or
not?

I'll be generating the code automatically for several containers so I'm not
worried about inlining except that it will be much easier to change the
styles of the boxes automatically without having to regenerate the code.
Just curious as if theres any good reason not to use the selectors as I have
done it(or maybe there is another way to step through child elements)?

(BTW the code is just an example)

Thanks,
Jon


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

body *
{
margin:0px;
padding:0px;
}

..Box1
{
position:absolute;
left:400px;
top:200px;
background-color:#003366;
}

..Box1 > span:first-child
{
position:absolute;
left:0px;
top:0px;
width:10px;
height:10px;
background-color:#990000;
}

..Box1 > span:first-child + span
{
position:absolute;
right:0px;
top:0px;
width:10px;
height:10px;
background-color:#000099;
}

..Box1 > span:first-child + span + span
{
position:absolute;
left:10px;
right:10px;
top:0px;
height:10px;
background-color:#999933;
}

..Box1 > span:first-child + span + span + span
{
position:absolute;
left:0px; bottom:0px;
width:10px;
height:10px;
background-color:#990033;
}

..Box1 > span:first-child + span + span + span + span
{
position:absolute;
right:0px;
bottom:0px;
width:10px;
height:10px;
background-color:#990033;
}

..Box1 > span:first-child + span + span + span + span + span
{
position:absolute;
left:10px;
right:10px;
bottom:0px;
height:10px;
background-color:#006699;
}

..Box1 > span:first-child + span + span + span + span + span + span
{
position:absolute;
left:0px;
top:10px;
bottom:10px;
width:10px;
background-color:#333399;
}

..Box1 > span:first-child + span + span + span + span + span + span + span
{
position:absolute;
right:0px;
top:10px;
bottom:10px;
width:10px;
background-color:#CC9933;
}

</style>

</head>
<body>

<div class="Box1">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span></span>

<div style="padding:15px; margin:0px;
background-color:#00FFFF;">ASD123412SDF<br />
123412341234<br />
134134</div>
</div>



</body>
</html>
 
D

Desmond

In the following code I use selectors to position containers and I'm
wondering because of the "depth" of the selection if its better to inline or
not?

I'll be generating the code automatically for several containers so I'm not
worried about inlining except that it will be much easier to change the
styles of the boxes automatically without having to regenerate the code.
Just curious as if theres any good reason not to use the selectors as I have
done it(or maybe there is another way to step through child elements)?

(BTW the code is just an example)

Thanks,
Jon

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

body *
{
margin:0px;
padding:0px;

}

.Box1
{
position:absolute;
left:400px;
top:200px;
background-color:#003366;

}

.Box1 > span:first-child
{
position:absolute;
left:0px;
top:0px;
width:10px;
height:10px;
background-color:#990000;

}

.Box1 > span:first-child + span
{
position:absolute;
right:0px;
top:0px;
width:10px;
height:10px;
background-color:#000099;

}

.Box1 > span:first-child + span + span
{
position:absolute;
left:10px;
right:10px;
top:0px;
height:10px;
background-color:#999933;

}

.Box1 > span:first-child + span + span + span
{
position:absolute;
left:0px; bottom:0px;
width:10px;
height:10px;
background-color:#990033;

}

.Box1 > span:first-child + span + span + span + span
{
position:absolute;
right:0px;
bottom:0px;
width:10px;
height:10px;
background-color:#990033;

}

.Box1 > span:first-child + span + span + span + span + span
{
position:absolute;
left:10px;
right:10px;
bottom:0px;
height:10px;
background-color:#006699;

}

.Box1 > span:first-child + span + span + span + span + span + span
{
position:absolute;
left:0px;
top:10px;
bottom:10px;
width:10px;
background-color:#333399;

}

.Box1 > span:first-child + span + span + span + span + span + span + span
{
position:absolute;
right:0px;
top:10px;
bottom:10px;
width:10px;
background-color:#CC9933;

}

</style>

</head>
<body>

<div class="Box1">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span></span>

<div style="padding:15px; margin:0px;
background-color:#00FFFF;">ASD123412SDF<br />
123412341234<br />
134134</div>
</div>

</body>
</html>
Click to expand...

No this is not good it makes the page hard to maintain. you relay need
an external style sheet using
#Box1

and then a <div id=Box1>

you seem to be using box1 everywhere thay should all be diffrent
names. and give an idea of to where they are used.
you can have more than one style sheet if this becomes difficult.

Desmond.
 
S

Steve Pugh

In the following code I use selectors to position containers and I'm
wondering because of the "depth" of the selection if its better to inline or
not?
Click to expand...

To use style="" attributes? Maybe. Or just to apply a class to each
span.
I'll be generating the code automatically for several containers so I'm not
worried about inlining except that it will be much easier to change the
styles of the boxes automatically without having to regenerate the code.
Click to expand...

How many of these boxes will there be on each page? On the whole site?
The savings in bandwidth may add up considerably if there are a lot.
Just curious as if theres any good reason not to use the selectors as I have
done it(or maybe there is another way to step through child elements)?
Click to expand...

The code will be problematic in reality. IE6 and lower doesn't
support :first-child or > or +, so your styles really won't work for a
large portion of the WWW.

Apart from the colour of the top right corner this is identical, uses
a lot less code and works better in less sophisticated browsers.

..Box1 {
position:absolute;
left:400px;
top:200px;
background-color:#990000;
}

..Box1 div {
border-top: 10px solid #999933;
border-bottom: 10px solid #006699;
border-left: none; border-right: none;
margin: 0 10px;
}

..Box1 div div {
padding:5px;
margin: 0 -10px;
border-left: 10px solid #333399;
border-right: 10px solid #CC9933;
border-top: none; border-bottom: none;
background-color:#00FFFF;
}


<div class="Box1">
<div>
<div>
ASD123412SDF<br />
123412341234<br />
134134
</div>
</div>
</div>

Of course, as the parent box is fixed size it will still break badly
when the user chooses a font size larger than you anticipated. Avoid
absolute positioning where possible. It's a powerful tool but not
really suitable for most tasks, rather like a chainsaw. And avoid
fixed size containers 'cos they're just nasty.

Steve
 
A

Andy Dingley

<div class="Box1">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
Click to expand...

Try this insted

<div class="Box1">
<span class="foo" ></span><span class="bar" ></span><span
class="bat" ></span>
<span class="woof" ></span><span class="bark" ></span><span
class="donkey" ></span>

..Box1 span.foo { ... }
..Box1 span.bar { ... }
..Box1 span.bat { ... }
..Box1 span.woof { ... }
..Box1 span.bark { ... }
..Box1 span.donkey { ... }


Nice simple selectors, no dependence on ordering, all selectors are of
equal specificity in the cascade (and so are unlikely to surprise
you).

Keep the outer "Box1" as a class, not an id. You can use both, but use
the class name as the CSS selector, not the id. This avoids some
trouble with high-specificity CSS selectors cascading above others.
 
J

John Hosking

Jon said:
In the following code I use selectors to position containers and I'm
wondering because of the "depth" of the selection if its better to inline or
not?
Click to expand...
.Box1 > span:first-child + span + span + span + span + span + span + span
{
Click to expand...

I'm having trouble keeping track, but I think this is Reason #163 for
you to stop trying to do absolute positioning. Maybe you should start
keeping count for yourself.
 
J

Jon Slaughter

John Hosking said:
I'm having trouble keeping track, but I think this is Reason #163 for you
to stop trying to do absolute positioning. Maybe you should start keeping
count for yourself.
Click to expand...


You don't get it do you? First off just cause your having trouble doesn't
mean I am... second off, I already said that this code will be generated
automatically so there is no need to keep track.
 
J

Jon Slaughter

Steve Pugh said:
To use style="" attributes? Maybe. Or just to apply a class to each
span.
Click to expand...

Yes, I might have to do that but its kinda messy. Actually that is what I
usually do. I start inlining first and then move the stuff to a class. I
forgot about that when I posted though and now that I think about it, it
probably is the best solution.
How many of these boxes will there be on each page? On the whole site?
The savings in bandwidth may add up considerably if there are a lot.
Click to expand...

There could be many. With classes I suppose its also much faster because
there is no "searching" of the DOM. Ofcourse I'm not sure how slow it would
be in the first place. The classes add a bit to the file size because you
have to use class="..." for each span but probably not much.
The code will be problematic in reality. IE6 and lower doesn't
support :first-child or > or +, so your styles really won't work for a
large portion of the WWW.
Click to expand...

yeah but screw IE6 and below. Doesn't work probably anyways.
Apart from the colour of the top right corner this is identical, uses
a lot less code and works better in less sophisticated browsers.

.Box1 {
position:absolute;
left:400px;
top:200px;
background-color:#990000;
}

.Box1 div {
border-top: 10px solid #999933;
border-bottom: 10px solid #006699;
border-left: none; border-right: none;
margin: 0 10px;
}

.Box1 div div {
padding:5px;
margin: 0 -10px;
border-left: 10px solid #333399;
border-right: 10px solid #CC9933;
border-top: none; border-bottom: none;
background-color:#00FFFF;
}


<div class="Box1">
<div>
<div>
ASD123412SDF<br />
123412341234<br />
134134
</div>
</div>
</div>

Of course, as the parent box is fixed size it will still break badly
when the user chooses a font size larger than you anticipated. Avoid
absolute positioning where possible. It's a powerful tool but not
really suitable for most tasks, rather like a chainsaw. And avoid
fixed size containers 'cos they're just nasty.
Click to expand...

Nope, you don't get it(I think). Here I'm not going to end up using solid
colors but images so I can't use what you are using. (this is why I have to
go through the trouble with my original code)
 
J

Jon Slaughter

Andy Dingley said:
Try this insted

<div class="Box1">
<span class="foo" ></span><span class="bar" ></span><span
class="bat" ></span>
<span class="woof" ></span><span class="bark" ></span><span
class="donkey" ></span>

.Box1 span.foo { ... }
.Box1 span.bar { ... }
.Box1 span.bat { ... }
.Box1 span.woof { ... }
.Box1 span.bark { ... }
.Box1 span.donkey { ... }


Nice simple selectors, no dependence on ordering, all selectors are of
equal specificity in the cascade (and so are unlikely to surprise
you).

Keep the outer "Box1" as a class, not an id. You can use both, but use
the class name as the CSS selector, not the id. This avoids some
trouble with high-specificity CSS selectors cascading above others.
Click to expand...

Yeah, maybe better but not completely sure. In either case since the code
will be automatically generated it will be easy to change and I suppose I
can do some actual tests to see the real impact of using the selectors. (I
sorta like the selector method for some reason)

Thanks,
Jon
 
S

Steve Pugh

Jon said:
Yes, I might have to do that but its kinda messy. Actually that is what I
usually do. I start inlining first and then move the stuff to a class. I
forgot about that when I posted though and now that I think about it, it
probably is the best solution.
Click to expand...

Inline styles are useful for quick prototyping, you can keep the same
file in front of you in the editor at all times; but should rarely be
included in the final code.
There could be many. With classes I suppose its also much faster because
there is no "searching" of the DOM. Ofcourse I'm not sure how slow it would
be in the first place. The classes add a bit to the file size because you
have to use class="..." for each span but probably not much.
Click to expand...

Keep the classnames short, and if you're really worrried, use <b>
instead of <span>. The semantics are marginal, you save six characters
each time and as there's no text content you don't even need to
override the default styling.
yeah but screw IE6 and below. Doesn't work probably anyways.
Click to expand...

Well, if it's just decoration (and that's all CSS should be) then
that's okay. Those of us who do this for a living often need to
consider the large (but not as large as it was, boy has it dropped
fast since 7 came out) percentage of the audience who use IE6 and
expect a site to look reasonably good.
Apart from the colour of the top right corner this is identical, uses
a lot less code and works better in less sophisticated browsers. [snip]

Of course, as the parent box is fixed size it will still break badly
when the user chooses a font size larger than you anticipated. Avoid
absolute positioning where possible. It's a powerful tool but not
really suitable for most tasks, rather like a chainsaw. And avoid
fixed size containers 'cos they're just nasty.
Click to expand...

Nope, you don't get it(I think). Here I'm not going to end up using solid
colors but images so I can't use what you are using. (this is why I have to
go through the trouble with my original code)
Click to expand...

If the box is fixed size, then you can just use one background image.
If it has one fixed dimension and one fluid dimension then you need
two background images. If it's fluid in both dimensions then you need
four background images. One to four nested divs, vs one div plus nine
spans. I know which I'd use. And regardless of the specifics, my
general advice about chainsaws is still valid.

Steve
 
A

Andy Dingley

since the code will be automatically generated
Click to expand...

Don't automatically generate CSS.

You don't need to.

If you _think_ that you need to, chances are that you're abusing CSS. In
your case you appear to be planning to over-use absolute positioning.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Closing an overlay outside the overlay as well 1
Help with Visual Lightbox: Scripts 2
SendGrid email issue in responsive Gmail 1
Buttons lining up 1
I am trying to detect Which image id="" was clicked ? 22
Why is the e.target not working here? 1
How can I get my menu inside of a menu to function properly? 1
CSS: How can I stop overflow on the y-axis? 2

Members online

Total: 27 (members: 2, guests: 25)
Robots: 446

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,046
Latest member
Gavizuho

Latest Threads

Top