- This topic is empty.
-
AuthorPosts
-
February 21, 2013 at 3:41 am #42894WhyDoINeedToSignUpMember
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:
**Option A:**
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.
**Option B:**
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).
**Option C:**
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.
Thanks for your thoughts!
February 21, 2013 at 4:21 am #125494Kitty GiraudelParticipantI would definitely go with Sass, with a structure like this:
/* Helpers – helpers.scss */
@mixin breakpoint($point) {
@if $point == large{
@media (max-width: 58em) { @content; }
}
@if $point == medium {
@media (max-width: 48em) { @content; }
}
@if $point == small {
@media (max-width: 38em) { @content; }
}
}/* Component 1 – component1.scss */
.component-a {
/* stuff */
@include breakpoint(small) { /* stuff */ }
@include breakpoint(medium) { /* stuff */ }
@include breakpoint(large) { /* stuff */ }
}/* Component 2 – component2.scss*/
.component-b {
/* stuff */
@include breakpoint(small) { /* stuff */ }
@include breakpoint(medium) { /* stuff */ }
@include breakpoint(large) { /* stuff */ }
}/* 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)February 21, 2013 at 4:26 am #125495WhyDoINeedToSignUpMemberThanks Hugo!
I have been using SASS but not to that level yet. I didn’t realize it would output only 3 media queries in that way.
I will take a closer look, thanks!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.