Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Refactor style.css#1786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
bjohansebas wants to merge20 commits intogh-pages
base:gh-pages
Choose a base branch
Loading
fromrefactor-css
Draft

Refactor style.css#1786

bjohansebas wants to merge20 commits intogh-pagesfromrefactor-css

Conversation

bjohansebas
Copy link
Member

@bjohansebasbjohansebas commentedFeb 11, 2025
edited
Loading

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

@bjohansebasbjohansebas added the maintenanceIssues/PRs related to making the website maintainable labelFeb 11, 2025
@netlifyNetlify
Copy link

netlifybot commentedFeb 11, 2025
edited
Loading

Deploy Preview forexpressjscom-preview ready!

NameLink
🔨 Latest commit0e8e065
🔍 Latest deploy loghttps://app.netlify.com/sites/expressjscom-preview/deploys/67abd359ae86fd000884a401
😎 Deploy Previewhttps://deploy-preview-1786--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@bjohansebasbjohansebas marked this pull request as ready for reviewFebruary 11, 2025 19:29
@bjohansebasbjohansebas requested review froma team ascode ownersFebruary 11, 2025 19:29
@jonchurch
Copy link
Member

jonchurch commentedFeb 11, 2025
edited
Loading

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, likemenu.css, footer.css, and search.css, seem to be used across the site. Would it make sense to combine them into a singleglobal.css? Similarly, instead of splitting each page’s styles into separate files, what about grouping them into onepages.css?

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

ShubhamOulkar reacted with thumbs up emojicarlosstenzel reacted with eyes emoji

@bjohansebas
Copy link
MemberAuthor

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
Copy link
Member

ShubhamOulkar commentedFeb 12, 2025
edited
Loading

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
Copy link
MemberAuthor

[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

This comment was marked as resolved.

}
}

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

This comment was marked as outdated.

}
}

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

This comment was marked as outdated.

ShubhamOulkar

This comment was marked as duplicate.

@bjohansebas
Copy link
MemberAuthor

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

@ShubhamOulkar
Copy link
Member

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.

@bjohansebasbjohansebas marked this pull request as draftFebruary 16, 2025 17:19
@bjohansebas
Copy link
MemberAuthor

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.

@ShubhamOulkarShubhamOulkar mentioned this pull requestMar 30, 2025
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@ShubhamOulkarShubhamOulkarShubhamOulkar left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
maintenanceIssues/PRs related to making the website maintainable
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Separate the CSS from the entire page
3 participants
@bjohansebas@jonchurch@ShubhamOulkar

[8]ページ先頭

©2009-2025 Movatter.jp