How do you use SMACSS with responsive design?

Do you mean, .is-collapsed, is-mobile, is-active and such? I don't mean that. I looked at that but can't seem to find what i was looking for.

e.g how can you make

.l-list-inline 

To be block on mobile? but only the specific one. DO you do l-mobile-block? or ;d

That's one way to manage state, but I probably wouldn't address it like that with the situation you're mentioning. There's a few ways to look at this. First even with SMACSS I don't recommend building modules or classes that just change something as simple as text alignment.

Let's say you have a layout module that controls a 50/50 layout and you have something like this:

<div class="l-halfscreen"></div>
<div class="l-halfscreen"></div>

If you were doing something like this I'd say that you'd want to add context to your classes, something like this (using BEM since you mentioned you were using that):

<div class="l-halfscreen__desktop"></div>
<div class="l-halfscreen__desktop"></div>

Then you could have a context specific class if you really wanted to:

<div class="l-halfscreen__desktop l-fullscreen__mobile"></div>
<div class="l-halfscreen__desktop l-fullscreen__mobile"></div>

This way you can have specific classes that overwrite your layout items based on context. That's one type of thinking.

The other is that your modules are self-contained areas of logic. Meaning you have things like:

<div class="l-primary-content"></div>
<aside class="l-sidebar"></aside>

Where your classes then have all of the media queries associated with them all self-contained within the SMACSS module.

Using the first way you could have:

.l-fullscreen__mobile {
  .l-list-inline {
    display: block;
  }
}

Hmm, need to give it a try. Thank you!

The most important thing to remember is that SMACSS and anything similar to it are really just guidelines. Feel confident that you don't necessarily need to follow it as a dogma, but instead use it as a basis to help your code organization knowing that you can make adjustments as needed to whatever feels more comfortable for you (and your team if you're working with one).

I though about what you wrote, on that examples, and I understand you now.

The only problem lays in e.g.

<div class="l-align-left">
       <ul class="social__icons">
           <li>FB</li>
     </ul>
</div>

<div class="l-align-left">
      <h1 class="logo">Brand Name </h1>
</div>

So both of these share the same class, .l-align-left, now, on mobile, the logo needs to be aligned right, while the social cions left. What you wrote here , jsut changed it a lil,

.l-fullscreen__mobile {
  .l-list-left {
    float: left;
  }
}

Works but for all, but on mobile, i want it to align on right as an example. Now adding a new class there, and putting in possibly on right, wodul get messy as it woudl overite this rule.

Yes, I understand you, but I want to write a good, maintanable code, which means, I suppose industry standard. When I used SMACSS, i coudn't think a way to make that linline-block, be a block on mobile, but inline- block on social icons for example. if i do all inline-block to be center, then that will break the design.

I looked at your profile lol and you're a senior dev? Do you have some easy project i coudl learn from, that uses BEM/SMACSS , or something that's good, I could learn from?

Or do you think it's good to study foundation code, and then do everything as BEM? : d I was studing foundatino code, and i started to do everything as variables, e.g. buttons will have their ovn variables like $br-round; border radius 50%, or their margins btn-margin-defautl: 2px ; in a variable and such.

I really need to start writing a code like if i was doing it in a company or agency, if you get me. I think i did pretty well in the past 7weeks, but I need to abit more. I want to achieve, 100%, which is impossible, but in terms of agency and prodcution level, which means if i was using id's for every html tag, i woudn't be ready as hell.

I don't know lol im just trying to find a way on what im doing but is a lil hard now, especially when no one talks , i suppose, about more advanced stuff on this topic. I watched all conference on yt, there is like no conference left.. on ths topic, and yet, all of them cover basics. Not even treehouse, not even udemy, like no one has this stuff. If i go on wbeiste like CNN or BBC, or something, i think they use BEM , but then, it's a bit big.. and hard to learn from , something smaller woudl be better : p

I honestly think you're stressing yourself out more then you need to. First, understand that the way you work and how you organize things will constantly evolve. There isn't going to be a time where you go, "oh I get it" and then you're done. You're going to constantly be revising how you think and work. The best way I'd suggest learning is continuing to build projects and seeing what feels comfortable for you. You'll get there... it's a journey for all of us.

I don't really have any open projects that will help you in this particular situation, there are some good Sass starters however that might help give you some better context in organizing your projects. One would be to take a look at Mina Markham's Sassy Starter at https://github.com/minamarkham/sassy-starter.

Now as for your latest code example let suggest you think of it a little differently and instead of putting your layout based classes in there, you remove those completely and think more about our modules.

<ul class="social-icons">
  <li>FB</li>
</ul>
<h1 class="logo">Brand Name</h1>

Now I removed your __ on your social_icons class because in BEM _ points to your element, but the whole item is actually your block so you don't need it.

Now think of your modules. You have an icons or a social-icons module and everything you need for that module is contained within a file called modules/social-icons.scss (I'm considering that you're using Sass because of your previous nesting example).

.social-icons {
  text-align: left;
  // Setting your default state for mobile... this is "mobile first".
  li { display: block; }
  @media ([whatever your media query is for a larger screen]) {
    li { display: inline-block; }
  }
}

And then you have another module to control brand items maybe... so let's call it modules/brand.scss just as an example.

.logo {
  text-align: right;
  @media ([whatever your media query is for a larger screen) {
    text-align: left;
  }
}

Do you get the idea? The logic for the module is all located within the module.

Well, so I suppose the only thing I can do is to practice and do more projects for experience, and see what I like or feel comfortable, and then If a team works this way or the other way, then adopt to it. So now everytime I do a project, it's better than the previous one, so that's good I suppose, means I'm learning, well, I'm definitelly learning about a lot of things doing it and new ways.

Oh yes, that's how I do it with modules, but then I though to my self, why do i even have stuff like .l-list-inline when I'm never going to use it because mobile is aways going to be different, maybe if something is centred then no, butotherwise SMACSS 'classes' I say it, are kinda useless.

This iste https://aurelianspodarec.github.io/hcHomeRent/ i was doing with what you just show below, with modules, text center on mobile, left on top if that's social icon or whatever, but I though I must do something badly, if i want to use SMACSS as well, since that seems a good way, instead i ended up doing the whole site in BEM in modules. Well, at least I know I'm in the right track from what I can see from your code :D

Thank you very much for this :D it definitelly made my mind more clear about this stuff for sure, i suppose I just need to do a bit more sites to see things in differetn states, meaning different layout this that.

Btw, if i want to apply for a fron-end, do you think these project I got, understanding of how the BEM and such work, and having some practical experience, which I will make 3more sites just to make sure or however I can make till the interview or even to get one.. do you think thaats good? Or do you think, at least from the project code on the Homes, is that good ? i believe yes, although i did some bad stuff there, since i lack experience, so that's why im constantly doing new pagese to apply the solution i just had in my head and make this overall better. But, with what I know, i shound't have problem with HTML and CSS, and using i suppose basics Sass, and basics jQuery, and basics of JS to get a job? Or what is you rpoint of view on it? or did you ever sat with a beginner or junior dev on the side an helped him? Im curious where woudl i stand if i was to go for a interview and get a job. I still got two weeks left to improve.

Btw, i can write better English, but only if i write short : p so I know English is important : p

I would say anything you can show will help you regardless of the quantity. I would just suggest that when you send your portfolio out to agencies you're interested in that you're honest with your skill level and let them know you're still passionate about learning. Most agencies are open to hiring passionate junior developers who are quick learners. Again, don't focus on being perfect... any veteran in the industry know that's not possible. So just talk about the things you're passionate about and the things you'e learning and you'll be fine. Good luck.

Oh, great answers :D

Thank you very much for all of this. I suppose, if they are, then I can have a good chance lol

Thank you! :D

Thanks, but I still don't get It : p what he means. Is there any example on this, like a real life project example? : p