Hi all, hoping to get a general steer on what people would consider the best approach.
In short, I’m working in a large team about to deliver a front-end dev project consisting of many-many components. To do this we are trying to consider the best structure for our work. As the components will form a site that is responsive would you suggested:
Separating each components CSS into a single file with multiple media queries.
+ The positive is that all the CSS for that component will be in one file.
– The negative side to this approach is that if each component CSS file could have X media queries (e.g.: mobile, tablet, desktop), the concatenated/compressed ‘master’ CSS file would result in possibly hundreds of media queries.
Separating each components CSS into multiple files based on the media query.
+ The positive is that each could be concatenated/compressed into the correct ‘master’ CSS media query meaning that only 1 media query per-break-point would be required.
– The negative is that you would end up with X number of CSS files per component (possibly hundreds in total).
Something I’ve missed?
Option B is what I’m leaning towards. Despite resulting in lots of CSS files for the components, it does result in the best end-goal and would also have the benefit of better control/management for a large team working with Git/SVN.
/* Main stylesheet – styles.scss */
@import “helpers”, “component1”, “component2”;
Thanks to this method:
* You handle **one .scss file per component**, which seems good for maintainability
* You handle **media queries inside each file**, so everything regarding a component is in the same file
* You handle **media queries in a very easy way** (no value, only keywords)
* You **can change the value of your breakpoints** whenever you want
* In the end you have **one single .css file** with **only 3 media query calls** (small, medium and large)