A lot of CSS rules are no longer relevant. Further, with tooling like CSS-in-JS, many of the CSS tricks of years ago are no longer necessary since the JS can handle it in a more elegant and legible way.
The most important parts of CSS IMO are Flex, the Box Model, typography, colors and knowing how to copy-paste snippets that accomplish almost exactly what you need and adjusting the one or two values necessary for your use case. Further, you'll end up using CSS libraries like Tailwind and Post-Processors like Sass in most professional environments which handle the rare edge cases under the hood.
My advice is focus on accomplishing clear-cut goals such as replicating a mock-up or a website you like rather than trying to learn all of the rules and values by memory. Again, most of them are no longer relevant.
This will help. Start using html5 grid for all layout. It's better than flex box because it does both columns and rows plus areas.
Then switch to Scss for it's power in Specivity. The only others things needed are margins, colors, borders, font size and padding. Use only em, rem or vh sizes and you're set.
position: absolute and position: relative. Most important is you understand how this attribute interacts with a child element and its parent container (e.g. an absolute div within a relative div), as well as the bottom, top, left, right attributes.
There's also position: sticky but I think the only time you'll use that is with a navbar
edit: as another user pointed out, there's fixed too. But imo absolute and relative are by far the most important due to how they are influenced by every other element in the DOM.
A lot of CSS rules are no longer relevant. Further, with tooling like CSS-in-JS, many of the CSS tricks of years ago are no longer necessary since the JS can handle it in a more elegant and legible way.
The most important parts of CSS IMO are Flex, the Box Model, typography, colors and knowing how to copy-paste snippets that accomplish almost exactly what you need and adjusting the one or two values necessary for your use case. Further, you'll end up using CSS libraries like Tailwind and Post-Processors like Sass in most professional environments which handle the rare edge cases under the hood.
My advice is focus on accomplishing clear-cut goals such as replicating a mock-up or a website you like rather than trying to learn all of the rules and values by memory. Again, most of them are no longer relevant.
Sorry, forgot to say. Feel free to post your exact questions and many people will be kind enough to guide you through them.
Thanks, this is very insightful
This will help. Start using html5 grid for all layout. It's better than flex box because it does both columns and rows plus areas.
Then switch to Scss for it's power in Specivity. The only others things needed are margins, colors, borders, font size and padding. Use only em, rem or vh sizes and you're set.
Hey buddy. What’s the problem?
Just trying to figure out what to use and when to use them.
Been practicing building a number of Tables. Will move on to forms after this.
Just want to be a to style a page from scratch
Learn flexbox religiously, as well as the position attribute. After a lot of practice with that CSS will be a walk in the park for you bro.
Alright, I have not covered flexbox yet. Maybe that will be the key.
For position attribute, which ones do you mean ?
position: relative|absolute|fixed|sticky
Just understand what each of those 4 options does and you'll be miles ahead.
position: absoluteandposition: relative. Most important is you understand how this attribute interacts with a child element and its parent container (e.g. an absolute div within a relative div), as well as the bottom, top, left, right attributes.There's also
position: stickybut I think the only time you'll use that is with a navbaredit: as another user pointed out, there's
fixedtoo. But imoabsoluteandrelativeare by far the most important due to how they are influenced by every other element in the DOM.I will do that
table is notoriously difficult to style. form inputs also have very peculiar traits, as you have to override browser default styling.
Perhaps take a step back to learn how block elements like div and inline elements like span behave with CSS.
I feel the same way about a lot of it. These comments are super nice, and props to you guys for helping a fellow dev out!
Absolutely i agree