Sorry Tom, I completely glossed over your actual question.
I can only guess that your method (fewer files I presume) is faster to
compile but I can't imagine that being anything noticeable. From an
organization standpoint I strongly prefer breaking everything into
components and including the relevant media queries with each component.
I've worked with large codebases that have separate files for media
queries, each breakpoint, and I've always found it more difficult to track
down what I need.
On Tue, May 31, 2016 at 12:32 PM Chris Rockwell <ch...@chrisrockwell.com>
wrote:
> I have used the method from the second article since I started using Sass.
> I break components/objects/atoms/whatever into their own file and it makes
> more sense, to me, to include the media query with the components.
>
> I make mine "more inline" though:
>
> .selector {
> color: red;
> @media (min-width: 767px) {
> color: blue;
> }
> }
>
> On Tue, May 31, 2016 at 12:07 PM Tom Livingston <tom...@gmail.com> wrote:
>
>> Listers,
>>
>> I was just reading a great article by Veerle Pieters ( here
>> <
>> http://veerle.duoh.com/design/article/my_process_of_creating_the_arriva_web_site
>> >
>> ) which linked to another article ( here
>> <https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/> ) that
>> made me stop and think about how I implement media queries and wondered if
>> it was a good or bad way of doing it or if it doesn't matter (other than
>> personal preference). This in turn moved me to post this to the list:
>>
>> I use Sass for writing css. I have some base files like normalize, a fonts
>> scss file, a colors file etc. For the bulk of my styles, I break them up
>> based on breakpoint and import them into a main scss file, like so:
>>
>> @import "colors";
>> @import "fonts";
>> @import "base";
>>
>> @media only screen and (min-width: 40em){
>> @import "tablet";
>> }
>> @media only screen and (min-width: 60em){
>> @import "desktop";
>> }
>>
>> The second article linked above is a neat Sass mixin to easily implement
>> MQs where needed, sort of "in-line" with your element's styles and having
>> your MQs all mixed into a single sheet, like:
>>
>> .selector {
>> color: red;
>> }
>> @media (min-width: 767px) {
>> .selector {
>> color: blue;
>> }
>> }
>>
>> My question is, is either of these methods more efficient/performant than
>> the other? My preferred method seems easier to keep organized (both in my
>> head and file-wise) but is it slower/less efficient?
>>
>> TIA
>>
>>
>>
>>
>>
>> --
>>
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>>
>>
>> #663399
>> ______________________________________________________________________
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
