51–60 of 358 posts
As others mentioned the complexity of CSS makes it very powerful, thus complex. Don't underestimate it as some low level icing.
I would start here with CSS:
https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC...
Earlier quoted context omitted.
> There's very very good reasons why practically all software nowadays has gone to HTML/CSS based UIs. One being that practically all software nowadays are webapps and there's no choice. For those that aren't webapps and whose GUI toolkit use CSS or something like CSS, it's probably to try to pull people that already have experience with webapps.
> and there's no choice And this is the thing that many web developers miss. As they've begun to creep into the mobile and desktop space, intent on replacing native experiences with a continual barrage of non-native, bespoke apps, each with their own design, they've mistaken widespread availability with quality and utility — that HTML/CSS UIs are widely available is all to do with ubiquity and lessening an otherwise…
Positioning is one thing, but CSS really shines in it's graphical abilities. Autolayout is fantastic, but have you tried writing the custom CoreGraphics code that is required to do anything outside of standard UIKit visuals? Not fun [0]. Being able to just type `background: linear-gradient(orange, green)` is a godsend compared to that stuff.
[0] https://github.com/amraboelela/myos.examples/blob/master/Cor...
Before going into web development, I wondered why some people were so picky about fonts when they all looked similar. I'm a little ashamed to admit that after 5 years, they still look somewhat similar.
The key areas that will probably help you the most are flexbox and grids. These are modern things that will make your life in CSS 10x easier and more productive. With flexbox and grid it becomes trivial to do "hard" things like centering div's, full-height divs, footers etc etc. Use flexbox for laying things out in one dimension (e.g. "I want these related to appear in a row/column") and use grid for doing two dimensional layouts (e.g. "I want a bar across the top and bottom and then two columns in the middle"). Mix and match flexbox and grid (e.g. use flexbox inside of a grid area) and you've got 90% of the CSS done in my experience.
This guide for flexbox is awesome and spells it all out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (although their site's visual design is the worst type of hideous garbage IMO, but I can forgive them that for the content)
The last 10% is fiddling around with colours and margins and font sizes etc. I'm no designer and rely on the UX and Visual Designer to tell me what colours/fonts/margins/etc to use, but regardless there is actually something very very satisfying about nailing the CSS and seeing something ugly transform into something really nice right before your eyes.
Also a final top tip is to get familiar with your dev tools in your browser of choice. Doing "real time" edits in the browser (in CSS but also DOM & JS too) then updating the code in your IDE is something I do frequently.
1. Is there a Stack Overflow CSS snippet you can use as-is that solves your problem? Score!
2. No? Fiddle with random bits until it looks OK in your browser of choice (Chrome). Display: block and position: absolute are great time savers, slap that on most things.
3. Ship it! Onto the next feature!
Pro-tip: Pixels totally work and you should just stick to that everywhere. The browsers and device manufacturers have kindly taken the necessary steps to make it Just Work no matter what the medium.
In case you think I'm being sarcastic, only half. Nobody cares about your beautifully cascading, resolution independent em's and semantically beautifully structure. The whole thing will be run through an uglifier anyway and probably you should just have used JS for your runtime generated layout anyway if you have any kind of dynamic behavior.
The idea with CSS was that we would be able to separate content from presentation. Remember CSS Zen garden? Yet that has never been the case and div tags were always needed to be able to display something simple.
Another promise was that content would be displayed easily on different mediums, desktop, mobile even print.. yet it's impossible to get decent rendering in every medium.
For the first years of CSS it was always easier to get a decent layout with tables than with it.
Finally all the CSS preprocessor, like saas and compass show how incomplete the technology really is.
>Incidentally, but very likely related, I always failed to have any glimpse into how design works. I have no idea which colors "go" with which ones, and pretty much all fonts look like the same for me. Yeah, you're not a designer. Note I'm not insulting you. :) CSS is very much like magazine or print layout IMO. If you're not used to that, it won't gel well. If you think of layout from a design perspective and _not_…
Can I be really predictable and give a "very different response"? Worked in magazines for years, still do a lot of print cartography, and I find CSS a completely different mindset to Illustrator or InDesign or Quark or whatever. It just feels like a weird outlier to me - not freeform enough to fulfil the "design" role, not programmatic enough to fulfil the "developer" role.
CSS doesn't seem to be experiencing the same revival or energy that JS is still experiencing.
Classic example is CSS grids that is only recently starting to become ubiquitous in commonly used browsers, and the new units of measurement that go along with it like 'fr'. CSs does not feel stagnant to me, but is evolving I think... Perhaps not at the breakneck speed that JS libraries are, but then the core of ECMAScript is not going as fast as JS libraries either.