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
Are you searching for an Sass Mixin that generate all the crossbrowser prefixes for CSS3? Than you definitely need this Sass Mixin. I use it myself in all my projects. It is so easy to use, let me explain it to you guys!
Sass & Zurb Foundation Framework
Since a few months i use Sass as my Css Pre-Processor (togheter with Zurb Foundation Framework) for all my projects because it give’s me a huge jump-start in the building process. I created a lot of mix-in’s that makes my life a lot easier as an developer. But after i buy a nice NAS of Synology the hell start’s for me!