Is it possible to achieve complete separation of concerns when it comes to HTML, CSS, and JS?

Question

Is it possible to achieve complete separation of concerns when it comes to HTML, CSS, and JS?

What is the best way to achieve separation of concerns between HTML, CSS, and JS using this HTML structure?

<nav role="navigation" class="site-nav js-site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

Check out the demo: http://codepen.io/achisholm/pen/wGVGxj

Upon closer inspection, it appears that this example lacks a true separation of concerns. The class naming system does not facilitate easy separation. Even when targeting the links, the .site-nav__link selector would still be required in the JS.

One possible solution could be to add a JS hook class to each link. Would adding .js-site-nav__link class to each link enhance the decoupling?

<nav role="navigation" class="site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item js-site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item js-site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

However, this solution may not be ideal as using the complete BEM name could still complicate structural changes. Is there a better alternative to just using .site-nav__link?

Considering a class name like js-link may be an option, but it could lead to other issues. Would targeting .js-site-nav .js-link provide the best solution?

<nav role="navigation" class="site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item js-link"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item js-link"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

While this feels like a more separated approach, is it the most effective solution?

Special thanks to @claudios for providing an example with a clear JS hook using js-add. This method might work well, but may not be suitable for all scenarios. Perhaps a JS hook like js-toggle-link could lead to a better structured approach.

Reference: HTML structure derived from the following talk (relevant part at 17 mins)...

javascript jquery html css bem

Answer 1

Answer №1

My suggestion for effectively decoupling html, css, and javascript is to use prefixes for all javascript elements. For instance, you can use the prefix "js-*".

Consider this scenario: you have a button like

<button class="add">Add</button>

and you want to add javascript functionality to it. In this case, you can rewrite it as:

<button class="js-add add">Add</button>

If the button requires special treatment and must stand out from other buttons with the "add" class, you can do the following:

<button class="js-add add-special">Add</button>

I hope this explanation proves useful in improving the organization and structure of your code.

Answer 2

My suggestion for effectively decoupling html, css, and javascript is to use prefixes for all javascript elements. For instance, you can use the prefix "js-*".

Consider this scenario: you have a button like

<button class="add">Add</button>

and you want to add javascript functionality to it. In this case, you can rewrite it as:

<button class="js-add add">Add</button>

If the button requires special treatment and must stand out from other buttons with the "add" class, you can do the following:

<button class="js-add add-special">Add</button>

I hope this explanation proves useful in improving the organization and structure of your code.

Answer 3

Answer №2

BEM actually promotes a different approach.

Instead of separating blocks (components) into markup (HTML), view (CSS) and behavior (JS), BEM suggests keeping them together.

For example, in the case of site-nav, all JS functionality can be handled within the block itself, treating its elements as an internal API of the block (making is-active a modifier of site-nav__link).

For more information, check out the documentation on bem.info:

Answer 4

BEM actually promotes a different approach.

Instead of separating blocks (components) into markup (HTML), view (CSS) and behavior (JS), BEM suggests keeping them together.

For example, in the case of site-nav, all JS functionality can be handled within the block itself, treating its elements as an internal API of the block (making is-active a modifier of site-nav__link).

For more information, check out the documentation on bem.info:

Answer 5

Answer №3

In my personal view, using overly complex naming conventions can make things more difficult. With the availability of tools like SASS in CSS and object-oriented programming in JS, it is much easier to organize elements and events in a simple and efficient manner.

The key is to keep element and event names as straightforward as possible.

Let me explain further:

For example, consider the following structure that you have provided:

<nav role="navigation" class="site-nav js-site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

While this hierarchical naming structure may seem organized initially, it can become confusing over time, especially for new team members trying to decipher the names independently.

If I were to implement this structure, I would simplify it as follows:

HTML

<nav role="navigation" class="site-nav js">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#" class="active">Menu Item 2</a></li>
  </ul>
</nav>

SCSS

.site-nav{
    //styles here

    &.js{
    //styles here
    }

    ul{
        //styles here

        li{
            //styles here

            a{
               //styles here
            }
        }
    }
}

When writing an event for the a element, previously known as a.site-nav__link:

JS

document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});

By organizing elements in a logical hierarchy, finding and remembering their names becomes much simpler.

Now, let's discuss the use of the .js class and its purpose:

Typically, not every element that interacts with js requires a "js class." So, why do we use it? Let's clarify with an example.

Consider a button with the class .button and specific styles.

SCSS

.button{
    //Some styles
}

If we want certain buttons (with the same style) to increase in size when clicked, we add the .js class to identify them for manipulation with js and easier handling.

document.querySelector('.button.js').addEventListener('click', function() {
    this.className+=' clicked';
});

In the CSS, we define:

.button{
    //Some styles
    &.js{
        .clicked{
            transform:scale(1.1);
        }
    }
}

It's a straightforward concept!

Without using the .js class, we would need to create another class for those buttons. By utilizing a bit of hierarchy, we write less code, maintain organization, and avoid the need to rely on external references due to the simplistic and memorable naming conventions for elements and events!

Answer 6

In my personal view, using overly complex naming conventions can make things more difficult. With the availability of tools like SASS in CSS and object-oriented programming in JS, it is much easier to organize elements and events in a simple and efficient manner.

The key is to keep element and event names as straightforward as possible.

Let me explain further:

For example, consider the following structure that you have provided:

<nav role="navigation" class="site-nav js-site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

While this hierarchical naming structure may seem organized initially, it can become confusing over time, especially for new team members trying to decipher the names independently.

If I were to implement this structure, I would simplify it as follows:

HTML

<nav role="navigation" class="site-nav js">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#" class="active">Menu Item 2</a></li>
  </ul>
</nav>

SCSS

.site-nav{
    //styles here

    &.js{
    //styles here
    }

    ul{
        //styles here

        li{
            //styles here

            a{
               //styles here
            }
        }
    }
}

When writing an event for the a element, previously known as a.site-nav__link:

JS

document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});

By organizing elements in a logical hierarchy, finding and remembering their names becomes much simpler.

Now, let's discuss the use of the .js class and its purpose:

Typically, not every element that interacts with js requires a "js class." So, why do we use it? Let's clarify with an example.

Consider a button with the class .button and specific styles.

SCSS

.button{
    //Some styles
}

If we want certain buttons (with the same style) to increase in size when clicked, we add the .js class to identify them for manipulation with js and easier handling.

document.querySelector('.button.js').addEventListener('click', function() {
    this.className+=' clicked';
});

In the CSS, we define:

.button{
    //Some styles
    &.js{
        .clicked{
            transform:scale(1.1);
        }
    }
}

It's a straightforward concept!

Without using the .js class, we would need to create another class for those buttons. By utilizing a bit of hierarchy, we write less code, maintain organization, and avoid the need to rely on external references due to the simplistic and memorable naming conventions for elements and events!

Is it possible to achieve complete separation of concerns when it comes to HTML, CSS, and JS?

Answer №1

Answer №2

Answer №3

Similar questions

Tips on preventing conflicts between jQuery FancyBox and mouse scrolling

The HTML.php form displays boolean radio button values as 'on'

Issue with click function not activating in Chrome when using Angular 6

The basic shapes in the scene are just out of sight

Regular expression: match all content up to a certain word(s)

New ways to style Links in NextJs 13

Unable to decipher the mysterious map of nothingness

What is the best way to add <li> elements dynamically in an AngularJS application?

Error message: The md-autocomplete function is throwing a TypeError because it cannot read the property 'then' of an undefined object

`The Streaming module within React Native`

The React-native application initialized using npx create-react-app encountered an error and could not launch

Customize the delete icon margin styles in Material-UI Chip component

Error: Type Error - 'style' is not defined in the Progress Bar Project

Dropdown menu is not positioning correctly over other elements on the webpage

Use CSS to manipulate the dimensions of an overlay

React: Struggling to render values within {} of a multidimensional object

Whenever I try to run npm start, my webpack is not able to locate my index.html page

Difficulty encountered in resetting progress bar post ajax form submission

Configuring timezone for 'date' type in Plotly.js

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers