Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Being a front-end developer working in a team, I have found myself solving a recurring problem many times.
For example, much of our frontend javascript code is written using jQuery and CSS selectors (mostly targeting a CSS "class"). The problem is, is that many times another developer that is fixing some CSS code will remove a class or will change the DOM element nesting it under another element making the JS code break.
To prevent this, my idea was to use/add a "data-js" attribute to each element that we want to use for Javascript. However I am not sure about the performance of a jQuery selector written like this:
$('[data-js="my_js_selector"]').click();
Another idea I had, was to add a js-specific class to a dom element that is somehow manipulated by Javascript:
link
and then calling it simply with $('.js-link').click()
It would be very nice that you could only look into HTML and tell that some element has some Javascript manipulations attached without actually looking into the JS code.
Is this a good idea? Or are there some other best practices to separate JS-triggering from CSS styling?
In Scalable and Modular Architecture for CSS (SMACSS), Jonathan Snook teaches that a "state" class such as the one you proposed with .js-link is the best approach.
The relevant discussion is in the section on State Rules:
Sub-module styles are applied to an element at render time and then
are never changed again. State styles, however, are applied to
elements to indicate a change in state while the page is still running
on the client machine.
For example, clicking on a tab will activate that tab. Therefore, an
is-active or is-tab-active class is appropriate. Clicking on a dialog
close button will hide the dialog. Therefore, an is-hidden class is
appropriate.
This contradicts what two commenters said. CSS code and classes should be flexible; CSS developers should be able to refactor and improve code without worrying about breaking functionality not related to presentation.
The point made by #ArunPJohny supports the state class approach. Engines are unfortunately not optimized to recognize data- attributes any more than they are to recognize arbitrary custom attributes, such as foo-.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I often heard that it is bad idea to combine react and jquery but I think it is more easier for me to make change on DOM with jQuery
Example:
<a className="toggleLink">Click Here to toggle Menu</li>
<div className="contentToToggle">content to toggle</div>
For jquery, I will write to function extend then I can use again for many cases or I can use click event directly by class. This class will also used again.
jQuery.fn.extend({
toggle: function(element){...}
});
but in react, I feel quite complex, each click on each component, I have to make a state to return for that component only.
Expose that I have 10 click events: First to toggle, second to addClass, third for showing popup...
So it should be bad idea to use React in this case. Is it right?
I want someone here can help me with this situation. Thanks
It is always preferred to not mix React and JQuery and it might make things more complicated.
Both of them have different ideologies. JQuery modifies actual DOM whereas React plays around with Virtual DOM.
Coding things with React may seem little bit heavy and cumbersome initially but it keeps things much more clear and less abstract going forward. Hope this helps !
No no no no no and some more no 😉😂
They are two different approaches to building a web app. Using JQuery means React could no longer be handling state, events and UI rendering. Which can causes conflicts, almost like two builders trying to build the same road at the same time using different materials and approaches.
If you using React you should use React's approach to manipulating and updating the DOM. That being said you don't have to use React if you don't want to. If you're familiar with JQuery build the site the way you know how if that will get it done quicker and React is not a requirement.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am pretty green to web development.
In one of my courses I have been told the following things will happen when browser reads a web page.
At a very high level I assume this is the basic flow.
1.Browser pulls the HTML page.
2.Browser understands the document structure using the HTML tags.
3.After step 2, browser understands the CSS selectors/properties.
4.Browser builds the DOM model now.
5.After this, the javascript interpreter within the browser interprets the .js script
Questions
1.Is the above flow correct ?
2.I am aware that the HTML tags can be manipulated by javascript.
Are the CSS selectors are also part of DOM and can be manipulated by javascript ?
Not exactly correct. It's a complicated process.
JavaScript isn't run just after the entire page is loaded, which is why you'll see a lot of junior programmers make the mistake of trying to manipulate HTML, without checking if the page has loaded.
When the browser reaches an element such as <script> or <link> it will attempt to pull the resource, and if successful, will then execute that resource. Meaning the JavaScript code, for instance, will run before the DOM has loaded, if the <script> tag is in the head (where it usually is). CSS works in a similar way, however it doesn't really matter when CSS is applied, in most cases, since it can't crash. You can create styles and even change the inline styles of elements, using JavaScript, but a general rule of thumb is to keep styles that CAN be in .css files there.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm somewhat experienced in markup & styling, but I am a relative newcomer to front-end scripting.
Can someone please clarify which is better (or best) practice:
Is it better to modify HTML element display / behaviour directly via DOM or to do so by assigning and removing CSS classes?
My own take is that using javascript to append or remove CSS classes is probably the more elegant way to alter element display and / or behaviour, but I wish to confirm this before proceeding.
Can anyone comment further?
Here is a very general guideline:
Use classes to define some styles (or even just one style), if it actually means something. For instance, if you want JavaScript to designate an element as a selected item, use a .selected-item class and set that on the element. This lets you do design work in the CSS file.
However, if you are doing one-off modifications, especially those involving calculations, such as setting the height of an element relative to another element... then you should modify the element.style object with those specific properties.
In summary: Use a class if it's got meaning. Modify properties directly if it's a one-off thing.
In fact, this applies to the base HTML as well. You can easily define a class .center {text-align:center} and apply that to center-aligned elements, because it's not a one-off deal. But if you need for a particular element to have some extra bottom margin, use style="margin-bottom:20px" instead of defining a class just for that.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm wondering in what cases is this better to use JS when a pure css solution is possible. I've been browsing other questions but couldnt find the answer I was looking for.
Suppose we have images and want to display some stuff on hover. Should one use :
Example :
$('div.some-class').mouseover(function(){
$(this).children('.some-class').removeClass('hidden');
});
or is this CSS solution better:
div:hover > .my-elem{
opacity:1;
});
imho, the second solution is way better but i've been using the first one for couple of months and I just found out about the second one a week ago, so i'm not totally sure if it's a valid practice.
The CSS solution is better for 2 reasons:
CSS is loaded alongside the HTML, whereas JavaScript is loaded after the page itself has loaded. For things like a hover this isn't a huge issue, but if you're directly setting static styles you'll notice a delay between the content loading and the JavaScript running.
It's common for users to disable JavaScript. With JavaScript disabled, your mouseover function would never fire, whereas the CSS would work regardless.
However that said, img elements cannot contain children, so both your CSS and JavaScript is invalid.
Case 1: Prefer CSS to JS
1. CSS 3 is a mixture of CSS+JS and this enables you to develop your code faster rather than writing your own custom JS.
2. Prevents you from querying the DOM.
3. Loads alongside with your HTML (faster than JS)
Case 2: Prefer JS to CSS
1. This will help you when working with old browsers which don't have CSS3 support.
2. Helps you to handle other DOM functionality which CSS still doesn't have support. (for eg: you can change the color of some other element on hover of your element in CSS, but can't make any changes to JS variables or logic)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've lately realized that I would like to jump into AngularJS framework. I was developing with jQuery for few years now.
I want to create some application that helps user to modify webpage dom (some sort of browser WYSIWYG editor). It just loads page normally and adds some custom sidebar with tools - like managing css styles, adding new elements, editing curent content. So basically there is only one view added - sidebar. Main part is normal page that has nothing to do with my editor.
I'm in the middle of work and I was doing it with jQuery - but it requires a lot of same, repeating DOM manipulation.
So do you think guys it's good to make it with AngularJS?
I would have features like:
a lot of inputs for various css styles that will modify styles of selected item in real item (last clicked item would be active or something like this)
options like duplicate item, remove item, restore default styles, sort with other items
adding new items ( for now I'm doing it with jQuery UI Dragging and Sorting)
and so on that you can imagine it would need.
My goal is to focus on business logic of this (and there is a lot of this) and leave all those events, checking item propeties, updating them etc to framework.
Also what other frameworks are good for this? jQuery is great for DOM modifications but in this case all of them are very similar to each other.
Thanks.
At first glance, I would say that Angular is not likely to be a good fit for this project. Most of the power of Angular comes from directives, which are generally applied by adding attributes to your markup. Since the main bulk of the markup in the page is out of your control, much of what angular does won't help you modify the underlying page. Angular might help you with your own UI, but most likely jQuery would be more useful for applying the styles to the elements on the original page.
I think angular is great for any client side coding, automatic updating of async data & organization of code in an MVC structure. Just give it a try.