Utility Classes vs Custom Classes: How to Build Maintainable Websites Like a Pro

Рет қаралды 9,110

Күн бұрын

There's a clear line between good web devs and great web devs. If you want to elevate, this training should be a mandatory watch.
This was a highly requested training and it's been a long time coming. I've shown parts of this topic in various different videos, but it truly does deserve it's own in-depth video.
It's long, but it's *essential*, and it's littered with really important best practices throughout. If you invest the time in understanding these prices, it'll make you tremendously more valuable to your clients and to your team.
Automatic.css - automaticcss.com
Inner Circle - digitalambition.co/inner-circle/
Frames - getframes.io
What's covered in this training:
- Utility classes vs custom classes
- Why sites should NOT be built purely with utility classes (or styled at ID level)
- How to decide on utility classes vs custom classes for each section & component
- How to incorporate BEM methodology in a real build while using a utility framework
- Why "classless" copy/paste builders are a bad solution
- Classes vs "presets"
- An introduction to "contextual utility classes/variables"
- Global components vs global sub-components
- How to create your own CSS variables
- When to use a utility class grid vs a custom grid
- How to use modifier classes for global components to account for variations
- Why you should care more about maintainability and scalability than dev speed
- Many more best practices tidbits
Is your page builder legit? Watch this: • Is Your Website Page B...
Happy to answer any follow up questions in the comments!
0:00 Intro & Context
04:22 Example Site
05:33 Why You Shouldn't Style Everything With Utility Classes (Or ID)
08:36 Building a Maintainable Hero Section
16:58 What Are Contextual Utility Classes
19:55 How to Make Variables
23:22 Global Components vs Global Sub-Components
30:31 When Are Utility Classes Appropriate?
37:23 Great Dev Isn't a Race
40:28 Using a Variable vs a Random Value
41:49 Creating a Maintainable List
47:06 Maintainable Signature Card
53:59 Maintainable Section Introduction
55:34 BEM Modifiers for Custom Classes
1:00:00 Utility Class Grid or Custom Grid?
1:07:50 Creating a Maintainable Card
1:18:11 Wrap-Up

Пікірлер: 140

@Gearyco Жыл бұрын

I know it's long. I talk a lot because there's a lot to cover. I show a lot because there are a lot of details and different scenarios. Trust me: if you invest the time and really digest it, you'll be a way better developer. Comment and let me know what your biggest takeaway is. Also, I'm happy to answer any follow up questions you have!

@websquadron Жыл бұрын

Nice one

@emadhosen Жыл бұрын

Yes it’s long and you talk a lot BUT please make it always long and always speak a lot because the value you are offering insanely cannot be boring

@wpclassroom1085 Жыл бұрын

@@emadhosen Very True💯

@estaschoeman5256 Жыл бұрын

Using custom classes with modifiers is something that I knew I should use but was not sure how to use it. Thanks Kevin for the time and effort that you put into the community.

@techfairyrina Жыл бұрын

I found Kevin's channel 1 year ago. As for now I am in Inner Circle, using utility and custom classes during my web development work. I get clients with much higher check then before. What can I say? :) This channel is GOLD! Thank you so much, Kevin, for what you are doing :)

@Gearyco Жыл бұрын

🙌💪🏻 great job taking action! That’s the most important part.

@kareem2928 Жыл бұрын

Finally, I've asked you personally about this more than once! It's here and more significant than before ^__^. Thank you, Kevin.

@AmandaLucaseu Жыл бұрын

Loved the video Kevin - especially about the pseudo inset shadow !

@bridiemacdonald9436 Жыл бұрын

Kevin - thanks for all of this. Finally getting the hang of it.

@phillcoxon Жыл бұрын

Amazing. Thank you! I learned so much following along.

@fredchams1052 Жыл бұрын

I can't say more than you spread love of the work well done. I always love your videos (and products) for that. Every time I watch your videos, every time I learn something!

@Gearyco Жыл бұрын

🙌

@youtubecuaphu Жыл бұрын

This is the most informative Bricks video I've seen. I watched it from start to finish and hope there will be more Dev tutorials with Bricks like this.

@Gearyco Жыл бұрын

Many more to come!

@Z1PP Жыл бұрын

Thank you so much for providing us with excellent instructions and fundamentals in a concise and great way. You already have me hooked with Automatic and Frames.

@Gearyco Жыл бұрын

You're very welcome!

@randyluna551 7 ай бұрын

59:02 "one way ticket to chumpville" 🤣😂🤣 Not only is the training and teaching you provide incredible but you are seriously fun and funny to listen too.

@Gearyco 7 ай бұрын

Thank you 🙏

@RMSAnalyst Жыл бұрын

Another amazing 🤩video Kevin! Your videos are diamonds!💎

@captteemo9133 Жыл бұрын

OMG you uploaded exactly on the day I had my figma prototype finished and wanted to start but didn't know what to use where etc. Thanks a lot 😄👍

@mario312 Жыл бұрын

"you gonna have to have this whole conversation like a chump" I'm totally t-shirting this, adopting it as my slogan

@andreavocaturo3448 7 ай бұрын

Thanks for the amazing content Kevin! I discovered your channel recently and it has been a godsend. I am a newbie at this but I am confident that I can become good at it by simply following your methodology. You are a technical wizard and an incredible teacher. I love your commitment to teaching us the right way to do things. You are the only source of truth brother. I am so happy I discovered your channel so I could stop watching all the chumps out there who are spreading ignorance around. Thank you so much for everything that you are doing man!

@Gearyco 7 ай бұрын

🙌🙌

@chrisfoti1123 Жыл бұрын

Another great video, extremely helpful. Thank you!!!

@davidwalls2304 Жыл бұрын

Kevin, watched the video twice and will probably watch it at least a few more times to make sure I absorbed everything. First off, I'm tired of being a "chump" and appreciate the suggestions to make life easier moving forward. On a side note, I enjoyed the "screwed the pooch" and the "up the creek without a paddle" phrases. They definitely add color to the video. Thank you for his overview. I'm new to ACSS and wondered what the difference was between utility and custom classes. This video provided a great explanation.

@Gearyco Жыл бұрын

Thanks for the kind words. Happy to help!

@captteemo9133 Жыл бұрын

Amazing, another Tutorial in Bricks, love that builder so much 🔥

@itspraveensharma Жыл бұрын

Awesome video, content is Gold. Period

@Gearyco Жыл бұрын

Appreciate that

@mayanikolova8353 Жыл бұрын

Brilliant, the best content, thank you

@vaniarensi7627 Жыл бұрын

Thanks, that was one of the questions I had about ACSS 🙏🏻 (Bob Ross🤣) And for everyone still thinking about joining or not the Inner Circle.. just do it, it’s super worthy

@wpeasy Жыл бұрын

Dude. definitely not a chump :) Love the presentation and the focus on consistency

@rebelinc Жыл бұрын

Damn Kevin, so inspiring. Just had an Elementor site handed from a pro developer and had to create a few pages and incorporate ACF. Was a nightmare to match the layout coming from Bricks and ACSS. Keep those Golden Nuggets coming.

@Gearyco Жыл бұрын

🙌

@LDStevenFrench Жыл бұрын

Loving your work

@Gearyco Жыл бұрын

🙏

@AldeaCMS Жыл бұрын

Pure Gold man! I came from Elementor to Bricks, and your video is amazing! I know is not abour bricks, but you understand what I mean. I want to join your Inner Circle! :) Is late right now in Chile, but tomorrow I will! Thank you so much!

@Gearyco Жыл бұрын

Would love to have you!

@andrew.schaeffer4032 Жыл бұрын

Thanks! utility classes -> for super basic structure, or stuff that doesn't repeat. Custom classes -> for when stuff repeats. I was surprised to see the text move down when you applied margin bottom to the ::before pseudo element (I think it was the first accent one with the bar above the text). Always thought those pseudo elements were position absolute and outside the flow of the document.

@dahunsi Жыл бұрын

And the train keeps moving. I read comments before commenting so that I will not repeat things, but I have to. If you are not a part of the Digital Ambition Inner Circle and you 'think' this tutorial is 'GOLD', then .... Kevin, I like the way you broke things down and made reference to your other tutorials to catch up on some things. It would be nice if links to the tutorials referred to are listed (just suggesting). Another GR8 one. Thanks a lot.

@Gearyco Жыл бұрын

I think I did list the main one I mentioned ... 20 features for legit page builders. What was the other one I mentioned? Sometimes I forget.

@Danishevskiy Жыл бұрын

Awesome! Thanx a lot

@collectiveunconscious3d Жыл бұрын

Great video, the first of its kind I've ever seen lol. Most videos on page builders are affiliate marketers and not actual web designers I bet (like a chump, haha)

@kappesante Жыл бұрын

when one thumb up is not enough you can always hope to find the same video in the sibling channel, and finally give the deserved multi-like.

@Gearyco Жыл бұрын

I appreciate it!

@nikoweb Жыл бұрын

Nice! Joining Inner Circle was best invest I've made in a long time. :- )

@Gearyco Жыл бұрын

🙏

@nikoweb Жыл бұрын

@@Gearyco when Frames will be released? Missed the "early access" and can't wait to get it to my hands! 😵

@Gearyco Жыл бұрын

@@nikoweb We're waiting on some things with Bricks related to proper licensing and access.

@stripedgoat8470 Жыл бұрын

Awesome. So this was like a wrap-up of all the general best practice approaches. I will definitely start utilizing contextualized utility classes/variables. That's the only thing I wasn't doing from this entire tutorial, and I learned everything from you! 🙏🏼 P.S: I also noticed that setting the html tag to 'figure' is disregarding border-radius. Why is that? UPDATE: I went looking into it, and figured it out myself. So basically figure places the image into another box. We have to use a css line to target the actual 'img' to apply the border-radius (.your-custom-class img {border-radius:var(--radius-s);}), as once you set your html tag to 'figure', Bricks isn't targeting the image any longer, but the figure itself.

@Gearyco Жыл бұрын

Right, but there's a different workaround according to Bricks. I believe it has to do with setting overflow to hidden. I just couldn't remember what it was when I was recording.

@MariuszNowak300 Жыл бұрын

@@Gearyco Yep. IMAGE / Style / Misc/ Overflow: Hidden

@uioverhaul Жыл бұрын

Kevin. Excellent presentation. I say this as someone who disliked ACSS at the beginning. But you could also add 2 more color shades damnit! Haha. Great content dude. Keep it up.

@Gearyco Жыл бұрын

A couple shade changes coming soon.

@bluetheredpanda Жыл бұрын

Thanks for the video Kevin, it's great as always! I believe I have a pretty good instinct when it comes to utility vs. custom, but I’ll have to rewatch it a few times to really grasp the “rules” you’re using to determine this. From what I saw: - Every time it’s a global element or component that’s likely to be reused throughout the site, use a custom class. - When it’s a basic layout, that’s not going to be reused exactly (ie. layout for a page section, the content of which would be unique to that page), utility classes are okay. - For both, use variables for consistency, and ideally contextualized variables. ➡Is that correct? Also, follow-up question: you mentioned a training on doing cards the right way, in both Oxygen and Bricks. Is that in the Inner Circle? Because I found the Oxyegn one on this channel (actually 2 of them, most recent being kzfaq.info/get/bejne/ecqmqbeZyMy6fmQ.html) but not the Bricks one. Or is that the right one? Thanks,

@Gearyco Жыл бұрын

Correct. And there are 3-4 card tutorials on the channel. Two in Bricks.

@bluetheredpanda Жыл бұрын

@@Gearyco Is this one of them? “How to Properly Add & Query Service Pages With Bricks (CPT + Query Loop)” (sorry to be a pain, just want to learn everythigng I can 😅)

@EduwareIzekor Жыл бұрын

Don't be a Chump! Put it on a shirt! This video is mandatory to watch :) This was a good one.

@ocbroadband Жыл бұрын

The 'Classless Builder'. Isn't that an ironic statement of which we know which one it is referring to. Touche! lol Great video Kevin as always.

@Gearyco Жыл бұрын

It has a nice ring to it.

@emadhosen Жыл бұрын

it did not only click for me, but it smashed me. I don't think there is a need to follow other YT Channals after watching this top level tutorial. Thank you very much for the tutorial Kevin. Are there going to be more like tutorials?

@Gearyco Жыл бұрын

For sure!

@antomariantisna530 Жыл бұрын

Templating is a beast! Most designs will use the same structure, so using templates will speed up the process

@Gearyco Жыл бұрын

For sure, but that’s a different topic.

@nielstieman9594 Жыл бұрын

Love the video! One question: You are writing a grid. ACSS has grids as well. Why didn't you use those classes?

@Gearyco Жыл бұрын

I explained it. Because some grids you need to have global control over their structure and spacing. So you can’t use utility classes.

@PswACC Жыл бұрын

The Bob Ross reference was great and mentally soothing. lol

@akivamajowka5742 Жыл бұрын

Hi kevin, great video! Im sorry to be a bit out of topic, but i really wanted to ask you if you can make a video on the best approach to translate websites built with Bricks Builder and specially how to create left-to-right designs that convert to right-to-left (like Arabic and Hebrew) when the second language is selected. I've been struggling with this for a while.. it would be incredible to see such a tutorial from you, Thanks in advance

@bluetheredpanda Жыл бұрын

Hey @Akiva! I don’t know what Kevin’s answer to this question is, but what I’ve been doing lately to translate websites is that I use Polylang to handle the different languages. What’s great about this is, it lets you duplicate your pages / templates, and serve the appropriate one to your visitors based on the language of the site they’re viewing. This means, you could make any necessary adjustments for each language (aside from LTR / RTL, sometimes a layout may need to be adapted, because English is quite the terse language compared to most others, especially when compared to ie. German). It’s even better if you’re using logical properties for your paddings, margins, etc. instead of directional ones. That would be using `{text-align: end}` instead of `{text-align: right}`, `padding-block` and `passing-inline` instead of `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` (this is something I’ve seen Kevin do in a few trainings). See this superb guide by Google for more info: web.dev/learn/design/internationalization/ Not only is it cleaner, more future-proof code, you’ll have much less work to do if working this way. I’m pretty sure by combining these two techniques, you can knock your localized websites super fast, and with awesome results! 🙌 Please let me know if this helps or if it's not enough, it‘s a topic I’m also interested in.

@mubindidit230 Жыл бұрын

Finished watching the whole video without skipping for a single second. Pure value. I am super motivated to take the time and setting up the workflow to organize classes. I have a question? How is the Gap var s,m,l getting the spacing with any value? I mean in the wpcodebox you have not setup any value (like: 2em, 3em). Is this pulling from ACSS 🤔

@stripedgoat8470 Жыл бұрын

I'm not Kevin, but I can answer your question (he probably forgot it). Yes, the ACSS variables have their values pre-set in the framework code itself. Often times they're not exact values (such as 2 or 3em), but clamp and other type of calculated values -- so they're perfectly responsive.

@mubindidit230 Жыл бұрын

@@stripedgoat8470 Thank you so much for the help 😊

@simonepagnini6735 Жыл бұрын

I love your tutorial...Thanx!!! After I watched the other about grids with Oxyninja, Automatic css... what would you suggest, which is the best to use? :)

@Gearyco Жыл бұрын

I built ACSS to fix all the limitations I ran into with OxyNinja. ACSS is far more flexible and powerful.

@mlememe9541 Жыл бұрын

I was wondering where responsiveness of heading size is being controlled from? Its size scales when you adjust the width od viewport

@Gearyco Жыл бұрын

automaticcss.com

@grassyandris Жыл бұрын

Hi Kevin, Can I add the grid snippet to the bricks-settings-custom code section? Unfortunately it doesn't work for me. I also tried it for the child theme. Your videos are super helpful! Thanks!

@Gearyco Жыл бұрын

Get WPCodeBox :) it’s worth it.

@martinwessel7137 Жыл бұрын

Hi Kevin - love your work and dedication to learn us "smucks"... Regarding your service cards, you're saying to not use utility classes because you might use the same cards on other pages. I have some sections I use on multiple pages of a site, but I just saved as a template, and used the template element to show the same. Any changes needed is done on the template, and then it's published througout the page. Is the template element a bad idea ?

@Gearyco Жыл бұрын

I can’t really say for sure without looking at it.

@isaurasotoca Жыл бұрын

Hi Kevin 😊 Nice tutorial, as always! One question: when would you recommend using figure tag on images?

@Gearyco Жыл бұрын

Most situations. I’ll have to do a video.

@isaurasotoca Жыл бұрын

@@Gearyco That'd be great! 🥰

@ZachariahWiedeman 10 ай бұрын

I'm addicted to your videos, man... Would there be any good reasons to place a heading accent beneath the heading in HTML for web crawlers and then styling it to visually appear above the heading? Or am I overthinking this?

@Gearyco 10 ай бұрын

That’s exactly what we do in all our frames. Our accent heading class has order -1 on it so it’s always first, but it comes second in the DOM after the heading.

@mihaiandrei97 Жыл бұрын

You can hold CTRL + click for multiple cursors. Weird, as I'm used to ALT + click, but at least it works.

@Gearyco Жыл бұрын

Ah, good to know.

@tony.keller Жыл бұрын

@DigitalAmbition, before I join with ACSS/ Frames, I really wish to know what are your views on generatepress generateblocks coupled with a codeblock component solution such as dplugins scripts organizer vs ACSS with Bricks. Thanks a lot for your input so far.

@Gearyco Жыл бұрын

Not robust enough IMO.

@randyluna551 7 ай бұрын

Hey Kevin, at 32:04 why are you putting blocks in each column and not Divs? Is it because, like you said, you don't want Divs just floating around? Also, at 36:20 is there a difference between Utility class codes and Custom class codes......are there two different cheat sheets?

@Gearyco 6 ай бұрын

Blocks and divs are the same thing, but blocks are display flex and 100% width by default. It's one less step to have to set their display to flex. Yes, utility classes are pre-made classes in the ACSS library that do very specific things. Custom classes contain a group of styling instructions for a very specific context. Watch this: kzfaq.info/get/bejne/Z7ObqMJ3sZmVcps.htmlsi=t8ikfB_VzAFgPLzh

@emailjough Жыл бұрын

Maybe if you copied the text from the DOM instead of from the front end where its been styled with CSS you'd discover that the text was not entered as uppercase. Pro tip for the Pro.

@thebizpixie Жыл бұрын

Now that I've watched a ton of your videos, and I'm starting to get the hang of this approach, I find myself wanting to use utility variables for pretty much everything - whether that's in a BEM class (for reusable components) or by ID (for one-offs). My question is, when, if ever, would it make sense to use a utility class over a utility variable?

@Gearyco Жыл бұрын

If using a variable at the ID level, it’s probably better to use a utility class instead.

@thebizpixie Жыл бұрын

@@Gearyco Would you mind clarifying why - or when - one is better than the other? I don't seem to have quite grasped that piece yet.

@wingtracer Жыл бұрын

Kevin - I'm trying to use your frames hero alpha, and there's too much padding to suit me as set in var(--fr-hero-padding). You say not to edit utility classes or contextual utility classes in this video, but here this is a variable. Do we just need to not use your variables if we don't like the styling of those, and instead create our own new variable? I'm starting to understand the classes better with all the videos (and this one especially), but what about adjusting variables? Any vids on that?

@Gearyco Жыл бұрын

“Contextual utility classes” can be edited. That’s the difference with those. In fact we let you edit those from the ACSS dashboard. Look under the frames tab.

@wingtracer Жыл бұрын

@@Gearyco I jumped over to the frames tab, and saw Hero Padding pointed to an ACSS variable. First, for my proper understanding.... is that "--fr-hero-padding" inside of "var(--fr-hero-padding)" considered a class, a variable, or is that one and the same? Second - do we ever edit the ACSS variables, or instead just find a variable that works more to our liking?

@Gearyco Жыл бұрын

@@wingtracer it’s a variable. Just swap it with a new variable like one of the section spacing variables: var(-section-space-m) would match all your other sections. Or you can use a calc as well.

@wingtracer Жыл бұрын

@@Gearyco goti it. Thanks.

@mubindidit230 Жыл бұрын

🫡 to you Kevin for this amount of hard work. It is a pure 💎 Gem! Going to continue watching it

@Gearyco Жыл бұрын

💪🏻

@weili6126 Жыл бұрын

Learning 😊😊😊

@deskman Жыл бұрын

If it is clicking? Yes, it is. And it keeps clicking. So thanks for the click - now heading over to my own sandbox to try this out. Thanks.

@klokkerholm1993 Жыл бұрын

Where is it best to be hooking in to margin-top--s and all these spaceing classes?

@Gearyco Жыл бұрын

Can you ask a different way? Not sure I'm understanding exactly what you're asking.

@reneklokkerholm1453 Жыл бұрын

@@Gearyco Sure when should u use spaceing class direct on elements or wrappers to space out a design ? your way in the video you input the spaceing class direct into a custom class with a variable ? i was just wondering

@JanWessels Жыл бұрын

Kevin could you show more Bob Ross instruction video's! 🤣

@Gearyco Жыл бұрын

😂

@tognabologna7078 Жыл бұрын

Haha I had a good chuckle at "un-zoom-in...I guess that's called zoom out" :)

@Gearyco Жыл бұрын

Talking is hard.

@tognabologna7078 Жыл бұрын

@@Gearyco 🤣

@chrisparky Жыл бұрын

What is an alternative to WPcode BOX? just need to add that CSS

@Gearyco Жыл бұрын

You can add it directly in bricks

@WannaBeMuzkant Жыл бұрын

I'm just wondering why you still use px when responsive design is already far ahead with .em, .rem units :)

@alexander-van-aken Жыл бұрын

You clearly didn’t watch the video :)

@Gearyco Жыл бұрын

Didn’t I say like 5 times in the video not to use pixels?

@alexander-van-aken Жыл бұрын

@@Gearyco it probably was even more 😂🥰

@WannaBeMuzkant Жыл бұрын

@@Gearyco sorry….i’m jumping forw-back ;))) Yes you did!! My mistake😜😜😜💪

@rookiesmarts Жыл бұрын

Just a suggestion... Can you add the word "bricks" in the video title.. it will help in youtube search for people searching the video

@Gearyco Жыл бұрын

The builder doesn’t matter all that much to this concept. This concept is true in oxygen and webflow as well.

@redefyned1353 Жыл бұрын

I did it all for the cookies

@keshavanand7 Жыл бұрын

25:40 could it be ? accent-heading , accent-heading--top , accent-heading--bottom

@Gearyco Жыл бұрын

For sure.

@braydenbernasek2494 Жыл бұрын

Personally I would do: eyebrow-heading heading sub-heading

@uioverhaul Жыл бұрын

@@braydenbernasek2494 What about: Eyebrow-heading Nose-heading Liptstick-heading 🤣

@julianmoreno6925 6 ай бұрын

Oh! all this top level education for free? what a chomp like be.. aghm.. man.. No seriously, thank you so much

@Gearyco 6 ай бұрын

You're most welcome

@mihaiandrei97 Жыл бұрын

FIRST

@gashumba888 Жыл бұрын

Is Oxygen tutorial over???

@Gearyco Жыл бұрын

Mostly? Unless they do something relevant in the future.

@gashumba888 Жыл бұрын

@@Gearyco 😯

@AdamJHumphreys Жыл бұрын

Oxygen is a dying platform we all had high hopes for.

@gashumba888 Жыл бұрын

@@AdamJHumphreys Well, the problem with these "all you can eat" billing companies is that after the initial growth, they all plateau at some point. Bricks will fall into the same problem as Oxygen unless it can continue signing up new users every year. The likes of Microsoft, Adobe and Apple have perfected the subscription model. It is the only way to continue to innovate while still growing the company. If Oxygen dies completely, I will move to something like Webflow instead.

@christophheine4725 Жыл бұрын

I don't think classes are the right thing to use. Classes are so 90s... I like presets, though 🤣

@Gearyco Жыл бұрын

You’re not helping my blood pressure

@christophheine4725 Жыл бұрын

@@Gearyco You know what could be helping? Breakdancing 😂

@wingtracer Жыл бұрын

i routinely drink coffee in the morning and watch Kevin's vids waiting for his hidden nuggets of head-shaking moments that get me loling. @26:16 Learn More 🤡