ACSS 101.12: The Official ACSS Workflow (BEM + AUTOBEM)
HTML-код
- Опубликовано: 2 окт 2024
- There are essentially three workflows that people use with page builders:
1. ID Styling (01:00)
2. Utility-First (11:28)
3. Custom Classes (Official Approach - 19:27)
This video will show you the pros and cons of all three, and teach you the officially proposed workflow (Method #3 using BEM and AUTOBEM).
Here are some additional videos to help you go deeper on this topic:
BEM 101 - • BEM 101: How to Make W...
Utility Classes vs Custom Classes in ACSS - • Utility Classes vs Cus...
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco
![FendiDa Rappa - Clock Dat ft. Shamar Marco [Official Music Video]](http://i.ytimg.com/vi/3NBU8KHdxYY/mqdefault.jpg)
Thanks Kevin, I had to watch it twice, think it thru, and now trying it
Happy Birthday Kevin, your content means the world to me,
Ferdi
🙏
Thank you for being a great contributor to the landscape of web :)
another fundamental and essential video! Thank you, Kevin.
Bookmarked! I'll return here after work. Because when Kevin is in a video, it must be watched.
Okay. I watched it! And as always, marvelous!
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 😉
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.
Thx I’ll review the thread.
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.
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
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?
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!
This is a great system. Would it not be better to create an element for the card though? Can Acss add an element creator? That would be so much more powerful. I know they can be made in Bricks but it's a faf and Pionet Element Builder is now broken. That had the functionality until the latest update
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.
Glad it was helpful!
The best solution would be the possibility to import the utility class into the Custom classes, in the BEM approach. What do you think?
That's not really how CSS works.
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!
Page Building 101 lesson 08 ..there is also a 2 year old video called BEM 101
I already made one. It is linked in the description.
Curious question, if custom class is the way to go then what use-case is there for the utility classes? Cheers :)
They’re helpful for a lot of things
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?
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.
@@AutomaticCSS thanks
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.
What’s the question?
@@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
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.
Feature card Chicago is all elements inside the block …
@@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.
@@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.
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!
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.
Thanks
Fundamental workflow so well explained, thank you Kevin 😉
It's all great until you wish to add another element to the card.
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.
@@AutomaticCSS Agreed. 9 months and still counting since that preview. Better be good 😃
Great video for easily explaining why class-first design is best.
Great Approach, Thankyou !!!
Fantastic video 🙌👏
Thank you Kevin!
How did you get the bricks elements to show as a list😲
Acss new feature
@@dovber Is it realy?
yes version 3.0
ACSS 3 > Options > Bricks Enhancements > Stack the 'Add Elements' Panel.
Where can I find the syntax reference for the @ipsum shortcut (or is @ipsum-short the only option)?
All the available shortcuts are in the cheat sheet. Ipsum-short is the only ipsum for right now. More to come.