Ask HN: CSS best practices
First off, I'm a developer not a designer. I work in a studio where every designer is expected to do their own markup and CSS. As in, transfer their Photoshop designs to HTML/CSS. Which I believe is excellent. However, since most designers aren't developers there's often conflict on how to implement HTML/CSS. In my day job I don't do an awful lot of HTML let alone CSS. I do however need to take the marked-up HTML and CSS and implement it. Website performance is part of my job.
I have the following believes on how HTML and CSS should be implemented. I think my requests are reasonable and very much achievable. At least, I don't believe I'm over anal retentive here. I do like some opinions on what the HN crowd thinks because I might be completely wrong or missing the obvious.
Here we go:
- Start with creating a theme. The theme will capture the basic colors, the fonts, the font sizes etc. Create styles for as much of the basic HTML elements as possible like a the paragraph, a link, the different headings, what a basic table looks like, what a basic form looks like etc. when having a theme it becomes much easier to treat pages as building blocks. A programmer can now easily add a page with a form that was overlooked in the design and have the form mainly look within design parameters. Adding a list is now easy. Adding a table is now easy. You're using basic HTML with no specific styles added. If you need your form to look slightly different for a certain page you can always override or add to the default theme. The theme can be easily be included on each page. The theme takes care of the boilerplate styles.
- Break your CSS down to multiple files rather than using the monolithic global.css for everything. When the monolithic global.css seems to grow, old styles are left in place because God knows what page might break if you take some it out. Have your global.css contain your theme and create separate css files for all your pages that need specific styles. You can create a contact.css for the contact page that alters some of the theme style or layout for that specific page. Your styles become modular. The downloading of multiple CSS files can be easily solved on the back-end by combining all the needed css files for a page in a single cached file that is served instead.
- id's are for behavior (Javascript), classes are for style (CSS). I see no reason to use id's to apply style to HTML elements. Also, designers seem to come up with the most weird id names that more than often make no sense within the context of the Javascript code that you're writing to target those elements. I've seen more than often that a certain content pod used to be unique in the initial design but later on the pod had to be used multiple times on the same page and an id was used to style it. Furthermore, classes allow you to apply multiple styles as in <li class="menuitem active">.
Your feedback is very much appropriated.