When you are changing the width of a picture, which file do you think you will turn to first? HTML, CSS and Javascript can solve the same problem. However, what’s the best solution and what are their differences?
In this case, Javascript is the worst choice to solve the problem. No matter if you use the css width element or directly change the width of the picture in document ready or page load, you will find the picture changes it’s width quickly after the page is fully loaded. This is because CSS is loaded before Javascript.
Therefore, when you are looking for some cool effects, you choose Javascript. When you are changing some parts of the page dynamically according to current width of screen or scroll location, you can choose Javascript as well. When you want to use some logic based on the current url, you can also choose Javascript. Otherwise if you want to change the original location or the setting of page components, please use CSS and HTML.
What’s the difference between CSS and HTML? Technically CSS is a part of the HTML. You can use the style tag to format each page. But that will be nightmare for coding and future maintenance. Therefore, we would use HTML to control the order and layers of each element. And then we would use CSS to control the style of the page.
So when we are encountering style issues, we should first turn to CSS. Adding necessary class names and changing the order of each layer to ensure we properly serve CSS. If setting is based on the dynamic values, then use Javascript assuming both CSS and HTML could not meet the requirements.