ACSS 101.12: The Official ACSS Workflow (BEM + AUTOBEM)

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

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

  • @leonprofes8544
    @leonprofes8544 2 месяца назад +2

    Subscribed and purchased a Lifetime license. Hands down the best video explaining BEMs and the advantages of such workflow to my simpleton mind. Also, I understand ACSS better now. I have been living under the rock with Elementor. Feeling like a hostage a bit. Crawling out of the dark into the light with Bricks and ACSS.
    There's one objection that can not be changed or updated and is neither a good or bad. Whenever I look at your videos I can't stop thinking that the younger brother of Matt Damon (the Actor) is narrating these videos 😂. Loving the way you explain and how eloquent you are.
    Thanks again and keep up the good work.

  • @tobisalami
    @tobisalami 5 месяцев назад +7

    Bookmarked! I'll return here after work. Because when Kevin is in a video, it must be watched.

    • @tobisalami
      @tobisalami 5 месяцев назад

      Okay. I watched it! And as always, marvelous!

  • @LindaShum
    @LindaShum 5 месяцев назад +2

    You explained BEM and I now understand the power of Automatic.css! Your videos are extremely valuable. Every one I watch helps me another step closer to being able to create any layout required efficiently and beautifully. Thank you!

  • @ScottDavey
    @ScottDavey 5 месяцев назад +2

    Love how much effort you put into these videos.
    I just bought the full package and frames, and sadly had a sarcastic rude interaction with your support though, as frames would not activate under current instructions, I managed in the end to activate it, but not from how it is shown in the instructions, support just kept pointing me to instructions with an exclamation mark at the end of every sentence or silly face emojis making out I'm stupid.
    When I picked him up on it he just came back with another rude message. Don't let this guy ruin the excellent work you are doing.

    • @AutomaticCSS
      @AutomaticCSS  5 месяцев назад +1

      Thx I’ll review the thread.

  • @RobSaville
    @RobSaville 5 месяцев назад +2

    Excellent video as always Kevin 👍🏻
    Anyone who’s hand-coded HTML & CSS websites should understand the power and benefit of a class-based workflow. Also, how important solid class naming conventions like BEM are, in boosting future maintenance and scalability of a website.
    At least I’m not the only old-school web developer who cringes when a page builder focuses on styling completely at the ID level 😞
    To anyone newer to building websites, take Kevin’s advice here, because you’ll be glad you did later on 😉

  • @NotAddicted1981
    @NotAddicted1981 2 месяца назад

    The end, renaming the BEM classes and why/when it is possible or not made me go like...aahhhhh. Thanks for your unrelenting drive to teach us stuff

  • @tjveach
    @tjveach 5 месяцев назад +1

    Thanks Kevin, I had to watch it twice, think it thru, and now trying it

  • @davidwalls2304
    @davidwalls2304 5 месяцев назад

    Great video. I learned the BEM approach when starting with ACSS 2.x and through your prior videos. I'm loving BEM now and wouldn't shy away from using it.

  • @Testfortest142
    @Testfortest142 5 месяцев назад

    Happy Birthday Kevin, your content means the world to me,
    Ferdi

  • @stphnmwlkr
    @stphnmwlkr 5 месяцев назад

    Great video for easily explaining why class-first design is best.

  • @LupusDesign
    @LupusDesign 5 месяцев назад +1

    Another excellent video. I also think you should make a video on BEM. It took me a while to grasp and I'm still learning. ACSS is "magic"! Thanks Kevin for all your videos, each one a gem!

    • @jzajzz
      @jzajzz 5 месяцев назад

      Page Building 101 lesson 08 ..there is also a 2 year old video called BEM 101

    • @AutomaticCSS
      @AutomaticCSS  5 месяцев назад +1

      I already made one. It is linked in the description.

  • @danieljohansen8232
    @danieljohansen8232 5 месяцев назад

    Thank you for being a great contributor to the landscape of web :)

  • @eucalyptech
    @eucalyptech 4 месяца назад

    Fundamental workflow so well explained, thank you Kevin 😉

  • @jmcbade2960
    @jmcbade2960 4 месяца назад

    The KEY to successful Auto BEM and understanding how to use it correctly starts at 36 mins into the video. This was the fundamental understanding that makes everything make sense for me. Don't miss this detail!

  • @AndreSalata
    @AndreSalata 5 месяцев назад

    another fundamental and essential video! Thank you, Kevin.

  • @twanpeeters8446
    @twanpeeters8446 Месяц назад

    Minor feature request, but it would be great in the future if we could change the default Lorem Ipsum text somewhere to something custom! So you can change it into your own language or get default Lorem Ipsum

  • @Ryanryizyiz
    @Ryanryizyiz 5 месяцев назад

    Fantastic video 🙌👏

  • @UmerFarooq-ug1qt
    @UmerFarooq-ug1qt 5 месяцев назад

    Great Approach, Thankyou !!!

  • @Ryanryizyiz
    @Ryanryizyiz 4 месяца назад

    Revisited this video last night, and found more value out of this video than when I initially watched it. Getting the grasp of BEM + AUTOBEM, you mention in this video that we should only BEM when a block has elements, which makes sense obviously.
    But when playing around with various Frames templates, I have noticed that the entire header has been BEM'd, even those without immediate elements in the block? Is this an exception? Can you push me in the right direction please, trying to push myself with consistency!
    The above also applies for the latest template released, the entire thing is BEM'd:
    Feature Card Chicago (CSS) [BLOCK NO ELEMENTS WITHIN JUST BLOCKS]
    Content Wrapper [BLOCK]
    Media Wrapper [BLOCK]
    Thanks Kevin.

    • @AutomaticCSS
      @AutomaticCSS  4 месяца назад

      Feature card Chicago is all elements inside the block …

    • @Ryanryizyiz
      @Ryanryizyiz 4 месяца назад

      @@AutomaticCSS But Feature Card Chicago (CSS) doesn't have any direct elements within it?
      Only 2 other blocks (content wrapper & media wrapper) which have elements in, so they're BEM'able right?
      From watching this video I was under the impression we only BEM Blocks with elements directly within said block?
      Sorry for my noobiness, still navigating the basics, I'll rewatch again tonight.

    • @AutomaticCSS
      @AutomaticCSS  4 месяца назад

      @@Ryanryizyiz No, it sounds like you're not understanding the concept of blocks and elements in BEM. "Block" doesn't literally mean Bricks' "block element." The overlap in how builders name things is confusing -- BEM is a separate concept from what Bricks is doing with their "block element."
      Make sure you watch all my videos on BEM.

  • @TheRulesLawyerRPG
    @TheRulesLawyerRPG Месяц назад

    Hi, i notice that the first container "New Intro" has a BEM class, but that its immediate children Left and Right dont have classes here. Rather, the container's grandchildren do.
    I originally thought that we only look at the immediate children. Any comment on this and what is best practice would be appreciated. Thanks!
    EDIT: in the next video you have a BEM structure where you have BEM names for children, grandchildren and great-grandchildren (child Inner with its own children Content Wrapper and Media Wrapper which have elements as children). Am i mistaken that you say in PB101 that you want to avoid grandchildren/more levels than two? And are there situations where we want to give BEM classes where there are child containers? And why do we want to avoid that in the first place?
    Thanks for your vids!

    • @AutomaticCSS
      @AutomaticCSS  Месяц назад

      Everything in a Bem situation should have a class

  • @lucianpascu8445
    @lucianpascu8445 5 месяцев назад

    Thank you Kevin!

  • @whatznext28
    @whatznext28 5 месяцев назад

    Thank you for making this video! I was getting too granular with naming based on section then block and element so if I wanted to use the block in another section the class name no longer made sense because the section wasn't aligned.

  • @funnelsystems
    @funnelsystems 3 месяца назад

    Great video Kevin! Just to confirm I understand correctly, the ACSS utility classes should primarily be used on sections/blocks/elements... just not on blocks with elements that we plan to duplicate and use multiple times across the site, correct? Otherwise we end up with situation #2? Instead, if we have a block with elements we plan to use over and over, we create a BEM class for that block and then style it using the ACSS variables so that any changes to that replicated block with elements are efficiently handled in an instant site wide... correct?

  • @montaguemonro565
    @montaguemonro565 3 месяца назад

    Curious question, if custom class is the way to go then what use-case is there for the utility classes? Cheers :)

    • @AutomaticCSS
      @AutomaticCSS  2 месяца назад

      They’re helpful for a lot of things

  • @PhilDodici
    @PhilDodici 5 месяцев назад

    The best solution would be the possibility to import the utility class into the Custom classes, in the BEM approach. What do you think?

    • @AutomaticCSS
      @AutomaticCSS  5 месяцев назад

      That's not really how CSS works.

  • @jeffbarnhart6441
    @jeffbarnhart6441 4 месяца назад

    sorry to ask this question here, but I'm confused about acss, coreframework, and advanced themer. are they similar, related in some ways, or totally different?

    • @AutomaticCSS
      @AutomaticCSS  4 месяца назад

      They’re all very different. AT is a builder tweaks add on, not a framework. Core is a bare bones framework leaving you with a lot of work and thinking to do. ACSS is ready to go out of the box and has everything you need to do your work.

    • @jeffbarnhart6441
      @jeffbarnhart6441 4 месяца назад

      @@AutomaticCSS thanks

  • @thorsten-roever
    @thorsten-roever 5 месяцев назад

    Thanks

  • @LonaldBruhn
    @LonaldBruhn 4 месяца назад

    At 1 11:20 - not just where these cards are in relation to an agency that built the theme, but also any other freelancer or agency that takes it over and decides to use a different theme or build out a completely custom theme or maybe even a different platform. This would be a nightmare and have to be done again from scratch.

    • @AutomaticCSS
      @AutomaticCSS  4 месяца назад

      What’s the question?

    • @LonaldBruhn
      @LonaldBruhn 3 месяца назад

      @@AutomaticCSS Sorry, there was no question I was just agreeing and adding to the conversation where it would present other issues if went about doing the chump way lol

  •  5 месяцев назад

    How did you get the bricks elements to show as a list😲

    • @dovber
      @dovber 5 месяцев назад +1

      Acss new feature

    •  5 месяцев назад

      @@dovber Is it realy?

    • @dovber
      @dovber 5 месяцев назад +1

      yes version 3.0

    • @stphnmwlkr
      @stphnmwlkr 5 месяцев назад +1

      ACSS 3 > Options > Bricks Enhancements > Stack the 'Add Elements' Panel.

  • @djkasperg
    @djkasperg 5 месяцев назад

    It's all great until you wish to add another element to the card.

    • @AutomaticCSS
      @AutomaticCSS  5 месяцев назад

      That’s why we need components and why I’ve been fighting to get them added as a feature for years. That’s not something a CSS framework can help with.

    • @djkasperg
      @djkasperg 5 месяцев назад

      @@AutomaticCSS Agreed. 9 months and still counting since that preview. Better be good 😃

  • @kevinroberts3789
    @kevinroberts3789 5 месяцев назад

    Where can I find the syntax reference for the @ipsum shortcut (or is @ipsum-short the only option)?

    • @AutomaticCSS
      @AutomaticCSS  5 месяцев назад +1

      All the available shortcuts are in the cheat sheet. Ipsum-short is the only ipsum for right now. More to come.