Stylesheet maintenance can become overwhelming on large applications. Here are a few tips and tricks to keeping your sanity in a CSS heavy world.

Rules for clean CSS

  • Good Commenting.

    A stylesheet with clear comments that delineate each main section of code makes it a lot easier to find by scanning the page or using cmd/ctrl + F to search.

  • Don't repeat yourself (DRY).

    Child element declarations should not repeat styles unless they override what is already there.

  • Group elements.

    Keep parent/child elements near each other in the CSS. This not only helps you identify areas which can be pruned or cleaned up but also makes it easier on other users of the stylesheet.

Partial architecture

If you are using Sass you could be face to this question:

May I import Sass files before or after Foundation import?

application.scss is a remote control for your stylesheets 

@import "foundation/functions";
@import "custom-settings";

@import "foundation/normalize";
@import "foundation/components/block-grid";
@import "foundation/components/buttons";
@import "foundation/components/forms";
@import "foundation/components/grid";

@import "components/my-typography";
@import "components/my-branding";
@import "components/my-buttons";

You can quickly add / modify variables in _custom-settings.scss and have all the updates if you have decided to use bower.

Need some help ?

If you have problems, please create a GitHub Issue.

Readme →