Styles of writing code

When writing code, it can be helpful to have an agreed upon style. Where do spaces go, and how many? Do you line break after the bracket or before it? Having a code style guide means it’s easier to work as a team, and with future you.

For CSS, the big ones are SMACSS (Scalable and Modular Architecture for CSS); OOCSS (Object-Oriented CSS); BEM (Block Element Modifier). Each is a different take on how to write classes and organise your CSS. There’s no right or wrong way: only the way that makes sense to you and your team. Along similar lines there’s also Maintainable CSS.

For JavaScript, there are two main things to do: run JS Hint to detect errors and potential problems; run JSCS to enforce a style guide.

Preprocessors

There are a couple of well-known preprocessors: Sass, Less, and Stylus.

They all have similar features, but Sass seems to be one of the most widely adopted. You don’t have to use a preprocessor, but there are a couple of features that might make it worthwhile.

Variables are handy, Nesting selectors makes for much better readability (but don’t nest too deeply), better use of Media Queries (write them inside a selector, rather than in big blocks by themselves). Partials let you write your CSS in a modular way, but compile them into one file at the end. You can also set an option to minify the final file.

Next: frameworks Boilerplates and helpers.