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

Results summary with Astro

Aleš Zima 390

@Esosek

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, Is there any convention for naming variables and functions in the frontmatter of Astro if they are used outside of the frontmatter or privately for some calculcations? See the example below - scoreSum is a variable that is used for calculcation purposes only and is not used in the markup itself.

Therefore I would rename it to _scoresSum to indicate that its "private" although I don't think you can scope variables in Astro, correct?

  1. Would you just stick to the standard naming or do you use any indication that it's "private"?
  2. Can variables be private - scoped to frontmatter only?
---
let scoresSum = 0; // used 
categories.forEach((category) => (scoresSum += category.score));
const totalScore = Math.round(scoresSum / 4);
---
  1. I've noticed that the browser actually shows my class names ie. .overview__score-maximum in the html. This raises a question. Should I use standard class naming (ie. BEM naming convention) as I would without scoped CSS or is it okay to just omit classes where not needed because of scoped CSS (meaning components would use tag selectors instead of unique classes)

Loving Astro so far. Thanks for any feedback!

Aleš

Community feedback

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