4 ms·

Whats a good place to learn CSS for someone with programming experience? I've been in my low-level C++ world for a long time and am pretty out of touch with GU

by geokon 8y ago

Whats a good place to learn CSS for someone with programming experience? I've been in my low-level C++ world for a long time and am pretty out of touch with GUI/Web things. I was writing some JavaFX code and saw it can be extended with CSS, but I don't know where to start. I'd also like to tweak the CSS on my webpage, but also don't know what's what. What I've found online is targeted towards people starting out coding with Javascript so it's very slow and hands on and doesn't step back and explain the big picture

HillRat 8y ago
Eric Meyer’s CSS books for O’Reilly are unsurprisingly exhaustive. For incremental, hands-on work, try using Codepen to slowly work your way through bounded use cases (e.g., set up a pen and just work on styling buttons, or flex layout, or transforms); Codepen also lets you use preprocessors like SASS and LESS inline, so it’s a great way to get used to the various quirks of CSS and its toolchains without having to set up entire projects.
ibrault 8y ago
+1 to HillRat's answer (especially hacking around in Codepen). On top of his, I want to plug the Mozilla Web Docs [0]. They're absolutely wonderful to reference for all your CSS needs, especially if you learn well from reading the docs. On top of that, they have excellent tutorials as well. I would consider checking out their one on CSS [1], you might find it easier to get through than an O'Reilly book. A little unrelated but as someone who also loves their C++ and low-level programming I really enjoyed Lin Clark's articles on Firefox's Stylo [2] and WebRender [3], I think they do a great job of intuitively explaining the back-end behind CSS rendering, if that's of any interest to you. [0] https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/ [1] https://developer.mozilla.org/en-US/docs/Learn/CSS https://developer.mozilla.org/en-US/docs/Learn/CSS [2] https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-en... [3] https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/ https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-f...
- geokon 8y ago
  These are great. Thanks for the breakdown - the whole webdev space has so much jargon that I probably should take the time to learn a bit of everything through the Mozilla tutorials and then pick up that book once I want some more
pjmlp 8y ago
I've got two nice books. https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/responsive-web-design-html5-and-css3 https://www.packtpub.com/web-development/responsive-web-desi...
teniutza 8y ago
I'm sure you'll get over the basics pretty quick. After that, check this out http://learnlayout.com/ http://learnlayout.com/.
vmware508 8y ago
Don't waste your time... use clever css frameworks and solve the problem on spot... doesn't matter how nice your css code, your colleagues will mess it up quickly... let the intern fix it. ;)
userbinator 8y ago
I learned it from the CSS spec, and playing around with a text editor and a browser open. It is very much a "hands on" activity, but if you want to see "the big picture" then the introductory sections of the CSS spec are quite useful.
Theodores 8y ago
Now is a really good time to learn. This is because CSS has been done spectacularly badly to date and very few people have taken time to learn how to effectively use much of what has arrived in the last couple of years. Therefore you don't have to learn the bad stuff, you can get stuck in with the better ways of doing it. I have watched the talk that goes with this post and I think that this is useful to better understand where Laura is coming from. She has gone deep reading the code for implementing the 'cascade' and you have to give her credit for getting people talking. However, in the article there is some idea of solving responsiveness. There is a better starting point and it is this - CSS variables. In the olden days people would have one chunk of common CSS and then media queries that would have other chunks of CSS in them. The better way is to only have CSS variables in media queries and then to have all the style declarations use the CSS variables. In this way you can have maintainable CSS where it is clear to see what changes. An example, if you have an image in a figure then you might want it to appear on the right hand side in a desktop layout and full width on mobile. So in the root element of the CSS you can define --my-figure-grid-column as 1 and then in the media query for desktop you can then set the variable to 2. Then in the style rule for the image you can have grid-column: var(--my-figure-grid-column). If you review the code a few months later and decide you want the image on the left you can see what is going on and what you need to change. With old CSS you would probably decide to just bolt yet more style rules to the bottom with !important to hack it good. CSS Grid is a good place to start, this is the new layout engine and it works in 97% of used browsers. If you start from content with sensible HTML5 elements instead of 'div soup' and make it responsive with CSS Grid and CSS variables then you will have as much fun as a kid with LEGO. There are a few other things on starting out, one being to forget about pixels and percentages. Go with ems and 'vh/vw/vmin/vmax' instead. Document structure matters too, if you are using CSS Grid then you don't need the div tags or the spans. You also don't need the clutter of many classes added to every div. So maybe strip your webpage back to bare content, burn the existing CSS and any 'reset.css' type of files that are there for Internet Explorer 6 related reasons. Get the page structured with the HTML tags of header, main, footer, article, section, aside, nav, figure and the ones you know already for doing lists. Then get it looking good on all browsers with CSS Grid with layout problems solved with CSS variables. You can then move on to the more decorative things.
pault 8y ago
I learned a lot of CSS early in my career by experimentation, but everything that has been added to the language since css 3 I have learned from MDN, CSS Tricks[0], and the autocomplete in chrome dev tools. [0] https://css-tricks.com/ https://css-tricks.com/

by geokon 8y ago

HillRat 8y ago

Eric Meyer’s CSS books for O’Reilly are unsurprisingly exhaustive. For incremental, hands-on work, try using Codepen to slowly work your way through bounded use cases (e.g., set up a pen and just work on styling buttons, or flex layout, or transforms); Codepen also lets you use preprocessors like SASS and LESS inline, so it’s a great way to get used to the various quirks of CSS and its toolchains without having to set up entire projects.

ibrault 8y ago

+1 to HillRat's answer (especially hacking around in Codepen). On top of his, I want to plug the Mozilla Web Docs [0]. They're absolutely wonderful to reference for all your CSS needs, especially if you learn well from reading the docs. On top of that, they have excellent tutorials as well. I would consider checking out their one on CSS [1], you might find it easier to get through than an O'Reilly book. A little unrelated but as someone who also loves their C++ and low-level programming I really enjoyed Lin Clark's articles on Firefox's Stylo [2] and WebRender [3], I think they do a great job of intuitively explaining the back-end behind CSS rendering, if that's of any interest to you. [0] https://developer.mozilla.org/en-US/ https://developer.mozilla.org/en-US/ [1] https://developer.mozilla.org/en-US/docs/Learn/CSS https://developer.mozilla.org/en-US/docs/Learn/CSS [2] https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-en... [3] https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/ https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-f...

geokon 8y ago
These are great. Thanks for the breakdown - the whole webdev space has so much jargon that I probably should take the time to learn a bit of everything through the Mozilla tutorials and then pick up that book once I want some more

pjmlp 8y ago

I've got two nice books. https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/professional-css3 https://www.packtpub.com/web-development/responsive-web-design-html5-and-css3 https://www.packtpub.com/web-development/responsive-web-desi...

teniutza 8y ago

I'm sure you'll get over the basics pretty quick. After that, check this out http://learnlayout.com/ http://learnlayout.com/.

vmware508 8y ago

Don't waste your time... use clever css frameworks and solve the problem on spot... doesn't matter how nice your css code, your colleagues will mess it up quickly... let the intern fix it. ;)

userbinator 8y ago

I learned it from the CSS spec, and playing around with a text editor and a browser open. It is very much a "hands on" activity, but if you want to see "the big picture" then the introductory sections of the CSS spec are quite useful.

Theodores 8y ago

Now is a really good time to learn. This is because CSS has been done spectacularly badly to date and very few people have taken time to learn how to effectively use much of what has arrived in the last couple of years. Therefore you don't have to learn the bad stuff, you can get stuck in with the better ways of doing it. I have watched the talk that goes with this post and I think that this is useful to better understand where Laura is coming from. She has gone deep reading the code for implementing the 'cascade' and you have to give her credit for getting people talking. However, in the article there is some idea of solving responsiveness. There is a better starting point and it is this - CSS variables. In the olden days people would have one chunk of common CSS and then media queries that would have other chunks of CSS in them. The better way is to only have CSS variables in media queries and then to have all the style declarations use the CSS variables. In this way you can have maintainable CSS where it is clear to see what changes. An example, if you have an image in a figure then you might want it to appear on the right hand side in a desktop layout and full width on mobile. So in the root element of the CSS you can define --my-figure-grid-column as 1 and then in the media query for desktop you can then set the variable to 2. Then in the style rule for the image you can have grid-column: var(--my-figure-grid-column). If you review the code a few months later and decide you want the image on the left you can see what is going on and what you need to change. With old CSS you would probably decide to just bolt yet more style rules to the bottom with !important to hack it good. CSS Grid is a good place to start, this is the new layout engine and it works in 97% of used browsers. If you start from content with sensible HTML5 elements instead of 'div soup' and make it responsive with CSS Grid and CSS variables then you will have as much fun as a kid with LEGO. There are a few other things on starting out, one being to forget about pixels and percentages. Go with ems and 'vh/vw/vmin/vmax' instead. Document structure matters too, if you are using CSS Grid then you don't need the div tags or the spans. You also don't need the clutter of many classes added to every div. So maybe strip your webpage back to bare content, burn the existing CSS and any 'reset.css' type of files that are there for Internet Explorer 6 related reasons. Get the page structured with the HTML tags of header, main, footer, article, section, aside, nav, figure and the ones you know already for doing lists. Then get it looking good on all browsers with CSS Grid with layout problems solved with CSS variables. You can then move on to the more decorative things.

pault 8y ago

I learned a lot of CSS early in my career by experimentation, but everything that has been added to the language since css 3 I have learned from MDN, CSS Tricks[0], and the autocomplete in chrome dev tools. [0] https://css-tricks.com/ https://css-tricks.com/