Refactor style.css

[bjohansebas]

To make it more maintainable and to better edit our styles, I am separating the styles into multiple files depending on their purpose.

close: #1751

[netlify]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	0e8e065
🔍 Latest deploy log	https://app.netlify.com/sites/expressjscom-preview/deploys/67abd359ae86fd000884a401
😎 Deploy Preview	https://deploy-preview-1786--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jonchurch]

What maintainability issues are you running into currently? That the styles file is 1200 lines long?

I see the value in organizing styles, but right now, this approach increases the number of HTTP requests without a build step to merge them (jekyll supports scss), which could negatively impact performance. We go from 1 request to 9.

Also, from a developer experience perspective, having to jump between multiple small files can sometimes make it harder to track down and modify styles efficiently. A single, well-structured file can often be easier to work with than several separate ones.

Some of these files, like menu.css, footer.css, and search.css, seem to be used across the site. Would it make sense to combine them into a single global.css? Similarly, instead of splitting each page’s styles into separate files, what about grouping them into one pages.css?

The goal should be improving maintainability without making performance worse or adding manual overhead. What do you think?

[bjohansebas]

What maintainability issues are you running into currently? That the styles file is 1200 lines long?

It's a very large and somewhat disorganized file, so if we can separate it into a few files and organize it better, that would be great.

Some of these files, like menu.css, footer.css, and search.css, seem to be used across the site. Would it make sense to combine them into a single global.css? Similarly, instead of splitting each page’s styles into separate files, what about grouping them into one pages.css?

I like both options, I will apply them. Thanks for the suggestion!

[ShubhamOulkar]

Please don't add files in header that are not present in repo. express.com showing same error in the console. ☹️

[2025-02-13 00:23:13] ERROR /css/themes/light-theme.css' not found.
LiveReload: Browser connected
[2025-02-13 00:23:28] ERROR /css/themes/light-theme.css' not found. [2025-02-13 00:25:47] ERROR /css/themes/light-theme.css' not found.
[2025-02-13 00:26:23] ERROR /css/themes/light-theme.css' not found.

Are you planning to add light-theme? I dont think it is needed. As @jonchurch said don't increase network calls. Just need to remove redundant css selectors. I can see that light mode text colors and background colors are not broken in this pr but I dont find light-theme.css file in pr.

[bjohansebas]

[2025-02-13 00:23:13] ERROR /css/themes/light-theme.css' not found.
LiveReload: Browser connected

I forgot to remove that request from the head, sorry about that. I've deleted it in this pr.

[ShubhamOulkar]

Suggested change

	/* -------- Submenu --------*/
	/* -------- navigation Submenu --------*/

[bjohansebas]

I'm trying not to delete or modify any CSS styles, as these are style changes of code.

[ShubhamOulkar]

I'm trying not to delete or modify any CSS styles, as these are style changes of code.

Ok, do it without changes. I want to remind you that if we are rewriting css then we don't need so many css files. Only variable.css and style.css more than enough. It is up to you. Please do it earlier. I am waiting this pr to merge.

[bjohansebas]

This is not a priority, and it shouldn't be a dependency for creating PRs. I'm going to put it in draft for now, and I'll come back to it later.