WebAppers

/ best free open source web resources /

Graphic Resources

How to Write Maintainable CSS

Posted · Category: Information

MaintainableCSS is an approach to architecting and writing CSS that helps you and your team write modular, scalable and maintainable code. In practical terms, this means that as a developer I want to create new features, or edit existing features without having to concern myself with overriding styles I don’t want applied, or worse that the code I write causes regression elsewhere.

MaintainableCSS is not something you can download. It’s a set of principles, guides and conventions that help you write CSS for large or small scale websites. Having maintainable code means that I can edit a module and it’s styles without worrying that I have negatively caused problems in other modules by accident. I want to be able to to write code that provides peace of mind knowing that my code is encapsulated. Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.

maintainablecss

Requirements: –
Demo: http://maintainablecss.com/
License: MIT License

3 Comments
  • I’m most certainly not agreeing with this semantics or the meaning he has about reuse of classes.
    If you make you backbone of yoru application with a framework of a custom written “framework”, you can defo use col-*-* or styles as red.
    If you base component has a certain color and you want to update a color of a certain button or something, why should you write a whole new class just for that button.

    Using SASS makes using CSS a world of diffrence, i rather think that Adam is an old fashion developer and doesn’t get the hang of new age applications.

    I would never use only semantical naming. All is built on a backbone of a grid framework to speed things up and to not have to think about the basics.
    The rest is up to yourself.

  • Softbiz Solutions

    I enjoyed reading this post, it has good stuff and points.

  • The problem with manuals like this, is that they are heavily biased on what has worked best for them. I love the more generic approach like SMACSS. I agree with Rick that these ideas sound very dark age like to me. Where to some point he is right – crowded HTML with tons of css classes is not sexy. There are better more actionable approaches to these problems. You want to use the features of CSS like the cascade, inheritance and specificity. These features are often mistaken as bugs. Such as our beloved collapsing margins “problem” :P

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons