While I was reading awesome book of Smashing Magazine, I review my workflow and some basic structure before I start a project.
This structure should be my way to keep track my front-end building blocks in Less CSS.
base.less
@import 'http://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400)';
// ------------------------------
// THE BASICS
// ------------------------------
@import 'reset.less';
@import 'grid.less';
@import 'variables.less';
@import 'fonts.less';
// ------------------------------
// GLOBAL STYLES
// ------------------------------
@import 'mixins.less';
@import 'global.less';
// ------------------------------
// SECTIONS
// ------------------------------
@import 'sections/post.less';
// ------------------------------
// COMPONENTS
// ------------------------------
@import 'components/panels.less';
@import 'components/buttons.less';
@import 'components/navigation.less';
@import 'components/pagination.less';
@import 'components/icons.less';
@import 'components/post-list.less';
@import 'components/forms.less';
@import 'components/highlight.rainbow.less';
// ------------------------------
// MEDIA QUERIES
// ------------------------------
@import 'media-queries.less';
// ------------------------------
// EXTRAS
// ------------------------------
@import '../css/animate.css';
In the production fase, I always want to minimize everything into a single file.
Enhancing speed and better user experience.