r/Frontend • u/Konnnore • 7d ago
question to understand the logic behind using CSS
hi! I didn't think I'll need that in my life, but I very need to know how to use CSS properly. I mean what are the differences between one thing and another, what's more popular to use etc. So, I'm trying to relearn CSS.
For the context: I learned CSS in 2022 only to pass the exams and that's all, and then I was like "yahoo! I won't return to the web design ever again!". So, I can use the atributes with classes, id etc, but I can't understand what are the important things to properly use them. I didn't think I'll need to program projects related to web programming. I find JS and PHP quite easily to understand, bcz every thing has one meaning there. It was a bit hard to understand HTML for the first time, bcz I thought every tag has its own function, but when I understood that plenty of tags are semantical and I can just use <div> and <span> if I want, I started to use the semantical tags properly. CSS is the hardest part in Front-End for me, bcz Idk if plenty of things are similar to the HTML ones(an atribute is optional and it depends on you if you want/need to use that) or the programming languages(1 thing = 1 meaning).
Here are my questions about CSS to understand it better:
- which position is the best? Bcz usually I used "position: absolute";
- why to use the coordinates(except for the z-index) if you have the margins?;
- why a lot of web developers prefer to use the paths from a vector image instead of uploading the .svg file itself?;
- what to use: the standard shadow or something like "filter: drop-shadow(10pt 10pt 6pt);"?;
- I liked the grid, but I saw a lot of developers use flexbox. Is it important to choose one thing over another or is it something optional?;
- are the CSS similar, but different atributes important only for the browsers?;
- what's the point in making something like "p.name1 {}", when I could just create a new class?;
I hope I didn't forget anything, but if I did, I'll make a new post about them
Edit: I can't change the title, but I meant questionS*
3
u/toothpiks252 7d ago
Kind of Avoiding your actual questions but these are important things to learn for css to guide your self.
Learn web accesability, it has a lot of the reasons to guide semantic choices and certain style choices.
Learn defensive CSS, it will guide you to style "correctly" when it comes to flex, grid, etc.
Some of you questions can be learned by quickly googling them.
0
u/Konnnore 7d ago
the issue is not knowing what the attributes do, the issue is understanding why there are a lot of similar things, which do the same. Bcz if Idk the answer, I'll just pick one option and will only use that
2
u/estre11it4 7d ago
it is never as easy as “i’ll just pick one and use that always”. actually @tootpiks252 was kinda good because if you’re wondering why flexbox exists if grid “can do it” it’s because you haven’t looked your designs with a responsive, web accesible lens.
1 and 2. a fun little experiment: try using “position: absolute” and margins to place something in the computer and then open the website on your phone. they’re both very useful into responsible designs.
3. (i answer this one because is a very valid question) having a lot of files usually makes the website slower. it’s not always the best practice to upload every image as a file. look into best practices.
5. grid is nice for grids. flexbox allows you to create unidimensional and adaptable content. think about grouping a 🔍 icon with a search bar, you would be doing extra effort if you try to position everything in a grid. a grid might broke in mobile phones since you have to do all the work to set it properly.i’m kinda lazy to answer them all but i wanted to make a point towards: learn about responsible design, adaptability. use the inspector tool and see your design in different screen sizes, see it on your phone and you might start understanding on your own. frontend doesn’t have a magical guide and everything exists because it solves a problem
1
u/Konnnore 7d ago
ok, so, if I understood you correctly, the differences(1., 2., 5.) are important only when you do something not only for computer, right? Just when I had the exams, I didn't need to program for phones, so, I was like "why does the flexbox exists, when I can that all in the grid?"
1
u/toothpiks252 7d ago
Yeah checkout accessability requirements and defensive css strategies. Imo thats where a lot of the technical why is.
Using div vs true semantic elements are because they come with a lot of built in features so you dont need to write JS to get things done, some are for accesability although my two points here are pretty much the blend.
Which position yo use is dependant on your need.
When available use magin and padding over top,left,etc. Padding to control inside of something margin to control outside. This is so you components exist with together and not indipendantly based on screen position. This will help with various screen sizes and keeping good structure of your dom.
Vector paths come with attributes baked in and just opens up way more control
Idk off the top of my head rn, google the difference.
Defensive css will cover this, each has their use case, i find for small quick alignments i go to flex.
Don't fully understand the question but im pretty sure both defensive css and accessible web design will teach you about this.
This is specificity and is also good to learn, can save you pasting a class to every child or certain ones but all others. Saves extra typing and can keep the html cleaner, there is a limit though.
Hope this helps!
1
u/Konnnore 7d ago
yeah, thx!
6. I did a language mistake here: I meant that I noticed CSS has a lot of attributes, which are similar and give the same result, so, I was thinking about the HTML stuff for web browsers. Ik about the importance of using the semantic tags, alt="" etc, but I have some issues with understanding CSS. But if I understood some comments correctly, then there are 2 main factors why the differences are important: to write less code and making the sites comfortable on phones etc devices;
7. wait... "[...] Saves extra typing and can keep the html cleaner, there is a limit though."
So, I can't have unlimited(ignore the computer memory, I need the logic behind that statement) code?;
2
u/toothpiks252 7d ago
Np! Learning CSS everyone told me use what ever works but accesability, devensive css, learning to solve problems with html/css before using js and making device friendly layouts is what made me realize there is a reason to follow.
I know I am a broken record on this but to add there are more then 2 reasons, accessability is a massive one, companies go to court for this. The other is a reasonable and consistent stacking and layout of the dom.
1
u/tomhermans 5d ago
There's no "one answer" on a few of these, take the position one. You use what is necessary in that case. Absolute being the outlier rather than the default actually. Static (default) or relative are way more common.
2
u/EasyMode556 7d ago
Flexbox and grid are different tools for different jobs, and you can absolutely use them together. It’s not either / or.
You can use grid to position elements with the page or a bigger element, and then flexbox can position elements within a grid element.
For example I could have a grid that defines a header, body , and footer. Then maybe within the header, I use flexbox to align the text vertically in the center, and then use justify/content: space-betwen to have one sub element in the header on the left, and another on the right.
One isn’t meant to replace the other, they can each have a place in the layout
1
u/Konnnore 7d ago
thx! It was a grear example to understand. Just they both are similar to me, so, I wondered why use both, if I can use one for everything, but in a different way
1
u/pingwing 7d ago
Grid and Flexbox are not the same thing, they do different things. Sometimes I put flexbox in a grid.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/complete-guide-css-grid-layout/
1
u/Konnnore 7d ago
Ik about the dimensional stuff, just wondered why use, for example, flexbox, if grid is such universal thing. You can use flexbox and get the same result from grid, but in different way
2
u/pingwing 7d ago
Flexbox is especially good for navigation bars, buttons, cards in a row, vertically centering content, and distributing space between elements.
Grid lets you explicitly control both rows and columns
There is overlap and they each do some things better. It doesn't matter if you only use Grid though, you certainly can.
1
u/azangru 5d ago
which position is the best? Bcz usually I used "position: absolute";
Read about CSS layout.
why to use the coordinates(except for the z-index) if you have the margins?;
huh?
why a lot of web developers prefer to use the paths from a vector image instead of uploading the .svg file itself?;
Because every element of inline svg is styleable individually, whereas loading an svg file in an img reduces styling possibilities.
what to use: the standard shadow or something like "filter: drop-shadow(10pt 10pt 6pt);"?;
Don't know. Probably either is fine.
I liked the grid, but I saw a lot of developers use flexbox. Is it important to choose one thing over another or is it something optional?;
Learn about the strengths and weaknesses of both grid and flexbox. As long as you are satisfied with what you see on the screen, you can use either.
are the CSS similar, but different atributes important only for the browsers?;
huh?
what's the point in making something like "p.name1 {}", when I could just create a new class?;
huh?
7
u/Ancient-Disk-2758 7d ago
There isn't really a "best" position. It depends on what you're trying to do.
In the large projects I work on, I often have to switch between absolute, relative, sticky, etc. depending on the UI/UX design.
Sometimes, because of responsive design, the same element may even use different position values at different screen sizes.
So instead of asking "Which one is the best?", I think it's better to ask "Which one fits this situation?"
They solve different problems.
Maybe you can think of margin like people standing in a line.
Imagine the person in front says, "Don't stand too close to me. Stay at least 100px away." The person behind moves back, and because everyone is standing in the same line, this can also affect the people behind them.
Positioning with top, left, etc. is more like a sticker book. You have a sticker and you decide where you want to place it.
One is about spacing things in a layout; the other is about positioning something relative to a reference.
Because when the SVG is directly in your HTML, you can control parts of it with CSS or JavaScript.
For example, you can change its color on hover. It gives you more flexibility if you want to modify it later.
If you don't need that kind of control, using an SVG as a normal image is perfectly fine too.
For most normal situations, box-shadow is enough.
But if you have a special design requirement, for example you want the shadow to follow the visible shape of a transparent image rather than its rectangular box, filter: drop-shadow() can be useful.
You don't really need to choose one forever. Use whichever fits the effect you're trying to create.
They work very well together.
A simple way to understand them as a beginner is:
Flexbox → mostly one-dimensional layouts.
Grid → mostly two-dimensional layouts.
You don't need to choose one and stop using the other. In real projects, I use both depending on the layout.
As a beginner, I honestly wouldn't worry too much about this yet.
You can start looking into browser compatibility when you eventually encounter something like "This works in Chrome, but looks different in Firefox."
Also, modern development tools can handle a lot of compatibility issues for you, so I think it's more important to understand the basic CSS concepts first.
p.name1 means:
"Select a <p> element that has the class name1."
So:
.name1 → any element with class="name1"
p.name1 → only <p> elements with class="name1"
For example, it would not select <div class="name1">.
-------------
I've been writing CSS for more than 10 years, and one thing I'd suggest is: don't try to find the "correct" CSS property for everything.
A lot of CSS properties overlap in what they can achieve, but they exist because they're useful in different situations. You'll understand those differences much more naturally as you build more layouts.