[Define New Theme] 15. The css needs broken out into components and elements for easier maintainability and portability.

[hanakin]

*Note This is part 15 of a series found here

So just for clarification this is a two fold discussion really. I am not saying lots of little css files. The CSS should be broken out into smaller files yes but not as many as we have no. The really break-out would come in the form of something like less files to be more module and then the generated css files would be broken out differently then they are now but in all merged and minified and compressed.

Please respond accordingly
This is not a discussion on compressing/minifying that is being discussed here: https://area51.phpbb.com/phpBB/viewtopi ... 81&t=45669
This is not a discussion on the use of a pre-processor that is being discussed here: viewtopic.php?f=81&t=45549

With that out of the way here is the proposal

PROPOSAL:
given the use of a preprocessor the content should be broken something like the following

LESS folder:

• + core
  • _normalize.less
    _base.less
    _defaults.less
    _layout-grid.less
    _utilities-layout.less
    _utilities-text.less
    _utilities-responsive.less
    _common-type.less
    _common-lists.less
    _common-tables.less
    _common-forms.less
  + mixins
  + theme
  • _vars.less
    _block-header.less
    component-navbar.less
    _element-button.less
  _mixins.less <- used to include all mixins
  core.less <- used to include all core parts
  style.less <- master file
  theme.less <- used to include modular blocks, components, & elements
  [page].less <- can create page specific combinations of modules in order to reduce the amount of styles on different sections

Then you render it into something like the following

style.css <- this is then minified and compressed containing all styles
core.css <- only includes the core styles to be included in combination with a page specific style sheet
theme.css <- used to replace the core values with theme specific globals. Also used in combination with page specific
cp.css <- contains all none global theme related styles for the control panels

This is all still kind of debatable and am open for suggestions. For example its totally possible to put all the utility files into a folder rather than prepending them, same for common, block, component, and elements.

Also it may not be 100% necessary to have individual page specific styles depending on how small the overall stylesheet is.

Thoughts & Suggestions