What approach should I take to properly naming a navbar structure using BEM methodology?

Here is a snippet of SASS code that I need help transforming using the BEM methodology.

How can I rewrite this block of code to follow the BEM naming conventions?

.nav__primary ul {
    border-top: 2px solid $darkgreen;
    display:block;
    margin:10px 0 0 0;
    padding: 25px 0 0 0;

    & li {
        background-color:#004f5a;
        display: inline-block;
        float: none;
        margin-left:0;
        padding: 5px 0;
        text-align: center;
        width: 100%;

        & a {
            color:#fff;
            letter-spacing: 0.5px;

            &:hover {
                color:$darkgreen;
            }
        }
    }
}
csssassbem

Answer №1

One way to approach this is by creating a block called .primary-nav and including three elements within it: .primary-nav__ul, .primary-nav__li, and .primary-nav__a.

.primary-nav {
    &__ul {
        border-top: 2px solid $darkgreen;
        display: block;
        margin:10px 0 0 0;
        padding: 25px 0 0 0;
    }
    &__li {
        background-color: #004f5a;
        display: inline-block;
        float: none;
        margin-left: 0;
        padding: 5px 0;
        text-align: center;
        width: 100%;
    }
    &__a {
        color:#fff;
        letter-spacing: 0.5px;
        &:hover {
            color: $darkgreen;
        }
    }
}

Answer №2

BEM is a method for naming classes and differentiating identifiers and modifiers. It emphasizes using a single, strict class selector.

This approach relies on the SCSS ampersand selector to achieve its goals;

In your case, if you do not combine classes in your markup to modify elements, then implementing BEM may not be necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Bootstrap checkbox buttons not rendering properly

I'm attempting to utilize the checkbox button feature outlined on the bootstrap webpage here in the "checkbox" subsection. I copied and pasted the html code (displayed below) from that page into a jsfiddle, and checkboxes are unexpectedly appearing in ...

htmlcsstwitter-bootstrap

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

After receiving assistance from members oka and Mike Robinson, I have successfully created two tables for users to interact with using tabs and dropdowns. Both tables have the same structure and feature a dropdown menu to show/hide columns. Users can sele ...

javascriptjquerycssdrop-down-menu

Tips for adding and removing active class with navbar links using JavaScriptonclick

I need help with toggling the "li-active" class on my navigation bar links. Currently, when I click on a link, the "li-active" class is transferred from the previous link to the newly clicked link instead of removing it first. Can someone please assist me ...

javascripthtmlcss

Excess space located adjacent to primary content on website

When you scroll to the left of the page, next to the main content and outside of the browser width, there is additional space occupied only by the background of the Body CSS. Take a look at the site in action: . @charset "utf-8"; /* Custom CSS Styles * ...

htmlcss

Apply design to a dynamically generated JavaScript id using Stylus

Currently, I am utilizing a jquery datepicker widget, and my goal is to customize the CSS for its input field. However, it seems that the id assigned to that field is dynamically generated upon page load: <input type="text" id="dp1382434269539" style= ...

javascripthtmlcssjquery-uistylus

I am interested in showcasing a card when it is hovered over

I am having trouble with a hover effect to display a hidden card. I have two div elements, one is labeled single-album and the other hide. I used the + selector to set the hide div to display none initially, but the hover effect is not working as expecte ...

htmlcsscss-selectorsmousehoveronhover

I'm looking to center my btn button vertically and horizontally over two images using Bootstrap 5 in a responsive manner. How can I achieve this?

Any tips on how to position my btn button both vertically and horizontally in the center on top of two images? I want it to look like this: https://i.sstatic.net/Rezrd.png This is the code for my button: <a class="btn btn-primary" href=" ...

htmlcssresponsivebootstrap-5

Creating a fashionable look for your social sharing buttons

Using Social sharing button APIs from platforms like Facebook, Twitter, and Google Plus, I have created a basic fiddle for sharing a link (e.g. http://www.google.com). Check out the Fiddle Although my fiddle is functioning correctly, I am facing an issue ...

javascriptcssfacebooktwittergoogle-plus

What determines the functioning of the "N-in-one" or "pill" button effect?

I am interested in incorporating a style element known as the "pill" button, which can be found by visiting the following link: http://jqueryui.com/themeroller/ (specifically the "Choice 1 | Choice 2 | Choice 3" widget) Refer to the screenshot below: To ...

jqueryhtmlcssjquery-uijquery-ui-button

Is there a way to align cards to stack on both the right and left sides of each other?

I need to create a card that includes text and an image, save it as a component, and then display this component three times in app.component.html so that the cards are all visible on the website. Currently, the cards are stacked vertically. How can I alig ...

htmlcssangularbootstrap-4sass

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Sorry if this question seems repetitive, but as a newbie, deciphering posts from others has been overwhelming! I have two divs placed side by side within a wrapper, but I need them to stack on top of each other when viewed on a tablet or phone. Below is t ...

htmlcss

Create a 2-column Product Landing page in Magento with a Grid View option

Looking to create a Product landing page with a two-column layout in grid view, limiting rows to 4. Is there a setting in the backend or can I tweak the catalog.xml for this effect? Curious if the pager and sorter can be customized to fit the same style a ...

cssmagento

Progress Bars Styled with CSS Percentages

I need help creating a basic CSS percentage bar. To get started, visit and paste the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w ...

htmlcss

Displaying CSS source on a webpage using Polymer 2.0 style modules for sharing styles

I have implemented a style module using Polymer 2.0 (https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules). The styles are functioning properly in Firefox, but in Chrome, the CSS content is displaying as jumbled characters on t ...

csspolymer-2.0

Having trouble with CSS when using jQuery's gt() selector?

While working with jQuery, I encountered a warning from Firefox regarding the following code snippet: $("li.example div.code:gt(4)").hide(); Firefox indicates a CSS Error: Unknown pseudo-class or pseudo-element 'gt'. Although the code works as ...

jquerycss

Unable to Display CSS Background

Hey there, I've been experimenting with CSS backgrounds to create a header line consisting of 5 equally sized portions, each in a different color. I'm having trouble getting the background to display properly. Below is the code I have written. An ...

htmlcssbackgroundbackground-image

The "list-group" class is not functioning properly in Bootstrap 4

I've been diligently working on a project with Bootstrap 4. In one particular section, I need to display images in rows within a list-group that pulls images from a folder. However, when using Bootstrap 4, the image sizes are too large, unlike when I ...

htmlcsslaravelbootstrap-4twitter-bootstrap-3

Tips for maintaining consistent width of a div:

My current project involves designing a website that displays various quotes, with each quote rotating for a specific amount of time. However, I'm facing an issue where upon loading the page, the first quote triggers the appearance of a scrollbar, mak ...

javascripthtmlcss

What is the best way to arrange four divs in a row on a mobile device that is responsive?

I am facing an issue with displaying 4 divs of equal size on my website. In desktop view, they appear side by side but in mobile view, they stack on top of each other. I have tried using display: flex; and bootstrap classes like col-3, col-sm-3, col-md-3, ...

javascripthtmlcssbootstrap-4media-queries

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo