CSS Tools

Wouldn’t that create a huge overhead when listing all Elements?

I guess you are right here, did not think this out all the way. I am guessing that it may have been either cssedit or stylemaster since I remember testing those, but I did not see this in their product description. It really doesn’t matter since I would most likely not use it anyway since I hate opening multiple apps to work and prefer to just keep it simple. But I am sure I have seen this someplace...I need to take some memory pills since it is failing quite often.

Quote from: dev_cw at Jan 24, 2008, 05:47 AM

...I generally start with the unstyled html and then do the css, and no matter how organized I try to be I always end up looking through the markup to remember what elements are being used etc...

I am not trying to tell you how to work but let me ask you this: Don’t you use many of the same elements over and over again on your projects? Do you usually have a #header, #content, #footer, #sidebar, #menu, #submenu and that sort of thing? Many HTML/CSS folks, myself included, use a base stylesheet and a base page scaffold and then add the customizations.

I name classes for content or function on repeated (or potentially repeated elements) and IDs describe unique content to the page or subelement. Really there should not be so many classes or divs that you can’t scan an HTML page either with your editor or as I do when I am debugging a live site using FireBug in Firefox.

Even though many of my sites have completely different layouts many element are common so instead of rewriting my HTML/CSS from scratch every time I use conventions and common names and it saves me hours and hours (more money in my pocket [never charge website development by the hour]). Some people have gone so far as to use BluePrint CSS but it is overkill in a single designer environment.

One thing I would think about is how you could make starting your website design faster, what could you copy and paste into a new site and already have a basis for your new design that you now have to just modify instead of rebuilding from scratch. If you do lots of fixed width designs with a large content pane and a single column on the left or right with a header and footer you can build that out with your css and Html and use that to start your site.

I have gone so far now to even build out whole declarations in my base CSS file to include such things as horizontal and vertical menus, hCard formatted vCards for addresses, skiplinks nav, designer bylines, and more. Then I know in every site I just need to adjust, align, add dimension and colour and not go, "How did I do that on that other site" and have to open up that site to then copy and paste the CSS over.

All the best in you adventures,

Jay

Those are good points Jay, there are always common elements. Unfortunately I am not as organized as I should be and start every project with a more or less blank document (I have a very basic html/css document template but I rarely use it, my editor (BBEdit) adds code bits quite easily). I find that I get restricted in building from a predefined mold and get cought up on modifying it to work rather than making it work right off. It is the same as designing with a common template, just restricts me to much and I end up making things fit. I prefer the blank canvas. It may not be the best but works for me.

I like your points though and will work on putting together a common starting point, it never hurts to be organized and possibly more efficient and now that I have committed to MODx it makes sense to have a starter template.

@dev_cw

It is possible to get stuck in the template if you think it as such but I only stick in the bare minimum of divs with ids and only have the names of those div ids in the css with the exception of the navigation snips I previously mention. I look at the scaffolds of my base pages as a prepared canvas. A painter will not (usually) start painting straight on a canvas he first decides how big it will be, block it, and tack it and prepare it with a wash so he/she can start painting. But guess what, many painters keep a supply of already prepped canvases ready to paint on.

You don’t need to use colors or any fancy styles or even any more than 3 or 4 divs to build a scaffold. Don’t apply widths or heights or any CSS styles in your Base stylesheet but you can at least put the ids that are in your base html in it. (One tip though is that I always have a rule in my CSS base that gives divs a border and a background so that I can see them when I am first starting in my browser.

Do what works for you.

Cheers,

Jay

One tip though is that I always have a rule in my CSS base that gives divs a border and a background so that I can see them when I am first starting in my browser.

That is a good idea

Not so sure about the borders, they can shift things around by a couple of pixels depending on the element and the browser. Backgrounds are safe, though.

Yes, the borders will shift your boxes but I only leave them until I am ready to style the containers. This way I don’t need to style each container ID and just delete the rule when I am ready to do my styling magic. I just use the following rule:


One were really clever they might just create a custom stylesheet for Firefox and use it temporarily to add the styles to the divs.

Cheers,

Jay

i didn’t read the whole, but a good bit. Do you think might be thinking of TopStyle lite? I have it (came w. Macromedia suite) and it basically shows you a page with all the elements on it. I think it might be free now too (but idk)