Current best practices and tools?

Getting back into web layout after a few years, I want to make sure I’m not missing anything in terms of best practices and tools (both open-source and commercial) for creating cross-browser compatible pages with dynamic layout effects.

Right now I’m using Notepad++ for editing, and trying to reverse-engineer cool features by using in-browser inspectors and downloading referenced JS and CSS. JSFiddle has also come in handy when I can break things down to small elements.

For new layout the best I’ve found is Gridiculous. For cross-browser compatibility: starting with Normalize.css, using [URL=“http://prefixr.com/”]Prefixr to post-process CSS, http://csslint.net/ and http://caniuse.com/ for reference. http://www.dynamicdrive.com/ has some cool dynamic effects for reference.

But I still don’t feel like this is the most efficient way to do page layout and debug styles. What else should I be using or looking at?

Thanks.

As an example of why I think I’m missing something: I’ve spent an hour now trying to get a single image to center within a DIV. All of the examples I’ve found of ways to do this seem to conflict with my CSS.

Maybe possibly you want to hold off on shiny new sets-stuff-up-for-you tools if you want to get some basic CSS positioning like centering images in divs down (though did you mean horizontally or vertically? vertical centering is one of those places where CSS is tricky, or at least complex, even for those of us comfortable with it).

You might want to simply have pages with various elements (blocks and inlines, and inline blocks and floats and tables) and practice moving them around, using your browser debugging tools to see more things like these elements’ margins and stuff.

Knowing the basic rules of blocks and inlines makes a huge difference. “Seeing” margins at work, especially between floats and floats, floats and non-floats, and floats and inlines is another completely good area.

Later on, when you feel very comfortable that you understand how that stuff works, and have had your own battles with, say, IE, then using a grids-it-up-for-you thing like gridiculous is fine: you’ll be using a tool written to speed up development simply to speed up your development, and you’ll be able to debug it with working knowledge.

That’s my advice. I don’t have a specific tool to recommend; you’re already using browser debuggers and sandboxes like JS Fiddle, which are good. When you have particular questions on “why does this box do X when I do Y?”, places like StackOverflow, Paul O’B’s articles on SearchThis, Sitepoint articles and other places tend to show up easy enough on the googles (or the ducks) to read further into the why of whys.