UI redesign- Will changing the css affect the javascript

Question

I am normally a UX designer, but my work has me learning front-end programming so forgive me if this is a simple question. I tried googling but couldn't find anything. So I am tasked with redesigning the UI for a software solution that is used by IT admins to monitor their devices. I have all the html, css and javascript locally. I want to make a lot of changes that are visual (navbar on top vs on the left side) and navigation based (combining two pages into one). I am trying to understand the html/css but given how extensive it is, I am having trouble making the changes I need to make. If I start the css from scratch, will it affect all the javascript that is currently implemented? I will make some html changes, but will keep the classes/layout mostly the same. Mainly I will focus on css.

I tried editing the css to fit my redesign, but I kept having trouble targeting the right elements and finding out what needed to be changed. I know what I need to do but I cant seem to do it within the confines of the current code. It feels like it would be easier to start from scratch.

Answer 1

Changing the CSS code shouldn't affect the JavaScript functionality as long as you're not modifying the CSS classes or IDs used in the JavaScript code. JavaScript code usually interacts with HTML elements through CSS selectors, so if you modify the class or ID names used in your HTML or CSS code, it could potentially break the JavaScript functionality.

That being said, starting from scratch might not be the best approach, especially if the JavaScript code is already working as intended. Instead, I would recommend making a copy of the existing CSS file and working on it separately, making changes incrementally and testing each change to ensure that it doesn't affect the JavaScript functionality.

If you're having trouble targeting the right elements, you can use browser developer tools to inspect the HTML and CSS code and see how the current layout is constructed. This should help you identify which elements to modify and which CSS selectors to use.