Ravenous Part 3 - Task 8 JS /CSS relationship clarification

Hello,

Just finished the Ravenous Part 3 and after a second look, I have noticed the intricate relationship between the JS and CSS which left a bit confused. Task 8 to be more specific.

First of all look at the SearchBar.js within the render /return section of code of the SearchBar class. The div with the className ‘SearchBar-sort-options’ is styling in CSS the ul and li and all the active and hover effects of the lis under the same className ‘SearchBar-sort-options’ .


SearchBar.js

SearchBar.css

Second of all, the renderSortByOptions method is taking a className attribute which styles the li items dynamically with the help of getSortByClass method.

It might sound obvious for some, but how does the li recognize the ‘SearchBar-sort-options’ name in CSS, despite the fact that the className in renderSortByOptions method is not even mentioning it.

Thank you,

I think you are over complicating things.

first off, in searchBar.js, the render() methods returns html with classes. These classes are recognized by css. There isn’t any complicated happening here.

the only thing getSortByClass does is adding a class active or no class ('')

again, this classes are already defined in css, so when the browser renders this html, the styling is applied by the browser (just like a static html & css website)

1 Like

Sir, thanks for the heads up. It makes more sense when not complicating things.