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?
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. We’ve all been there, but these are problems that can be largely avoided by careful planning at the beginning of our projects.
Let’s talk about CSS architecture. Benefits of Thoughtful Architecture The primary benefit of a thoughtful CSS architecture is scalability. Fewer styling rulesFewer styling collisionsLong-term maintainabilityFaster ramp-up for new team membersEasier collaboration between team membersSmoother project handoffs Types of CSS Rules Jonathan Snook popularized the concept of grouping CSS rules into categories in his book Scalable and Modular Architecture for CSS (SMACSS). Base Styles Objects Components State Themes Utilities. Naming CSS Stuff Is Really Hard. This isn't quite a post about CSS architecture.
This isn't really a post about naming conventions, either. Instead, let's talk about what we're calling elements. The names themselves. The things we use to link blocks of styles to the elements they're associated with. 9 out of 10 developers agree: naming things is by far the most difficult part of writing CSS. How can we remedy this? We can usually fit a given class name into one of three categories: Functional class names Content-based class names Presentational class names Class names within a given category tend to share maintainability characteristics. 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.
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. How many times have you looked at a piece of HTML only to wonder which classes do what, which classes are related to each other (if at all), which classes are optional, which classes are recyclable, which classes can you delete, and so on?
The Namespaces Format: . 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.