How to structure CSS or Sass for an large application

If you read more off my posts, you know that i love Front-end! Not only the Development, but also the Architecture! I got great experience with setting up an CSS structure for big (and small) applications. All the time i setup an structure i use Sass.

Use Sass to structure the CSS

Since i work with Sass, my development is a lot faster then before. I think it’s smarter to don’t ignore the CSS-preprocessors in opinion! Sass gives you a lot of things to write faster and smarter CSS, but it gives you also the ability to create an better structure.

Sass gives your more development speed

Sass gives you more speed in the development because of the Variables & Mixins for example (but there is a lot more!). For the people who don’t know Sass, you can do a free Sass course at Codeschool.

Setup the CSS Architecture

I assume that you know Grunt or Gulp, the made it very easy to compile your Sass to CSS. If not, you can also use another Compiling tool for this structure.

Folder & File Structure

- Sass - mixins - _position.scss - _transition.scss - modules - _buttons.scss - _defaults.scss - _grid.scss - _inputs.scss - _lists.scss - _print.scss - _typo.scss - _variables.scss - partials - _header.scss - _sidebar.scss - _footer.scss - _nav.scss - _layout.scss - _content.scss - pages - _homepage.scss - _contactpage.scss - _aboutpage.scss - vendor - _normalize.scss - styles.scss Read more