3 ms·

So, as someone who currently has no background in web stuff, but is leaning that way, should I be paying a lot of attention to this, or put it on the shelf for

So, as someone who currently has no background in web stuff, but is leaning that way, should I be paying a lot of attention to this, or put it on the shelf for now? How does this fit in or compare to Less or Sass?

jordanlev 9y ago
The article is primarily talking about keeping your CSS modular... writing CSS that applies only to one "component" of a page (e.g. a box in the sidebar or a header logo or a navigation menu or whatever). LESS and SASS have more to do with the fine-grained details of CSS syntax... primarily reducing repetition (via nesting, mixins, variables, etc). I personally wouldn't worry about any one particular technology (other than CSS itself), but I have found over the years that the most immensely helpful technique when working with CSS is keeping things as modular as possible. Basically, ignore the "C" (Cascade) in CSS, either with compiled / scoped components (like the linked article is talking about) or through a naming convention like BEM or SMACSS.
afarrell 9y ago
If you have no background in CSS+HTML, you probably want to actually start by learning a clear mental model for how CSS and layout actually works. Otherwise, working with CSS is going to feel like https://imgur.com/gallery/Q3cUg29 https://imgur.com/gallery/Q3cUg29. If you are actually able to predict what layout would result from a small snippet of CSS and HTML, it makes things much easier. So how do you get there from 0? 1) Read this page: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduct... and then play this game. https://flukeout.github.io/ https://flukeout.github.io/ 2) Open a file in a text editor with a <style> element and a <body> element to play around with. 3) Enter file:///path/to/that/file so you can view it. 4) Download a Spaced Repetition flashcard app like https://apps.ankiweb.net/ https://apps.ankiweb.net/ For more on how Spaced Repetition works, see https://www.youtube.com/watch?v=eVajQPuRmk8 https://www.youtube.com/watch?v=eVajQPuRmk8. 5) With all that open, work through http://book.mixu.net/css/ http://book.mixu.net/css/ As you are going through it, test things out yourself and take notes. Make flashcards that test your ability to remember why certain things work the way that they do. Also make flashcards for things that seem surprising. Try to keep them small and focused. 6) When you get to the flexbox section, take a break and play this game: http://flexboxfroggy.com/ http://flexboxfroggy.com/ If you are the sort of person who likes understanding things at a deeper layer of abstraction than you actually work, read https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ https://www.html5rocks.com/en/tutorials/internals/howbrowser...

jordanlev 9y ago

The article is primarily talking about keeping your CSS modular... writing CSS that applies only to one "component" of a page (e.g. a box in the sidebar or a header logo or a navigation menu or whatever). LESS and SASS have more to do with the fine-grained details of CSS syntax... primarily reducing repetition (via nesting, mixins, variables, etc). I personally wouldn't worry about any one particular technology (other than CSS itself), but I have found over the years that the most immensely helpful technique when working with CSS is keeping things as modular as possible. Basically, ignore the "C" (Cascade) in CSS, either with compiled / scoped components (like the linked article is talking about) or through a naming convention like BEM or SMACSS.

afarrell 9y ago

If you have no background in CSS+HTML, you probably want to actually start by learning a clear mental model for how CSS and layout actually works. Otherwise, working with CSS is going to feel like https://imgur.com/gallery/Q3cUg29 https://imgur.com/gallery/Q3cUg29. If you are actually able to predict what layout would result from a small snippet of CSS and HTML, it makes things much easier. So how do you get there from 0? 1) Read this page: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduct... and then play this game. https://flukeout.github.io/ https://flukeout.github.io/ 2) Open a file in a text editor with a <style> element and a <body> element to play around with. 3) Enter file:///path/to/that/file so you can view it. 4) Download a Spaced Repetition flashcard app like https://apps.ankiweb.net/ https://apps.ankiweb.net/ For more on how Spaced Repetition works, see https://www.youtube.com/watch?v=eVajQPuRmk8 https://www.youtube.com/watch?v=eVajQPuRmk8. 5) With all that open, work through http://book.mixu.net/css/ http://book.mixu.net/css/ As you are going through it, test things out yourself and take notes. Make flashcards that test your ability to remember why certain things work the way that they do. Also make flashcards for things that seem surprising. Try to keep them small and focused. 6) When you get to the flexbox section, take a break and play this game: http://flexboxfroggy.com/ http://flexboxfroggy.com/ If you are the sort of person who likes understanding things at a deeper layer of abstraction than you actually work, read https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ https://www.html5rocks.com/en/tutorials/internals/howbrowser...