Client-first Spacing Margin and Padding Deep Dive

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 18

  • @vianneypercq
    @vianneypercq 3 года назад +3

    Joe and Harshit's explanations about CSS specificity are definitely very helpful! Thanks {Finsweet team!

    • @Finsweet
      @Finsweet  3 года назад

      Glad it was helpful!!

  • @EdwinBrito
    @EdwinBrito 3 года назад +2

    Thank you Joe.

    • @Finsweet
      @Finsweet  3 года назад

      You're welcome!!

  • @alex-pattison
    @alex-pattison 3 года назад +1

    Thank you Harshit and Joe. Great explanations from both of you.

  • @stripypaint
    @stripypaint Год назад

    Learned something new! Thanks!

  • @magalere
    @magalere 3 года назад +2

    "Use the global classes to separate elements that don't need custom classes" _ Joe Krug
    CSS Specificity. Thanks for the lesson! (And for the great extension)

  • @TheKetoSurvivor
    @TheKetoSurvivor 3 года назад +1

    Looking forward to working with this!

    • @Finsweet
      @Finsweet  3 года назад

      Happy to hear that!!

  • @dannygoldfarb8378
    @dannygoldfarb8378 3 года назад

    This was super helpful to really understand when to use global and when to put it on the element.

  • @alexpearl3155
    @alexpearl3155 3 года назад

    really great explanation of when and when not to use global spacing classes, thanks joe

  • @stackingflow
    @stackingflow 3 года назад +2

    I duplicated the client first clonable and paid for CMS plan. Now I think I messed up a lot of things and added some random classes while copying pasting elements from other projects. How do I reset everything? So that the random classes that I added by copying pasted gets removed and only client first classes stay. (Copying pasting elements from other project is the worst mistake anyone can make, wasted my full day)

  • @stinkleaf
    @stinkleaf 11 месяцев назад

    Question about REM on padding. If a user has a larger base font like 18px for example. Will this increase the padding on the site? That could result in too much padding?

  • @Brian-ce7ol
    @Brian-ce7ol 2 года назад

    Hi I was wondering what will be the difference if we do not wrap the elements with the spacing classes but instead put a div block with the height as the spacer instead, Would there be any weaknesses with this approach? In this case we wont have to plan out the wrapping structure right?

  • @leonvermij7893
    @leonvermij7893 2 года назад

    isn't it bad practise to 0 out the left right and bottom just to accomplish margin top? and isn't that creating specificity issues on its own? why not just make margin_all_small, margin-left-small etc..? Would love to know your reasoning behind that?

  • @MichealBeaulieu
    @MichealBeaulieu 3 года назад +1

    Yeah, one issue I can see with this is that just having all these margin classes, whenever you want to change the actual style of the element, you have to remove those classes as to NOT apply those styles to those margin classes instead of the actual element you want to adjust styling to. Instead of thinking GLOBAL, how about we setup and design these sections that have the margin and padding applied to the section> I create sites this way alll the time and they are organized, look consistent and neat, and don't need all these added margin classes,

    • @Finsweet
      @Finsweet  3 года назад

      If you are doing this then you are using the system wrong. Global classes should have no additional styles on them. And any updates can be made to the core elements in the style guide rather than in line on elements.

    • @MichealBeaulieu
      @MichealBeaulieu 3 года назад

      @@Finsweet I guess the deal is, design everything, then add these classes. But you know what happens along the way, you often need to adjust, and having to remove classes, make adjustments, add back the classes, etc.. that's the process I'm referring to.