A simple Question? Fewer but bigger CSS file VS many but smaller CSS file?

Custom CSS & Theme Design
1

I was making CSS file many need and sometime i need multiple CSS snippet for a single category (e.g. table)
So, do i keep there in a CSS File or different.

for example, here is two CSS snippet
1st one is simple, borderless table

.table-borderless {
–table-border-width: 0px;
–table-column-first-border-width: 0px;
–table-column-last-border-width: 0px;
–table-row-last-border-width: 0px;
–table-header-border-width: 0px;
–table-column-max-width: 600px
}

It’s small. but second one is big, which create a structure for me, a specific one i wanted. wiki like.


.markdown-rendered table tr:has(.row-blue) td {background-color: rgb(60,60,60); color: white !important; font-weight: bold; text-align: left; border: none; font-size: 1.01em;}
.markdown-rendered table tr:has(.row-soft-blue) td {background-color: rgba(42, 87, 176,0.3); border: none; font-size: 0.1em; }

.wkt .markdown-rendered table td,
.wkt .markdown-rendered table th {
border: none !important;
border-bottom: 1px solid rgba(125, 180, 255, 0.25) !important;
padding: 5px 0px;
vertical-align: top;
}
.wkt .markdown-rendered table td:first-child,
.wkt .markdown-rendered table th:first-child {
width: 160px;
min-width: 160px;
max-width: 160px;
white-space: nowrap;
color: var(–text-muted);
font-weight: 700;
}
.wkt .markdown-rendered table td:last-child {
width: 600px;
max-width: 600px;
}
.wkt .markdown-rendered :is(h1, h2, h3, h4, h5, h6),
.wkt .cm-line:is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3,
.HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
margin-bottom: 0 !important;
padding-bottom: 6px !important;
}
/* Live preview table gap fix */
.wkt .cm-embed-block table td,
.wkt .cm-embed-block table th {
padding: 1px !important;
}
.wkt .markdown-source-view .cm-embed-block table,
.wkt .cm-embed-block table {
margin-top: -15px !important;
margin-bottom: -17px !important;
}
.markdown-rendered table {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
@media (max-width: 768px) {
.wkt .markdown-source-view .cm-embed-block table,
.wkt .cm-embed-block table {
margin-top: -20px !important;
margin-bottom: -25px !important;
}}

i know there are mistake here, but if it’s work, it’s work. why bother to touch.

And with a little heading modification, this is the look i get.

image
image419×425 10.8 KB

SO, My Question is that, should i marge those two CSS?
they both work on cssclass.

2

If you have good organization and comments, there is no problem to have a big file.

The main reason I can think to have separate is when you want to disable and enable them modularly.

2 Likes
3

I compartmentalize them into smaller files by functional areas (headings, files, etc.), which makes it easier to troubleshoot issues later.

I have 22 tiny CSS files in snippets currently.

2 Likes
4

As rigmarole says, I divide based on whether I might want to toggle them separately. Many of my snippets are very focused, but I have a couple of bigger ones (for example, one that makes Source Mode plainer). I currently have 28 active and 19 inactive (I could probably stand to weed those).

5

Well, with cssclass i don’t need to disable and enable.

6

I think i didn’t add this, which one is good for software performance later on, which the number of things going to rise?

7

I don’t think it makes much difference. The only time I’d expect it to affect performance is when the vault is launched, and I’d be surprised if the difference were significant.

1 Like