Stop worrying so much about specific devices.
The ability to detect whether a user is viewing your website via a smartphone, tablet, or desktop, seems to be increasingly difficult if all you're going by is screen resolution
It is getting increasingly difficult to detect via screen resolution, and it will only get harder as more devices enter the market, but the purpose of media queries is not to detect device types.What media queries are good at is making tweaks to your design when it is no longer pleasant to use at the current dimensions. If the site starts to fall apart at 550px wide, then it doesn't matter if there's a device with those dimensions or not: you set the breakpoint there.
Its the same deal with feature detection. If the device supports touch, then what does it matter if it's a mobile device or some future wall-sized monitor? Either way the touch enhancements will probably be useful.
User-agent sniffing - as you've stated - is completely unreliable. I could change my User-agent string to Shakespeare quotes if I really wanted too. What would your site decide about my browser then?
User agents also require a lot of work to handle all the possibilities. Do you have one for Firefox on android? Chrome on IOS? Dolphin on Froyo? The WiiU Browser? The extremely limited browser on my old LG feature phone? Lynx? IE 13? Links? IceWeasel? The Blackberry playbook's browser? How are you telling the difference between Opera running on a tablet and opera running on a phone?
This list can only grow as time goes on.
I would follow your first impulse and go responsive - I feel that when implemented properly it makes for a better user experience. Use a responsive CSS library and some javascript MVC frameworks/templating libraries to do your heavy lifting on the client side.
Addressing your concerns:
Low Quality Code from Handling Disparate Prototypes
I think using battle tested JS and CSS libraries and best practices should help you here. Think along the lines of backbone, knockout or angular to provide your clientside code with structure.
Sending Unneeded Code Files to Mobile Devices
I don't think this will that big an issue. Build out mobile functionality first and go from there. This will ensure you get the core functionality created and allow you to build out to the bigger devices from there. Use only the bare necessities to keep things light. If you use templating engines you can reduce the amount of HTML you're sending over the wire. Combine and minify JS and CSS files on the server side to minimize what you're sending to the mobile devices.
Wasting CSS when Hiding HTML Elements
Use a templating engine. These can either be built into the clientside MVC frameworks or separate (Mustache, Handlebars). This will prevent you from sending over too much extra HTML. Additionally, you can lazy load certain sections if that floats your boat.
Conclusion
A well thought out Responsive Web Design should be capable of either avoiding or minimizing each of the issues. A lot of work has been done in the open source community to help negate those problems. I would highly suggest searching out those solutions and seeing if they are helpful with your project.
Its your team's decision in the end, but make sure you consider the vast number of libraries and elect for the best user experience your team can support within the non-functional requirements (timeline, cost, staff knowledge) of your project.
Popular Libraries
JS MVC: backbone + templating library (see below), Knockout, Angular, Ember
Templating: Handlerbars, Mustache
CSS: Twitter Bootstrap, Foundations, Skeleton
Minification/Combination Tools: Yahoo YUI, UglifyJS
Miscellaneous JS: underscore, require
These are the examples I hear the most about. I've personally used Knockout and Twitter Bootstrap. I'm looking to play around with backbone and Foundations as well though. There is a lot of research to do in this area and not really enough space in a single answer. I think if you start researching these libraries and tools you should find plenty of information to get you to the right endpoint.
Best Answer
If you are creating the structure for future web app development then go with mobile first approach. For the second question, I work it out as (just a snippet from my work):
You can further style it as per the requirement.
If the styles are common across multiple elements then I combine them as that reduces bytes for processing and then follow that with CSS specificity rules to generate element specific style.