I did.. Coursy? Coursy?

as always so useful, but I have a question not entirely related. How could one get around having to get the back-end done yourself, and instead just have e.g. an email submission form made with an API? Could that be possible? If so how? Because I actually built a sort of fully-blown html and css project with different urls but my goal for this website is for it to get people submit their email to apply and stuff, but that would require some kind of back-end. Would it not? Hope I explained myself clear enough, sorry if not. Thanks again!

@@lucianoramirez6525 Yes it does require some backend if you want people to sign up to apply for something. If you just want a contact form that sends you a user message from your website, its very easy to do.

It's live sass compiler, not compilation i guess 🤭

Had to subscribe. Thanks.

lolol

😂

me reading your comment: specifi-kitty...dammit

wtf😂

It's the Auto Rename Tag plugin that's doing that

@@1997matthew I know I'm just mad he didn't notice lol

You got mad at that... I got mad at calling Underscores (_) as Hyphens (-) and Hyphens as Dashes >.

I was about to raise my hand and tell him that, thought it was a real-life lecture .

@@1997matthew thanks

The second was was him saying "a little bit more complex than this".

Vue has that too. It is so convenient

@Angelo Stevens overkill is a feature not a bug

@@diablo.the.cheater 😂😂

Do you guys mean “scoped”?

Kazu: which IDE? i thought most had a hotkey to select by free text search. I use vscode and I use cmd+d to select any string by free text search

What do you mean by arbitrarily long? In BEM the idea is you can only have a single level: card__header is ok but card__header__title or card__header__title__icon is banned

@@BenRangel I'm talking about double click text selecting, not hotkey. Some don't see cohesion of a string like "abc--xyz". Having class="button button--state-success" creates a larger filesize in HTML than class="button success". In CSS it's the same. .button-state-success are more characters than .button.success and therefor results in a larger filesize.

@Angelo Stevens yeah file size is like the last reason i would worry when dealing with BEM and CSS

Why not both? I’ve recently started using a combination of utility classes for shared styles and BEM for unique styling. It seams to be working well so far.

So true about it being long.. Sometimes I myself would forget what was the modifier I used.. 🤣 Then I'd have to browse through the entire HTML file looking for what I need to work on..

@@ead5590 or sometimes you can have similar classes 🤣 Especially, when your project as big as f...

@@rogaldorn7016 Definitely. That's very possible. And that is probably one of the reasons why we use stuff like BEM so that we don't have such issues. Then again, it's a matter of preference. If someone would like to use methodologies such as BEM or not, it's clearly up to the Developer.

Why would you have one element be both "main__card" and "card__heading"? That doesn't make sense. Either it's a card or a heading for a card. Not both at the same time.

@@BenRangel yah, my bad. It should sound like "card main__card main__card--active"

When using the bem metodology properly, you shoul always refer to the one main block element and go only one level deep.. I personally would rather use here a class like card__list-element. Hope it makes sense

@@thmscz7707 Ah that makes sense. Thanks for explaining!

I like the fact that you follow JetBrains :)

Why is that? What's the benefit?

Andi Rady Kurniawan if you’re using scss, which will definitely help you a lot, this Bem makes it easier. You can type .menu and in scss the „&“ character selects it again but you can add something. So for example if you have a list in your menu which has the class „menu__list“ you can just type in the menu css: &__list (.menu__list). And that with several items. It just helps you a lot and organizes everything

@Library Content Yeah, me as well! The nesting of SASS makes it all look very clean and easy to modify.

Tailwind is framework tho, this is just methology

@@Arttyor That's right, but it removes the necessity for using a naming methodology, at least when you follow the similar process that Adam Wathan (Tailwind's author) does.

🙏❤️kzfaq.info/get/bejne/otN5qrx9q7--aYk.html❤️🙏

I can't even say that. And I want to punch whoever came up with the term.

@@DesignCourse Haha, no worries, mate! Great tutorial regardless. Thanks for taking the time to make it for us!

Haha was just about to post this

Actually it's speficitify, everyone knows that

@@DesignCourse "Specificness" -- much easier to say. It's even in the dictionary! Apparently it has a slightly different meaning, though... although *I* think it's more accurate (i.e. more specific to what we are using it for) ;D

It ground my gears to much.

You can put the block into another block - it's allowed by convention

But, in this case, what is it? Block or element?

Just a typo ^^

Definitely an error

🙏❤️kzfaq.info/get/bejne/otN5qrx9q7--aYk.html❤️🙏

how do you know that name? SMACSS, OOCSS or maybe something thats never exists but actually exists?

@@sugiono2801 Sup man! Well I'd taken a Udemy course by Jonas Schmedtmann named 'Advanced CSS and SASS' course. Within that he mentions of these methodologies for naming the various classes. But he uses the BEM method during the course. It would be worth noting these methods because recently when I was browsing through job postings on LinkedIn, there are postings where they ask you to have a fair amount of knowledge about a specific method such as BEM.

🙏❤️kzfaq.info/get/bejne/otN5qrx9q7--aYk.html❤️🙏

specificity graph becomes crazy with that

When you will need additional style for particular image .card>img will not allow you to do that due to specifity codepen.io/sashabeep/pen/JjdGWJw

It's very confusing, I don't like BEM personally

I agree, plus they still need to replace class name in HTML, so will end up using searc-and-replace anyway. Which css methology do you prefer?

narkar: I like BEM as long as you’re not being needlessly strict about it and try to shoehorn it into every situation. We use utility-classes (like ”hidden”) in instances where the same behavior is reused often. I think it’s insane to use BEM classes for common features like that (for example using card-hidden and article-hidden if they both just set display:none) mostly use BEM mostly elements with many children. If an elem just has 1-2 children and no deep nesting I avoid BEM. ”article p” is fine. We use css preprocessor features where we think its most necessary. We avoid class name concatenation. But We use variables in cases where it make it more obvious how stuff relates to each other, especially for things like z-indexes. I hate seeing ”z-index: 95” , cause writing ”z:index: $popup-z-index + 1” is so much more understandable. We use variables to make sure we use standard measurements as often as possible like $padding-mobile and $padding-desktop but if something needs tweaking because of the font used we’re fine with doing an excepting and hard coding a pixel distance. We don’t use a grid-system for stuff like columns as we do a lot of different layouts for different pages and I think it’s much faster to write custom css for a rare case where we need 5 columns than to use bootstrap’s grid and hack some kind of 5-column-class. (But if we were building a more simple/cheap site that didn’t have time to do custom layouts we’d probably use more gris-systems)

@@BenRangel That is neat tip for z-index. Thanks. I like using display: grid for it's autoplacement. I dont use bootstrap's grid at all.