adding semantic space?

**tictike** · Feb 26, 2009, 19:51

From the snippet below, what would be the best/semantic/most elegant way to set up this html so I can apply margin-bottom to the first two ul elements? The easiest but worst thing I think I could do is add a non-semantic class to those uls. Would that be ok in this situation?

Code HTML4Strict:

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			p{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div>
			<p>title</p>
			<ul>
				<li>item</li>
				<li>item</li>
				<li>item</li>
			</ul>
			<p>title</p>
			<ul>
				<li>item</li>
				<li>item</li>
			</ul>
			<p>title</p>
			<ul>
				<li>item</li>
				<li>item</li>
			</ul>
		</div>

**AlexDawson** · Feb 26, 2009, 20:33

Since when is adding a class or ID non semantic, the whole point of classes and ID's is to signify that the element in question has style rules to be applied to it. It certainly does not take away the semantic meaning of the tag itself. Until CSS3 is implemented in all browsers and we can use class selectors, you are going to be stuck using classes and ID's for their specified purpose.

**AutisticCuckoo** · Feb 26, 2009, 23:59

Speaking of semantics, why are the titles marked up as paragraphs instead of headings?

Anyway, why not something like this?

Code HTML4Strict:

<h1>Document Heading</h1>
<h2>Title</h2>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Title</h2>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<h2>Title</h2>
<ul class="last">
  <li>item</li>
  <li>item</li>
</ul>

Code CSS:

* {margin:0; padding:0}
ul {margin-bottom:1em}
ul.last {margin-bottom:0}

**paul_wilkins** · Feb 27, 2009, 01:08

You could add a margin-top to each <p>, and then bring the first one back into place.

Code css:

div p {
    margin-top: 3em;
}
div+p {
    margin-top: 0em;
}

**AutisticCuckoo** · Feb 27, 2009, 01:19

The div+p selector won't match anything in that example, Paul.

You could use div>p:first-child, though.

**paul_wilkins** · Feb 27, 2009, 01:34

I could have sworn that div+p does the same job, as an adjacent selector

**AutisticCuckoo** · Feb 27, 2009, 01:51

But the P isn't an adjacent sibling to the DIV; it's a descendant (a child).

Code HTML4Strict:

<div>...</div>
<p>...</p>

Here the P is an adjacent sibling to the DIV, so div+p will match the P.

**paul_wilkins** · Feb 27, 2009, 01:54

Curses, your right. It's interesting that some test code worked in Google Chrome.
Still, back to the drawing board.

**tictike** · Feb 27, 2009, 20:26

Originally Posted by AlexDawson

Since when is adding a class or ID non semantic, the whole point of classes and ID's is to signify that the element in question has style rules to be applied to it. It certainly does not take away the semantic meaning of the tag itself. Until CSS3 is implemented in all browsers and we can use class selectors, you are going to be stuck using classes and ID's for their specified purpose.

My concern was that the name of the class would be unsemantic, such as class="bottomspace". I think Tommy solved that in post 3 with just applying class="last".

What is the difference between CSS 3 class selectors and using the following that we can do now?
.last{
....
}

**AlexDawson** · Feb 27, 2009, 21:41

Read from the specification, it’s pretty self explanatory...

http://www.w3.org/TR/css3-selectors/

Under the subheading of psuedo selectors.

**AutisticCuckoo** · Feb 27, 2009, 22:45

Originally Posted by tictike

What is the difference between CSS 3 class selectors and using the following that we can do now?

I think he meant the additional pseudo-class selectors in CSS3, like :last-child, :nth-child(), :nth-last-of-type() et al.

**AlexDawson** · Feb 28, 2009, 00:06

Yes Cuckoo, thats why I posted the W3C spec link on psuedo selectors

**AutisticCuckoo** · Mar 1, 2009, 09:34

No, Alex, you posted a link to the specification for the CSS3 selectors module, which includes all types of selector components, not only pseudo-classes.

**AlexDawson** · Mar 1, 2009, 13:59

OK, now you’re just being picky because I clearly said on post 10 directly under the link to the relevent W3C page of the specification, "Under the subheading of pseudo selectors." which is pretty self explanatory

**cooper.semantics** · Mar 3, 2009, 13:38

Code CSS:

h2~h2+ul~ul {margin: 0}

Being that this is only for a fixed example such as yours, you probably would not want to use something like this. I would just add class="last" as Tommy has shown.

**RyanReese** · Mar 3, 2009, 14:08

Considering ~ is a CSS3 selector just about every version of IE (and FF too I believe) has not implimented this. I'd just stick to last-child but IE7 doesn't support that!

I just stick to classes for now.

**cooper.semantics** · Mar 3, 2009, 14:24

just about every version of IE (and FF too I believe) has not implimented this

Incorrect, all versions of FF support this as well as Opera. IE7 is buggy.
http://reference.sitepoint.com/css/g...iblingselector

I'd just stick to last-child but IE7 doesn't support that!

I would stay clear away from last child even if ie7 supported this.
http://reference.sitepoint.com/css/p...lass-lastchild

**RyanReese** · Mar 3, 2009, 14:41

I was just doing a CSS quiz (don't remember which one) and I used ~ and I some browser didn't support it and I assumed ~ but maybe I was thinking about nth-child() or something like that. Hard to keep track of this stuff.

**Stomme poes** · Mar 5, 2009, 07:02

My concern was that the name of the class would be unsemantic, such as class="bottomspace". I think Tommy solved that in post 3 with just applying class="last".

While you should strive to have meaningful names, there are times where the existence of a class is simply to add some space, to make a colour, or to add hair to Bob. I've tried using the names describing what's IN the lists but this meant a different class name for each list on each page, creating a monster:

.contactlijst, .contactons, .makelaars, .requirements, .aanmaken, .waaromredenen, and on and on and on until there are hundreds of elmenets oh nooooooes {
blah;
}
so that was out. It was cleaner to say something like (in this situation) .spacing {
blah;
}

BUT!
if later someone wants no spacing but something else on those, you'll get a name that doesn't match what they do:
Boss:
instead of a space, how about a border there?

crap, now I've got a class called .spacing that makes a border (and this is the ONLY reason why names should be semantic, to tell YOU the developer why they're there... no single user agent will ever actually try to wrench meaning out of those class names! Not one!).

You could also try the ridiculous list1, list2 stuff... but then you'll need comments to tell you what those classes are doing (today).

I end up using mixtures of the above techniques. Sometimes I need a class on something to add a single style to it and there's no name that comes up.

That doesn't mean I can't use a class! It means I'll pick a bad name for it, style it, and then come back in a few years and wonder what the hell was I doing? But ok, the styling was still done.

You are only cutting your own throat with bad names, and possibly the throats of any other developers working with you or taking over later. Which is why if your code is never self-explanatory (as it normally should be with semantic class and id names), you have comments for teh confusled.

**paul_wilkins** · Mar 5, 2009, 07:09

The class and id names should identify the purpose of that element, instead of what it contains.

list1 is too generic and contactlist is too specific.

When you need to style a single element, instead of coming up with a class name, consider why you want to style it. If it's because of a placement issue, then commonly newspaper-based names can come to your rescue. Caption, index, subhead, deck, kicker, lead, shorts, masthead, column

http://visual.merriam-webster.com/co...ewspaper_1.php
http://visual.merriam-webster.com/co...ewspaper_2.php

**Stomme poes** · Mar 5, 2009, 07:58

Believe me, I wracked my brains trying to figure out the best course for each situation.

Often the reason it needed to be styled was,
Designer: "Can you make a little more space on this line, but not on that line? And center this row of selects but not that one? Cause I think it looks better."
Boss: "Can we make this little piece of text bigger? My mother had trouble reading that but not the other text."
Colleague: "Can we make that a flexible row of selects that wrap when the browser window is shrunk? So they all expand out in a row on my wide screen?"

And it becomes a downward spiral. I've added and deleted divs in forms called "rij" (row) because the stuff inside wasn't to conform any more to the regular form styles every other form (of the 30) on the site. And then he changes his mind again.

Sometimes you just have no good name for something. And maybe like a month later you think of a good name that works. Sometimes it's just like that.

**paul_wilkins** · Mar 5, 2009, 08:08

I agree with you that such inconsistent requests make the development much more difficult to perform. Sometimes it helps to have the person rationalize their reasons for wanting the change. For example, where the boss wants the text bigger because his mother had trouble reading it. Other people may have trouble reading other smaller text, so the whole lot should be pushed up instead. Not just that one piece.

**Stomme poes** · Mar 5, 2009, 08:26

Yeah, that one was an example out my butt, as actually my text is always too large so my boss' mom says she appreciates the whole site (I have a large monitor and end up making my fonts rather large lawlz). Pissing off the kids and the iMac-toting black-turtleneck designer crowd usually.

But what I meant was, the styles are sometimes rather random, something "looks better" over there but not here or whatever. Those are when I get stupid class names-- and I'm not disagreeing that they're bad. They're very bad : )

**paul_wilkins** · Mar 5, 2009, 08:28

Dare I suggest this, but for future events would it help to gain some advice from the people in the css forum? They live and breathe this stuff so are well placed to suggest acceptable compromises, or restructuring where required to achieve the desired end result with the least semantic issues.

**Stomme poes** · Mar 5, 2009, 08:49

You may dare : ) and I do, usually starting out thinking what someone said won't work or doesn't apply, but then about a month later it makes perfect sense.

It takes some time to filter through the weeds in my brain.

The SitePoint Forums have moved.

User Tag List

Thread: adding semantic space?

Thread Tools

Display

adding semantic space?

Bookmarks

Bookmarks

Posting Permissions