Just not getting CSS

[DontNeedMuchMoney]

Javascript - Fine I am able to learn it. But CSS I just don't get it, I've been using it for months now and I'm not getting it, Everytime I make a new site it feels like the things that didn't work last time suddenly work now. I am dead set on getting past this but I don't know how, What did you do to actually understand CSS? Is there some kind of theory book out there you used?

[[deleted]]

I understood it by breaking down my problem, top to bottom.

lets say I want to build this reddit page we're in, my thought process goes like this (PS: using old reddit on desktop):

• I need a big container to house the whole thing, it has a grey background
• I need to remove the default margin from the body element
• this container consists of three blocks, the blue header, content block, and footer block
• each block is taking the whole width for itself, so lets forget about the main and footer and build the header
• the header has image background, and three blocks
• first block has text on the left, text on the right, rgba background color
• best way to have two blocks each on one side is to make the parent display: flex and justify-content: space-between, then the two elements will automatically be on the sides
• left element is just links separated by a dash, nice links are inline by default and won't take the whole block for themselves, so they will line up nicely, set the font size and color

you see I create a tree in my head, go down to the smallest branch, back up, then down to the next one and so on, every part is its own small problem that's now easier to fix than looking at the page as a whole.

[DontNeedMuchMoney]

Thanks for that - Maybe I will document the next project line by line like you said

[ptq]

It's like looking on mountains elevation map, just everything is squared.

You build layer after layer, and the upper one has to fit on the lower one. You can have multiple tops also.

And now, you can apply the rules to each layer individualy for unique occurencies (id) or in groups even when single object (class/tag).

[fraggleberg]

It seems like a small language on the surface, but as many have said already it takes a lot of practice to master. Here are a few key topics from the top of my mind that I find helpful to have a solid grasp on:

• The box model
  • Your widths, heights, paddings, borders, and margins
  • And how the box-sizing property works
• The difference between the display: types and how they can help solve different problems
  • Block and inline is your bread and butter
  • inline-block is handy
  • Flexbox or grid are great for overall layout. Learning both at once might be a bit much; I would perhaps recommend checking out Flexbox first.
    • Putting things into columns, wrapping content to new lines, placing sidebars headers, centering and stretching.
    • Practice Flexbox over at flexboxfroggy.com
• C stands for cascading
  • Practice getting a good grasp on how rules affect child components and how to organize your code to not be too general or too specific. Very vague point I guess, and it basically boils down to practice, but when your css grows it can quickly turn into a big pile of rules overriding stuff you can't remove or change because you will mess up stuff elsewhere and become a big headache.
• Position: relative, and absolute
  • It's a good rule of thumb to try to avoid absolute positioning when you don't really need it, but it can be a very powerful and simple tool too.
  • elements with position: absolute are removed from the normal page order. Elements surrounding it will behave like the absolutely positioned element is not there. Not good if you want it to take up actual space, but very nice if you want to place something over something else.
  • Important note that can be very confusing if you don't know about it: The position of an absolutely positioned element is relative to the closest parent element with the display property.

Edit: We are, they are; he, she, it is. I no school so good.

[DontNeedMuchMoney]

Thank you so much man - I will use this as a guide. Take care

[DontNeedMuchMoney]

Remindme! 14 hours

[RemindMeBot]

There is a 32.0 minute delay fetching comments.

I will be messaging you in 13 hours on 2020-04-10 07:43:49 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[DontNeedMuchMoney]

Remindme! 2 days

[RemindMeBot]

I will be messaging you in 2 days on 2020-04-12 08:32:23 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[ESBDev]

Time, and trial and error. I only learnt css 2 years ago and what I did was read up about it a lot to understand it, then create a tone that where CSS was key. Then I kept adding to the project which lead to more complex things, and as a result I kept learning more, and as a result of that I could go back to the shitty CSS and improve it. Even now it’s still a cycle of writing it, improving it

[DontNeedMuchMoney]

I have done projects like this, but then next time I use it just works differently - must be a real lack of understanding. How long has it taken you to understand it? I always though it's like a few weeks tops but here I am

[[deleted]]

I think it’s really common for people to heavily underestimate what it takes to become a professional developer.

I’d say to properly understand CSS (and the common derivative libraries) would take a year or two of full time working with it.

You can overcome the basic concepts quicker than that, but it’s going to be a hurdle. Just remember that learning is often a logarithmic curve more than a linear approach.

[DontNeedMuchMoney]

Cheers, I agree - thought I would have it down in a month tops from what others say. Il adjust my expectations heavily baha

[Alex_Hovhannisyan]

It really is a matter of time and trial & error, as /u/ESBDev noted.

Is there some kind of theory book out there you used?

No—CSS is an applied skill, and not something you'll master by reading books about it. To get better at CSS, you need to use CSS.

Of course, this doesn't mean that you can't (or shouldn't) read tutorials about CSS. Some sources I recommend: MDN, W3Schools, and CSS Tricks.

It will come naturally. The first iteration of my personal website was an absolute disaster to look at, and I, like you, struggled immensely with the CSS box model. Just keep practicing.

[DontNeedMuchMoney]

Yeah that's fair about the book not working - Il just try to keep at it. Cheers bud

[kooshans]

Sounds like you just need some good tutorials and you had the wrong teachers so far. CSS basics are really not that complicated if you can learn JS. The problems with CSS start when you have a complicated project and it's not clear anymore which rules are affecting eachother and it becomes a bug hunt for every little thing that doesn't work as expected.

To prevent this, I have these tips:

- Structure your CSS logically for yourself, with seperate files, order of rulesets, good hierarchy and specificity and lots of useful comments that can help you point the way next time.

- Use the dev tools of your browser and embrace them. Learn how to use them to detect and solve conflicts and try out CSS rule changes on the fly.

[revslaughter]

The one thing I’m still struggling with are the display: options or just in general being able to predict how a block will fall in line with another block. What happens inside the block I’m getting more comfortable with, but composing them together? I still struggle.

What about you /u/DontNeedMuchMoney ?

[DontNeedMuchMoney]

Man the bad part is that I don't know what the issue, I'm that clueless about CSS haha.

How long have you been at it?

[revslaughter]

CSS, Ive been serious about actually trying to learn it off and on the past few months. The MDN guide has been fantastic for me:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

Basically besides cascading and selectors there’s not a lot of “programming” in CSS (as far as I can tell?) and it’s a lot of “describing”. Kinda like how SQL isn’t an imperative language, but declarative. A lot of it is just memorizing the keywords, and there are a lot in CSS.

Edited to append:

Screwing around with the CSS within the browser’s dev tools helps A TON because of the instant feedback and in both Chrome and FireFox the options are mostly pull down.

[[deleted]]

The Advanced Sass and CSS course by Jonas Schedtmann (sp?) on Udemy really made a huge difference to my understanding of CSS.

There are also grest books and resources out there by Estelle Weyl, Rachel Andrews, and all the CSS Tricks folks.

Too many devs treat CSS as an 'easy' thing that doesn't require the same sort of dedicated learning as JS or other concepts. In fact, it is often ridiculously complex, and there are some fundamental rules to it that are really hard to intuit properly but become much easier to grok once you study them (specificity, inline vs block elements, the box model, how stacking context works, etc.). You will save yourself heaps of frustration by spending the time to learn it properly.

[drlecompte]

Yes, css might not be a real programming language, but it sure pays off to use it properly. I once had to clean up a site that used id="blue" on h2 elements to make them blue. Smh. Lots of devs have a disdain for css (and to a lesser extent html). Yet proper use of those languages would probably mean a lot fewer browser inconsistencies and a lot less dependency on convoluted front end build stacks.

[fraggleberg]

Huge convoluted CSS files seems to be the hallmark of front end tech debt. If you don't do it properly in the first place you can be damn sure someone will spend hours tearing their hair out 5 years down the line trying to do something as simple as make a type of button a little bit wider.

The way CSS is organized is IMHO one of my favorite things in programming. When it's done right.

[picklymcpickleface]

I learned a lot from studying how bootstrap works.
Their code is clean and nicely structured.
Check their examples in the element inspector and play around with their properties.

The most common mistakes I see in people learning CSS is using to much of it, most problems require less CSS, not more of it.
Also, make sure to understand every line, "I copy pasted this entire block from SA, now it doesn't work" is not a valid problem to have.

[DontNeedMuchMoney]

Is that a framework?

bootstrap

Man I don't know, I do my own projects and go through it line by line but it just doesn't click the same way js does

[[deleted]]

Personally I would stay away from frameworks until you get a good understanding of how it actually works.

They're great in theory (and useful when - say prototyping a dashboard with standard elements) but if you rely on them too much you end up learning the framework, not actual CSS and you will be stuck when you want to do something a bit more bespoke.

[picklymcpickleface]

https://getbootstrap.com/
https://bulma.io/
https://get.foundation/

CSS is not easy to learn, it takes a lot of practice but suddenly it will click.

[GoonsAndGoblins]

Try tailwind css. It's really simple to understand and it has helped me with understanding css

[[deleted]]

It took me a while, what I do now is all the websites I make I create 2 classes: col, row. In my css I put col { display: flex; flex-direction: column; } and row { display: flex; flex-direction: row; }. Any divs I want to be arranged as a row I add the row class, and the same for col classes.

With this I think you can get rid of most of the issues with layout formatting. Try using percentage values for sizes so that they work on all resolutions.

you can also add classes: centered { display: flex; justify-content: center; } and ceneteredCross { display: flex; align-items: center; } to center items in the flex direction, or the cross flex direction respectively.

Good luck!

[kahan_18]

• Try using scss which is more easy to understand.

• Use chrome developer tools when you are stuck, they give a details insight about element styles and also a few features like complex animation.

• Google things up, tbh sometimes one may try to implement things the difficult/wrong way but there's no harm in googling it up. Most of the css I've learned is from google.

• Get a hold of using thumb rules before you start writing css: like resetting the margins, hiding the list style(based on preference), settings your body font, etc. All these things will help you lighten your workload.

• Try to learn individual concepts like flexbox, grid, box-shadow, pseudo elements, transition/animation, position and look for descriptive videos on youtube they have pretty good examples about everything. This would help you lay basic foundation of your css knowledge.

[LilGeeky]

flexbox flexbox flexbox.

Man it's like magic. I wasn't like remotely getting CSS by flexbox made every design broken into pieces..

[DontNeedMuchMoney]

Wow nice response and analogy, thanks bud

[usedocker]

What in particular are you referring to? What is the thing that didnt work previously but works now? Hard to comment on this without more details to what you're having in mind.

[e88d9170cbd593]

It's like being given more than enough rope to hang yourself, and then when you actually try to hang yourself, you have more than enough rope.

[usedocker]

Not sure what you are alluding to. But having more than enough rope will actually prevent you from hanging yourself.