Orde in CSS - Een modulaire architectuur

Wat is OOCSS?

Object Oriented CSS (OOCSS) - en alles wat met OO in het algemeen gepaard gaat - is de conceptuele basis voor een modulair interface ontwerp. OO groepeert de instructies en de gegevens samen. Deze worden 'verpakt' in objecten, waarbij de details worden verborgen achter een algemene interface, geordend in een hiërarchie van klassen. Interfaces bestaan uit meerdere componenten, die zoveel mogelijk moeten kunnen worden hergebruikt.

Net als bij objectgeoriënteerd programmeren, richt OOCSS zich op flexibele en herbruikbare componenten. Eén component moet één ding goed doen. Dit volgt de basisprincipes voor programmeren, zoals het single responsability principe, separation of concerns en DRY.

Het controleert ook een essentieel UX en grafisch ontwerpvak: consistentie. Door een vergelijkbaar knopontwerp opnieuw te gebruiken in de hele interface, raken gebruikers ermee vertrouwd en voelt de app elke nieuwe sessie intuïtiever aan. Met OOCSS zijn we alleen maar code opnieuw aan het gebruiken, waardoor het sneller en gemakkelijker is om meer dingen te creëren, zonder dat er aanzienlijke overhead aan de codebase wordt toegevoegd. DROGE CSS, mensen!

Nicole Sullivan schreef deze post in 2010 (nooit te laat om bij te praten 🤷♂️), wat de kracht van OOCSS in het media-object uitlegt. De belangrijkste afhaalmogelijkheid van dat artikel is het vermogen om interfacepatronen te isoleren en te abstraheren tot zelfstandige codeblokken voor zowel HTML als CSS. Hier is een voorbeeld van Nicole's Media-object:

Onder ondertitel

Paragraaf