Hi guys!

This is just a list I’ve created basically for myself, so I don’t forget any scenario or issue when thinking about a frontend project, but I thought it’d be useful for any other frontend out there :-)

Please feel free to add anything I’ve forgot in the comments, so I can update it.

Documenting the code

One of the easiest ways to improve the communication between frontend and backend developers is using a styleguide (starbucks, Github or Hackerhires examples) — that’s one of the main reasons why twitter bootstrap has been so widely used.

The following tools and links will help you to create styleguides:

• Kneath is a methodology for documenting CSS and generating styleguides.
• Nadarei KSS is a Kneath KSS port to Rails.
• Kalei styleguide is a clever client-side solution using backbone, so no need to maintain a server.
• Pears uses wordpress and a specific theme to create styleguides.
• Styledocco uses NodeJS and Markdown to generate HTML styleguides and documentation.
• Patter primer generates styled markup from a folder of markup snippets.
• TopDoc is a well documented tool for generating usage guides for css that uses very stric structures to document our CSS code.
• And some interesting reference posts from Warpspire, rjmetrics and UXMag.

Regression tests

CSS is a set of rules that, applied to some specific HTML, produce a pleasant result. That’s why is not easy to add tests to a CSS framework, but there are some different stages we can add to our pipeline, mostly based on before and after image diffs:

• Wraith, a responsive screenshot comparison tool from the BBC guys.
• PhantomCSS provides visual regression testing with PhantomJS.
• Hardy is, as they say, a “Selenium-driven, cucumber-powered CSS testing”.
• CSS critic, a lightweight framework for regression testing of Cascading Style Sheets.
• Sikuli is a general purpose visual technology to automate and test graphical user interfaces using screenshot images.
• SuitCSS provides a test structure for visually testing other components.

Static code analysis

Interesting as a before-commit, checking any syntax errors and code redundancy:

• CSSCSS is a CSS redundancy analyzer that analyzes redundancy (I love this guys :-)
• CSSLint online tool and command line tool for syntax and basic performance checking.
• MINCSS will check unused CSS selectors in your code.

Specific HTML+CSS implementation

Once we have set up our whole project, is time to start thinking about the specific CSS code we are going to write, then you should think about:

• Reset or normalize your default CSS.
• Grid system — handmade, supporting different breakpoints or just tackling a fixed amount of columns across devices.
• CSS3 feature detection libraries like moderniz or relying on native detection.
• CSS preprocessor — SASS or LESS.
• How are you going to organize your CSS? OOCSS, SMACCS, or maybe Semantic UI.
• Responsive images solution — while W3C is still refining the picture element draft, you should give a try to picturefill, the clown car technique or use a server side solution.
• Where are you going to set your media queries breakpoints? new
• Would you like to support retina or high DPI devices? new