Airbnb Tech Talk: Nicole Sullivan - OOCSS and Preprocessors. OOCSS & SMACSS. 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. Organizing CSS with OOCSS, SMACSS, and BEM - Matt Stauffer. Semantic CSS vs OOCSS vs Grid Systems vs Preprocessors (Less, Sass, etc) An Introduction To Object Oriented CSS (OOCSS) Advertisement We explore how to craft flexible front-end design patterns and making future-proof and accessible interfaces without extra effort.
Hardcover, 312 pages. Get the book now → Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. From a Web developer’s perspective, however, some may argue that speed is king1. Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas5. In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages. OOCSS/Atomic CSS are Responsive Web Design ‘anti-patterns’ – Ben Frain.
655Days 655 days since this post was last revised.
Specific details are likely out of date. For many months now, in response to many failed attempts to find a suitable approach to scaling the CSS on the projects I work on, I have been using ‘ECSS’, my own Frankenstein approach to large-scale CSS architecture. It’s detailed more fully in the post, Enduring CSS: writing style sheets for rapidly changing, long-lived projects.
Subsequently, in this post, I’m about to argue that an OOCSS architectural approach to a large scale, rapidly changing responsive web site or application is an ‘anti-pattern’. Bonnes pratiques en CSS : BEM et OOCSS. Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS.
Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Je raconte dans cet article mon propre cheminement dans leurs travaux en espérant qu'il sera utile à l'intégrateur Web autant qu'au développeur JavaScript.
Bonnes pratiques en CSS : BEM et OOCSS. Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS.
Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Je raconte dans cet article mon propre cheminement dans leurs travaux en espérant qu'il sera utile à l'intégrateur Web autant qu'au développeur JavaScript. Sommaire. Plongée au coeur de l'OOCSS. OOCSS - qu'est-ce-que c'est, pourquoi c'est bien et comment ça marche.
“C’est comme j’te dis tu fais du CSS et tu te base sur le contexte ! Non mais all’OOCSS ! J’sais pas vous m’recevez ?” L’intégration avec OOCSS. Le CSS orienté objet ou OOCSS en anglais pour « Object-Oriented CSS » est un concept mis en place par Nicole Sullivan ,consultante front-end spécialisée dans les standards du web et la performance des sites à fort trafic.
Le principe de l’OOCSS est de considérer les différents éléments du site comme des objets réutilisables auxquels nous appliquons un style. Cela permet d’avoir un code plus optimisé et structuré. Notre CSS devient alors facilement réutilisable et la mise à jour devient rapide. L’OOCSS se rapproche de la programmation orientée objet car l’on peut retrouver des concepts familiers à celle-ci : système de classes, propriétés et héritage. Par exemple, plutôt que d’attribuer à chaque élément de la page HTML, une classe CSS dont les propriétés sont spécifiques à cet élément, nous allons alors préférer lui appliquer une classe générique pour pouvoir l’utiliser ailleurs dans notre site. 1/ Le template 2/ Les modules A titre d’exemple, voici le module bouton d’un site web :
OOCSS expliqué avec Monsieur Patate. L’Object-Oriented CSS ou OOCSS (CSSOO en français pour « CSS Orienté Objet »), est un concept présenté par la canadienne Nicole Sullivan, consultante front-end spécialisée dans les standards du web, l’architecture et la performance des sites à fort trafic.
Introduit il y a pourtant plusieurs années, l’engouement suscité par le projet s’est révélé assez peu représentatif de ses ambitions (notamment au sein de la communauté francophone). Une approche via framework, indigeste pour les intégrateurs débutants, un concept « orienté objet » emprunté à la programmation, déroutant pour les développeurs. Mais également une méthodologie jugée inutile pour les petits projets et complexe à implémenter dans le process de production web. Voilà à mon avis ce qui a permis aux sceptiques de dénigrer l’OOCSS. Nous verrons plus tard si ces arguments sont fondés ou non. Explication du concept Entrons sans plus attendre dans le vif du sujet.
Caractéristiques Contrairement au premier cas pratique avec Mme et M. Object-oriented CSS.