/* <navigation> */

…css goes here…

/* </navigation> */

Homesite treats the comments as tags and I can use ctrl+m to quickly jump to the bottom of a category to add new styles.

BTW: Does anyone know if there’s a comparable feature in BBEdit — a keyword shortcut to jump to a closing tag? It’s one of those handy shortcuts I’ve gotten really used to and miss when using BBEdit.

-Justin

- Jared Stenquist

Thanks

I don’t think this is true. The dashes should not prevent any (X)HTML docuement from validating. To ensure this, I created a quick example to test.

No errors.

This is something to consider even if you use external stylesheets, you might end up, for various reasons, embedding the external stylesheet, manually or through a script.

Not that I think validating is the key issue, but just so you know.

You can also do a similar thing with an undocumented feature in Topstyle, called bookmarks.

This reduces the number of lines dramaticly.And al your id’s and classes are nicely directly above/under each other…
Topstyle pro has a handy style sweeper which does it automaticly, if you want to do it with it existing css files.
And for the ordering i try to use the ordering of the html file ;-)

– Andy

I would love to help out, L.i.CSS, but I am not sure what you need. I have always started with the premise that markup comes first, and thus informs the style, while at the same time giving it boundaries. If you are looking to redesign your website from the ground up, you should probably start by determining what content on your site needs to stay, what parts will change, and then begin to lay out the new structure, using semantically correct and valid markup. This last bit is key. If you get stuck at this point, and you need a creative nudge, do what every other designer does upon seeing something they like:

View Page Source. ;)

Here are a couple of resources I would recommend:

Listamatic to sort out your navigation — I recall my own headslapping epiphany when I realized how easily I could do away with the tangle of divs spans and anchors I called a navbar.

Dave Shea’s CSS Crib Sheet is a good checklist of fundamentals.

Good luck, and remember: Validate, Validate, Validate! :)

I’m used to programming and html, but I can’t seem to get my head around the concepts required to design a site layout based on CSS so that it’s easy to change the look and feel by modifying the style sheet. Do people usually start with a complete style sheet and then tweak it? Does the stylesheet get designed before the HTML or do you build the stylesheet as you code the HTML and see what you need?

It would seem that to really allow the stylesheet to drive the look and feel, that the stylesheet would come first and be in a clearly understood structure, Then the HTML coded to use the appropriate ids/tags?

My site is pretty dated and I want to snaz it up and simplify the HTML :D

Lost in CSS – San Francisco

This seems like a good idea, from an organizational standpoint, but at least in my case, it works against me.
I have noticed over the years that I use a sort of vertical, peripheral look-ahead when skimming style sheets, and a selector like

html>body #content div.subcontent:first-child .entry-header h3 {

}

completely throws me for a loop.

I’ve adopted a node-tree approach to writing out my CSS.
Chances are, you’re looking at well-indented and easy to read HTML, why not mimic this structure in your CSS?

e.g.:

<div class="content">
<p>Lorem <b>Ipsum</b></p>
</div>

could easily be represented in the CSS as:

div.content {/* rules for this node go here */}
  div.content p {/* rules for this node go here */}
    div.content p b {/* rules for this node go here */}


I create two disctinct sections, a general section and this node-tree section using indenting. It means you need to keep all your CSS properties in one line so you can truly see the hierarchy of markup nodes, but I’d rather sideways-scroll to get to a property than vertically scroll and potentially not see the node hierarchy.

I reset the indenting in the CSS for important sections such as the “Event Zone” and use lines of comments to break these sections out.

Thoughts?
Shaun