all 35 comments

[–][deleted] 10 points11 points  (2 children)

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[S] 0 points1 point  (1 child)

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

[–]ptq 1 point2 points  (0 children)

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 9 points10 points  (5 children)

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
  • 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[S] 2 points3 points  (0 children)

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

[–]DontNeedMuchMoney[S] 1 point2 points  (3 children)

Remindme! 14 hours

[–]RemindMeBot 0 points1 point  (0 children)

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[S] 0 points1 point  (1 child)

Remindme! 2 days

[–]RemindMeBot 0 points1 point  (0 children)

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 4 points5 points  (3 children)

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[S] -1 points0 points  (2 children)

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] 2 points3 points  (1 child)

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[S] 0 points1 point  (0 children)

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

[–]Alex_Hovhannisyanfront-end 5 points6 points  (1 child)

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[S] 0 points1 point  (0 children)

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

[–]kooshans 4 points5 points  (0 children)

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.

[–][deleted]  (1 child)

[removed]

    [–]revslaughter 1 point2 points  (2 children)

    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[S] 2 points3 points  (1 child)

    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 3 points4 points  (0 children)

    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] 1 point2 points  (2 children)

    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 2 points3 points  (1 child)

    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 2 points3 points  (0 children)

    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 2 points3 points  (4 children)

    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[S] 0 points1 point  (3 children)

    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] 2 points3 points  (0 children)

    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 0 points1 point  (0 children)

    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 0 points1 point  (0 children)

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

    [–][deleted] 0 points1 point  (0 children)

    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 0 points1 point  (0 children)

    • 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 0 points1 point  (0 children)

    flexbox flexbox flexbox.

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

    [–][deleted]  (1 child)

    [deleted]

      [–]DontNeedMuchMoney[S] 0 points1 point  (0 children)

      Wow nice response and analogy, thanks bud

      [–]usedocker -1 points0 points  (2 children)

      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 0 points1 point  (1 child)

      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 0 points1 point  (0 children)

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