A few things to be cleared up.
A mobile website means a different content, a different style, a variant for a website. An entirely different CSS means the same content, one single variant, just presented in a different way.
Media types and browser sniffing may or may not be part of the answer. Browser sniffing in particular is surrounded by a lot of controversy.
One thing that has been quite successful was building a mobile site version, like m.sitepoint.com, i.e. a whole different content and a whole different set of resources: images, CSS etcetera.
Another thing that is quite successful is not building a different version for mobile, i.e. not a mobile website, but building a responsive design for the same content. Which means a unified CSS file, not a new CSS file for mobile, a new for tablet, a new CSS file for desktop.
And more recently, efforts are put towards combining the two concepts: the same basic content, yet some resources, such as images, be served in different flavors, but not for mobile and desktop, but for high bandwidth and low bandwidth.
Most of the times, a completely different mobile website is not needed. You just build a responsive design, based on media queries.
You can do that by gathering the common style rules in a base section in your unified CSS file, and then by adding different @media sections to slightly adjust things when needed.
What remains true, is the question about the other resources, like images, and whether you have to offer a low bandwidth version to that regard.