background preloader

CSS Architecture

Facebook Twitter

Thoughtful CSS Architecture. Architecture: the complex or carefully designed structure of something Have you ever worked on a CSS project that gradually became a hot, sticky mess?

Thoughtful CSS Architecture

It’s difficult to keep track of what styles affect what HTML: minor changes fix one problem but create three more and can require ugly hacks, and small CSS changes can break JavaScript functionality. Naming CSS Stuff Is Really Hard. This isn't quite a post about CSS architecture.

Naming CSS Stuff Is Really Hard

This isn't really a post about naming conventions, either. Instead, let's talk about what we're calling elements. Managing CSS Projects with ITCSS. More Transparent UI Code with Namespaces. When we work at scale, we often find that we spend a large amount of our time reading, maintaining, and refactoring existing code, rather than writing and adding new features.

More Transparent UI Code with Namespaces

This is the reason we focus so much on things like architectures, naming conventions, methodologies, preprocessors, scalability, etc.: because writing CSS is easy; looking after it is not. What we want is to be able to write code that is as transparent and self-documenting as possible. Transparency means that it is clear and obvious (to others) in its intent; self-documenting means that we don’t have to lose time to writing and reading lengthy, supplementary documentation. The need for this is particularly true when working with languages like HTML and CSS.

Necolas/idiomatic-css: Principles of writing consistent, idiomatic CSS. Conseils et bonnes pratiques. CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS. Home · stubbornella/oocss Wiki.