When a project has a lot of CSS, it might require using both groupings simultaneously. CSS files structure becomes two-dimensional:
Okay, the example is fabricated, but you sure do understand what i mean.
Up to this point everything is fine.
Enter Media Query
This is where my CSS structure gets funked up.
In addition to the 2D structure described above, i have to structure my code by media queries:
- Some of my styles are universal (applied everywhere)
- Some are applied to certain screen size only:
- extra large.
- Some are applied to certain groups of screen sizes:
- everything except small (non-mobile styles);
- small and medium (where sidebars aren't at the sides)
- large and xlarge (where you do have sidebars)
I tried to overcome the issue by scattering media queried styles among existing CSS files. The breakpoint Compass extension helps a lot, but the stylesheets become too messy. Finding a certain style when it's not portrayed in the files structures a lot of pain.
I tried grouping by media queries, then by elements and function. But files structure is two dimensional, so you can't add a new dimension, you can only add another level of hierarchy. So, it's not graceful. Also, it's very bulky.
So i end up with a 2D structure with media queries on one axis and an ugly mix of elements and functions on the other axis.
I'm absolutely not satisfied with that but i just fail to come up with a graceful solution. Please suggest one.