Refactor style.css #1786

bjohansebas · 2025-02-11T17:50:45Z

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

netlify · 2025-02-11T17:51:02Z

✅ 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.

…o support.css

jonchurch · 2025-02-11T21:40:19Z

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 · 2025-02-11T22:37:04Z

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 · 2025-02-12T19:10:14Z

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-12T19:39:11Z

[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

Api

add Basic accessibility like key :focus and :hover styles.
We still need to style responsive #menu bar on api/blog pages. Will be is done in pr #1775.

Blogs

Make changes in comment and moving blog side bar css code into blog.css file. This side bar also need changes in :focus, :hover selectors, responsive layout changes.

ShubhamOulkar · 2025-02-13T03:44:42Z

css/globals.css

+#menu {
+  position: fixed;
+  margin: 0;
+  padding: 0 10px 0 0;


Suggested change

padding: 0 10px 0 0;

padding-inline: 0.5rem;

padding-block: 0.5rem;

old css blocks left side of li element on :focus-visible. And use logical css because we dont want to write separate css on translated page. These property follows directions and writing mode.

ShubhamOulkar · 2025-02-13T04:02:53Z

css/globals.css

+}
+
+#menu a {
+  color: var(--menu-grey);


Suggested change

color: var(--menu-grey);

color: var(--menu-grey);

display: block;

padding-block: 0.2rem;

padding-inline: 0.2rem;

margin-inline: 0.2rem;

border-radius: 0.2rem;

&:hover {

color: var(--fg);

}

&:focus {

outline: 1px solid var(--fg);

}

increase clicking area for all links

We need both selectors, and :focus to show same focus state across all browsers.

ShubhamOulkar · 2025-02-13T04:33:23Z

css/globals.css

+  font-size: 13px;
+}
+
+#menu ul a {


Suggested change

#menu ul a {

#menu ul a {} is redundant selector remove it

ShubhamOulkar · 2025-02-13T04:33:44Z

css/globals.css

+}
+
+#menu ul a {
+  padding-right: 7px;


Suggested change

padding-right: 7px;

ShubhamOulkar · 2025-02-13T04:33:54Z

css/globals.css

+
+#menu ul a {
+  padding-right: 7px;
+}


Suggested change

}

ShubhamOulkar · 2025-02-13T05:20:47Z

css/globals.css

+  }
+}
+
+/* -------- Submenu --------*/


Suggested change

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

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

ShubhamOulkar · 2025-02-13T05:21:51Z

css/globals.css

+  }
+}
+
+/* ----------------- Blog --------------------- */


Suggested change

/* ----------------- Blog --------------------- */

/* ----------------- Blog side bar --------------------- */

Can we put this in blog.css? I was thinking of using same blog side bar on guide page, security best practices and performance best practices pages.

ShubhamOulkar · 2025-02-13T05:29:12Z

css/globals.css

+  }
+}
+
+/* ----------------- Side Menu --------------------- */


Suggested change

/* ----------------- Side Menu --------------------- */

/* ----------------- api Side Menu --------------------- */

bjohansebas · 2025-02-13T23:19:24Z

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

bjohansebas added 3 commits February 11, 2025 11:52

refactor: move search styles to new file

da2a426

refactor: move navigation menu to new file

10819f4

refactor: move blog styles to new file

f09efda

bjohansebas added the maintenance Issues/PRs related to making the website maintainable label Feb 11, 2025

bjohansebas added 12 commits February 11, 2025 12:52

refactor: rename style.css to general.css

27b88e6

refactor: move home style to new file

90ec0c1

refactor: move footer styles to new file

ff97ad6

refactor: move api styles to new file

a5ff942

refactor: move side menu styles to menu.css

c782735

refactor: move middleware styles to new file

a0b2371

refactor: move special api styles to api.css

bb3d83e

refactor: move resposive styles of search to search.css

85306c2

refactor: move i18n section footer to footer.css

ba2fe7d

refactor: move home style to home.css

615d6ce

refactor: move logo table styles to community.css and strong styles t…

855be69

…o support.css

refactor: reorganize general.css for improved structure

1652bed

bjohansebas marked this pull request as ready for review February 11, 2025 19:29

bjohansebas requested review from a team as code owners February 11, 2025 19:29

bjohansebas added 2 commits February 11, 2025 14:30

refactor: add support.css and community.css stylesheets to head.html

21d0f28

rename general.css to style.css

12cb8b8

bjohansebas force-pushed the refactor-css branch from 3a3a78e to 12cb8b8 Compare February 11, 2025 19:34

bjohansebas added 3 commits February 11, 2025 17:41

merge files from the pages folder

e6291c7

merge footer menu and search in one file

6a7fff2

fix head

0e8e065

ShubhamOulkar reviewed Feb 13, 2025

View reviewed changes

This comment was marked as duplicate.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor style.css #1786

Refactor style.css #1786

bjohansebas commented Feb 11, 2025

netlify bot commented Feb 11, 2025 •

edited

Loading

jonchurch commented Feb 11, 2025 •

edited

Loading

bjohansebas commented Feb 11, 2025

ShubhamOulkar commented Feb 12, 2025 •

edited

Loading

bjohansebas commented Feb 12, 2025

ShubhamOulkar left a comment •

edited

Loading

ShubhamOulkar Feb 13, 2025

ShubhamOulkar Feb 13, 2025 •

edited

Loading

ShubhamOulkar Feb 13, 2025

ShubhamOulkar Feb 13, 2025

ShubhamOulkar Feb 13, 2025

ShubhamOulkar Feb 13, 2025

ShubhamOulkar Feb 13, 2025 •

edited

Loading

ShubhamOulkar Feb 13, 2025

This comment was marked as duplicate.

bjohansebas commented Feb 13, 2025

	padding: 0 10px 0 0;
	padding-inline: 0.5rem;
	padding-block: 0.5rem;

-  color: var(--menu-grey);
+  color: var(--menu-grey);
+  display: block;
+  padding-block: 0.2rem;
+  padding-inline: 0.2rem;
+  margin-inline: 0.2rem;
+  border-radius: 0.2rem;
+  &:hover {
+    color: var(--fg);
+   }
+  &:focus {
+    outline: 1px solid var(--fg);
+   }

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

	/* ----------------- Blog --------------------- */
	/* ----------------- Blog side bar --------------------- */

	/* ----------------- Side Menu --------------------- */
	/* ----------------- api Side Menu --------------------- */

Refactor style.css #1786

Are you sure you want to change the base?

Refactor style.css #1786

Conversation

bjohansebas commented Feb 11, 2025

netlify bot commented Feb 11, 2025 • edited Loading

✅ Deploy Preview for expressjscom-preview ready!

jonchurch commented Feb 11, 2025 • edited Loading

bjohansebas commented Feb 11, 2025

ShubhamOulkar commented Feb 12, 2025 • edited Loading

bjohansebas commented Feb 12, 2025

ShubhamOulkar left a comment • edited Loading

Choose a reason for hiding this comment

Api

Blogs

ShubhamOulkar Feb 13, 2025

Choose a reason for hiding this comment

ShubhamOulkar Feb 13, 2025 • edited Loading

Choose a reason for hiding this comment

ShubhamOulkar Feb 13, 2025

Choose a reason for hiding this comment

ShubhamOulkar Feb 13, 2025

Choose a reason for hiding this comment

ShubhamOulkar Feb 13, 2025

Choose a reason for hiding this comment

ShubhamOulkar Feb 13, 2025

Choose a reason for hiding this comment

ShubhamOulkar Feb 13, 2025 • edited Loading

Choose a reason for hiding this comment

ShubhamOulkar Feb 13, 2025

Choose a reason for hiding this comment

This comment was marked as duplicate.

bjohansebas commented Feb 13, 2025

netlify bot commented Feb 11, 2025 •

edited

Loading

jonchurch commented Feb 11, 2025 •

edited

Loading

ShubhamOulkar commented Feb 12, 2025 •

edited

Loading

ShubhamOulkar left a comment •

edited

Loading

ShubhamOulkar Feb 13, 2025 •

edited

Loading

ShubhamOulkar Feb 13, 2025 •

edited

Loading