Do you forget about CSS classes you've created?

[DorianBay]

Hi there! My current project is my personal Neocities site. I keep on adding pages and content to it and have created quite a good framework for myself. Whenever I can, I use classes I've already defined in my CSS, but it sometimes happens that I create a new class and then later find a similar class that's already been created for another page.

I have a few external CSS documents and put page-specific CSS between their head tags, which makes it difficult to keep track of all of them, to be honest Am I just being careless or does this happen to you as well? XD

[MediocreMetastasis]

Each page on my site is so stylistically different that I can't use the same CSS.
Of course when I make pages that are similar I'll use the same CSS file but one page has a 2000s futurism style and the next is medieval. I should probably make some basic classes in one file such as a flex box or grid just so I don't have to fiddle around every time.
Generally if you know that a page you're making for your site is gonna be similar to another one. Import the same css file you used and use the same class names. If the class if similar to what you want but you want to change some things. You can always overwrite the css on the html page.

[DorianBay]

Each page on my site is so stylistically different that I can't use the same CSS.
Of course when I make pages that are similar I'll use the same CSS file but one page has a 2000s futurism style and the next is medieval. I should probably make some basic classes in one file such as a flex box or grid just so I don't have to fiddle around every time.

I took a look at your site, and man is it amazing! I love the style(s)! Some basic classes can definitely make things easier despite the diversity of the pages.

Generally if you know that a page you're making for your site is gonna be similar to another one. Import the same css file you used and use the same class names. If the class if similar to what you want but you want to change some things. You can always overwrite the css on the html page.

That's generally what I do. The problem is that I have quite a few basic classes and element selectors. A part of my pages gets changed as soon as I link the CSS because of the selectors, and I remember the classes I use regularly but I tend to forget about the flexbox class, for example, so I just go on to create new ones for every file. It's not a huge issue but it makes me feel sloppy so I was wondering if it's just me or does it happen to everyone (I'm new to webmastery and like to perfect my practice where I can)

[MediocreMetastasis]

I tend to forget about the flexbox class, for example,

I do have a dedicated flexbox in my main css file but theres like 5-6 other ones in the same file and
to be fair flexboxes have a lot of nuances. You could make a template for a basic column flexbox but what if you need to increase the gap or have only 3 elements in each column with the middle column being smaller than the rest.
I also have multiple classes that could be one main class and multiple small ids to make it look cleaner but I'm too lazy to do that. I declared primary and secondary color variables to easily change if I wanted to but I don't use them. My CSS isn't amazing but. If it works it works and you should only worry about it once it significantly affects performance (which is basically never).

[Paprika]

not really because I name the classes for its core functions with hints at the name. For exemple, my enlarging when hovering with cursor is named .embiggen

It's Ms Marvel's (Khamala Khan) shout when she gets a part of her body bigger for fighting purposes (such as hands, feets, etc) so I know that without checking, if I want an enlarging at hover I just have to add class="embiggen" and I don't have to even look at the CSS to know what it does.

I used to forget or mix myself because at the beginning I used numbers like class one, class two, etc. So I moved to a better naming system for myself and it works nicely (so far...)

[devils]

Not really, mostly because I don't have many classes or ids. I used to struggle with it too, but changing it to semantic HTML helped me a ton because instead of

Code

<div class="section"></div>

I can just write

Code

<section></section>

It just makes easier for me to remember the few classes I have if I'm not worried about the basic structure of the site (besides, it is a good HTML practice, especially when it comes to accessibility for screen readers...). I also give each class and id a fairly descriptive name.

I used to not care for these aspects too much and just went with div soups when I first started coding, but nowadays I can't bring myself to code like that ahahah.

[DorianBay]

to be fair flexboxes have a lot of nuances.

The nuances are what makes me forget, I think. Every page has a slightly different container, be it flexbox or grid, and each of their classes is so similar that I forget about the ones where the same one could be used.

If it works it works and you should only worry about it once it significantly affects performance (which is basically never).

This is interesting, could you explain a bit more about what you mean by affecting the performance? I also have pages which look different from each other. I heard that a different CSS file for each page makes the site load more slowly because of the browser caching each file. Because of that, I use one basic CSS file and put any page-specific CSS into the head of the page.

I used to forget or mix myself because at the beginning I used numbers like class one, class two, etc. So I moved to a better naming system for myself and it works nicely (so far...)

Ngl your naming system sounds amazing! I'm gonna consider doing it too. So far, I've just used "ordinary names" like .container and .post_content which works for me, but I'd love to throw in a few references to my favourite shows and books!

 

Not really, mostly because I don't have many classes or ids. I used to struggle with it too, but changing it to semantic HTML helped me a ton

Okay, I am so glad I'm not the only one who does this! I tend to have a lot of classes for elements which don't have a fixed place in the DOM for every site, when it's not recommended to use classes (on the body tag), or when I need to override the default behaviour set by my CSS selectors. I have a lot of cases like

Code

.post > section > h2

where I mix my classes which are used often with selectors. I love semantic HTML as well, it truly makes it easier for me to code + I want my site to be as accessible as can be.

The problem is those classes with nuances like flexbox or gird, where some pages are just slightly different and I have created a lot of similar classes or ids that I forget that I can just reuse an already existing one.

[MediocreMetastasis]

This is interesting, could you explain a bit more about what you mean by affecting the performance? I also have pages which look different from each other. I heard that a different CSS file for each page makes the site load more slowly because of the browser caching each file. Because of that, I use one basic CSS file and put any page-specific CSS into the head of the page.

I probably should've said loading time. 20 years ago you would've have to of really considered your html and css code as websites took way longer to load as I believe the browser downloads the website into your ram and download speeds were pretty slow. The more classes you use, the bigger the file size of your CSS is, longer it takes to load the file. So one generic class used for a bunch of elements would be better than multiple different classes, however, websites load very quickly modern day. The only thing that would take a while to load is very large images as they have very large file sizes.

It is true that a different css file for each page is slower. But again, files load extremely quickly these days.
Also having everything in one css file makes it less readable and makes the first page the user loads take longer than the rest.

[DorianBay]

It is true that a different css file for each page is slower. But again, files load extremely quickly these days.
Also having everything in one css file makes it less readable and makes the first page the user loads take longer than the rest.

Thanks for making it clear! I definitely see what you're saying. I'll keep on doing what I'm doing then, possibly moving the CSS for each page into its own file. It doesn't bother me to have it in the head but it does make the HTML document where it's at harder to read and edit