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’ .
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.