OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? – clubmate.fi The way we write CSS has changed a lot in last few years, and the abbreviation jungle gets deeper and deeper. Heres a list of links to influential articles and quick summaries of these techniques. update: 2014.01.23 rewrote the Atomic and the BEM sections. I think there have bee happening big things in how we write CSS, for a reason I suppose. The will to make CSS more modular is strong (to make CSS so that it’s easier to control without breaking everything when you change a small thing). Object Oriented CSS (OOCSS) In a nutshell: Keep the structure and skin separate Keep the visuality separate, so you can reuse the visual classes. Separate container and content “rarely use location-dependent styles.” ul li.list-item { ...} Go straight into the element: .list-item { ...} More reading on the subject: Atomic approach Science joke time: Why can’t you trust atoms? Now, Atomic can mean a few things: Atomic Design More reading: Atomic Design. On a related note, but not the same thing, Atomic CSS. BEM-tree:
CSS Tutorial Tombez pour SMACSS | @nicoespeon Petit tour d'horizon sur ces guidelines qui feront de vous un bûcheron du CSS, un vrai. Timber ! SMACSS est un ensemble de conseils et de lignes de conduite élaborés par Jonathan Snoovvk et dont le but est de vous permettre d’organiser votre CSS de manière claire et intelligente. Le premier principe réside dans la catégorisation : on distingue et regroupe les règles CSS par affinité logique afin de structurer son code (base, layout, module, state, theme). Le second principe relève de la convention de nommage : ne pas utiliser des ID quand une classe fait très bien l’affaire, nommer les classes de manière à faire ressortir la logique qui s’y cache, … Le troisième principe consiste à découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve, utiliser les sélecteurs d’enfants à bon escient, … Avec ces 3 principes, SMACSS vous permet de poser des bases solides pour un CSS de qualité, made in Canada ! Principe et intérêts Les 3 grands principes de SMACSS