All geek questions in one place

Does CSS classes use JS markup for bad practice?

Scenario:

  • Homepage created using PHP and the template engine.
  • The page is being redesigned.
  • The new design is based on the jQuery user interface.
  • The current CMS uses several templates: page template, article detail template, comment template, etc.

Problem: Some templates (such as the article detail template) generate html fragments that should use jQuery interface elements, such as tabs. Currently, the page template data source does not contain any information whose elements should be turned into jQuery user interface elements in the jQuery main call in the document header.

Possible Solution Add a CSS class, such as "jqTabs", to the html .jqTabs subpatterns and use the .jqTabs selector in the main jQuery script.

Question Is this a bad idea?

BTW: “Use a different CMS” is not a valid answer, because right now this parameter is not (deadline, budget, ... you name it -.-).

+6
source share
2 answers

Nice idea at all.

This is one of the main uses of classes.

A class (as well as an ID) can be used both as a way to style an element and / or a hook for scripts.

In this case, this may be the best possible solution, because it allows, apparently, minimal markup changes for a wider reorganization.

And it is easily reversible.

+3
source

I believe that using CSS classes as interceptors for JavaScript can really be bad practice. The reason I say this is because this approach combines your CSS and JavaScript and can often lead to unnecessary confusion.

Let me explain: I'm currently working on adding new templates to an existing system that uses dynamic user-controlled admin settings to control CSS properties (page width, font size, color, etc.). These settings can also affect JS properties (slide show options, delay between slides, etc.).

The problem is that since so many CSS classes have been used as JavaScript interceptors, it is very difficult for me to determine which classes are used for styles and which ones are used as JS hooks and which are used for both! As a result, when creating a new template, it would be very difficult to start from scratch with a new markup, since I would not pay attention to various important classes for both CSS functions and JS.

The task would be much simpler if CSS classes were ONLY used for styling, and other JS hooks were used only for JS. I assume this is achieved with HTML5 data attributes that look something like this:

 <a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a>

Using HTML5 data attributes for JavaScript hooks and a class attribute for CSS styling, we can be sure that all classes are ONLY CSS related and that everything related to JavaScript just gets its custom attribute.

Another option I used is the prefix of any css class with js- that JavaScript references. This way you will learn which classes you can safely remove for styling, and which ones should remain for existing functionality.

 <a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2"> My link </a>
+2
source

Source: https://habr.com/ru/post/903030/

More articles:


All Articles