Styling Conventions
This lesson is a small guide to styling techniques and conventions that we'll be using to design our top-level menu.
We'll cover the following...
Targetting the elements
We have some divs for grouping; now, let’s make them targetable so we can actually do things with them. There are a variety of conventions to follow for naming our div classes, and in the end, it doesn’t matter which of them you pick – as long as you’re consistent with one.
We’ll use a convention called BEM for our projects since I think it’s easy to understand.
The outermost div is called menu, and each item within it gets a menu__item class. This allows us to target all the items at once, like if we wanted to add a border to each. The modifier --specificCategory is for more specific targeting, like when you hover over “motors” and want to get the submenu specific for “motors”.
Styling with CSS
Now that we’ve assigned identifiers for everything, we can style it to look like a menu. Since we’re lining these elements up in a horizontal orientation, we know immediately we can use display: inline-block (there are other ways to horizontally align elements, like float and using tables, but for most cases, this one will be the simplest approach). ...