background preloader

OOCSS (Object-Oriented CSS)

Facebook Twitter

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. (Source : An Introduction To Object Oriented CSS (OOCSS) OOCSS/Atomic CSS are Responsive Web Design ‘anti-patterns’ – Ben Frain.

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.

Bonnes pratiques en CSS : BEM et OOCSS

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. 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.

Bonnes pratiques en CSS : BEM et OOCSS

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. Plongée au coeur de l'OOCSS. OOCSS - qu'est-ce-que c'est, pourquoi c'est bien et comment ça marche.

Plongée au coeur de l'OOCSS

“C’est comme j’te dis tu fais du CSS et tu te base sur le contexte ! Non mais all’OOCSS ! 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.

L’intégration avec OOCSS

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. 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.

OOCSS expliqué avec Monsieur Patate

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. Object-oriented CSS.