adamsilver.io

maintainablecss.com

Modules - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/modules

A module is a distinct, independent unit, that can be combined with other modules to form a more complex structure. In a living room, we can consider the TV, the sofa and the wall art modules. All coming together to create a useable room. If we take one of the units away, the others still work. We don’t need the TV to be able to sit on the sofa etc. In a website the header, registration form, shopping basket, article, product list, navigation and homepage promo can all be considered to be modules. That’s...

maintainablecss.com

State - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/state

Quite often, particularly with richer user interfaces, styling needs to be applied in response to an element’s change of state. For example, we may have different styles when a module (or component) is:. Showing or hiding;. Active or inactive;. Disabled or enabled;. Loading or loaded;. HasProducts or hasNoProducts;. IsEmpty or isFull;. And the CSS should be:. Basket-isEmpty { background-color: #eee; }. Has a gray background, where as an empty search has an absolutely-positioned image. If an element’s sty...

maintainablecss.com

Modifiers - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/modifiers

Like state, modifiers also override styles. They are useful when modules (or components) have small and well understood differences. Take an e-commerce site whereby each category has a unique background image in the header. All headers have the same padding, and margin etc. The only difference is the background image. The boys category would have a modifier as follows:. Div class="categoryHeader categoryHeader- boys". And similarly, the girls category would have a. The CSS would be:. Modifiers are a good...

maintainablecss.com

Conventions - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/conventions

Has the following convention:. Module [- component ][- state ] {}. Square brackets are optional depending on the module in question. Here are some examples:. Module container */ .searchResults {} /* Component */ .searchResults-heading {} /* State */ .searchResults-isLoading {}. Component and state are both delimited by a dash. Names are written with lowerCamelCase. Selectors are prefixed with the module name. Created by Adam Silver.

maintainablecss.com

Introduction - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/introduction

MaintainableCSS is an approach to writing modular, scalable and maintainable CSS. Not only does this guide explain. To do this, but more importantly it explains. There’s nothing to download. This is not a library or framework. It’s a set of principles, guides and conventions to help you write CSS for small or large-scale websites. What does maintainable mean? Maintainable CSS can be defined as being able to make styling changes, without worrying about accidentally causing problems elsewhere. No You can r...

maintainablecss.com

Chapters - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters

Join my newsletter to get the latest MaintainableCSS updates and my usual articles about UX and front-end development. Created by Adam Silver. Designing inclusive, simple and human experiences on the web. You can contribute to this project on Github.

maintainablecss.com

IDs - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/ids

Semantically speaking, we should use an ID when there is only one instance of a thing. And we should use a class when there are several. However, IDs overpower class names. By orders of magnitude, which is a problem when we want to override a style. To demonstrate the problem, let’s override the colour of an element from. Module { color: red; } .module-override { color: blue; }. The element will be red even though the override class declares blue. Let’s fix this by swapping the ID for a class:.

maintainablecss.com

Versioning - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/versioning

We may, for example, want to A/B test two different versions of a module to see which works best. To do this, we need to duplicate the module and give it a unique name. For example, if we want to test two different baskets, the CSS might be as follows:. Existing module (variant A) */ .basket {} .basket-title {} /* new version (variant B) */ .basket2 {} .basket2-title {}. Join my newsletter to get the latest MaintainableCSS updates and my usual articles about UX and front-end development.

maintainablecss.com

Organisation - MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

http://maintainablecss.com/chapters/organisation

Good code is easy-to-find and easy-to-find code is well-organised. And so it follows we want our CSS to be well-organised. There are, generally speaking, two approaches to choose from, both of which we’ll discuss in this chapter. 1 CSS in a single folder. This approach puts all CSS inside a single folder:. Path/to/css /vendor some3rdParty.css someOther3rdParty.css /yourApp some.css global.css basket.css. Third-party CSS files live under. The application’s CSS lives under. Is the name of your project.