Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro section with dropdown navigation with HTML/CSS/JS

wavegate• 220

@wavegate

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


My CSS and HTML names are starting to get messy. What are some tools you would recommend to help with organization? I've heard of SASS/SCSS but haven't learned them yet. Are there are other strategies you have used yourself to help you keep things organized? Naming conventions? Using multiple CSS files, one for each component?

Community feedback

P
Kent O'Sullivan• 1,870

@12Kentos

Posted

Hey @wavegate,

Nice job on the project! SASS/SCSS Isn't necessarily for organizing, (although it can help with that) but rather it's a pre-processor, it essentially does things that css simply can't do and then gets converted to css.

A good way to help with naming things and keeping them organized is to choose a naming convention and practice it. The one that is pretty popular and I use is called BEM, here's a video by Kevin Powell, explaining a little what BEM is and why he uses it.

Kevin Powell BEM

Another one that I've head a bit about and is starting to get popular is CUBE

Here's another video by Kevin about CUBE (He even goes through step by step making the following project from Front End as an example.

Order Summary Component )

Kevin Powell CUBE

With all of that said, I would suggest researching some of the different ones, and picking one that makes the most sense to you.

lastly as for using multiple css files for different components. I would definitely suggest doing that, once you start using a pre-processor like SASS. It will make things more organized. I wouldn't suggest using multiple css files however, as you would need to link all of them into your html file.

That's one reason why a pre-processor like SASS is great, you can have 50 different SASS files if you want, and once they are compiled and converted to CSS it becomes one file, that way you only need to link the one file in your html.

I hope all of this makes sense?

Keep up the great work!

Marked as helpful

0

wavegate• 220

@wavegate

Posted

@12Kentos Thanks for your feedback. I watched some videos on SASS/SCSS and BEM and I'm trying it out for my next solution. I've only gotten a little bit done so far but I already feel more organized. I haven't heard of CUBE but it looks like it'll be the natural next thing to learn in order to tackle more difficult challenges.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord