Both approaches will work. I don’t do xpath (just a personal preference; I find it too “wordy” and therefore “noisy”). Plus, I know CSS well, xpath, not so much B)
Re the OR…
Seriously, if you’re going to fly from New York to London, would you really start by taking a cruise ship to Cape Town?
The OR can (and usually does) grow very quickly. It soon becomes a burden to manage and control (even moreso if you use the recorder). I keep on keeping on about this 
It simply does not scale. In my (not so) humble opinion, it (and the recorder) should be redesigned from scratch.
If you like to access your HTML elements using an unnecessary set of wrappers (Test Objects) just create one, at runtime, when you need it, using the method I linked to.
WebUI.click(findTestObject("path/to/object")) // needs pre-built TO in OR
WebUI.click(makeTO("#my-object")) // needs nothing
However, if you’re comfortable in code, dispense with Test Objects and the OR and target your HTML elements in JavaScript. i.e, cut out the middle man entirely. He’s not your friend. B)