
Modern CSS Explained - MikusR
https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
======
FPGAhacker
I would like to take this opportunity to confess that I was baffled by the use
of the term float in CSS since inception. I vaguely thought it must have
something to do with layers and you would float an image to the top layer.

It only occurred to me recently that float actually meant float from a 2d
point of view. As in a side view of an aquarium, you attach float to an
object, and it goes to the top of the tank, displacing water along the way.
You can float it left, and right, etc... goes to the left and right of the top
of the aquarium. Things line up at the top if you float multiples, etc.

I don't know if that is an appropriate analogy or not, but it seems to fit for
me.

~~~
masklinn
FWIW CSS simply adopted the term from publishing:

> A floating block in writing and publishing is any graphic, text, table, or
> other representation that is unaligned from the main flow of text. Use of
> floating blocks to present pictures and tables is a typical feature of
> academic writing and technical writing, including scientific articles and
> books. Floating blocks are normally labeled with a caption or title that
> describes its contents and a number that is used to refer to the figure from
> the main text.

> […]

> Floating blocks are said to be floating because they are not fixed in
> position on the page at the place, but rather drift to the side of the page.
> By placing pictures or other large items on the sides of pages rather than
> embedding them in the middle of the main flow of text, typesetting is more
> flexible and interruption to the flow of the narrative is avoided.

~~~
combatentropy
> unaligned [...] rather than embedding them in the middle of the main flow of
> text

I don't understand. The first and simplest use of CSS float that I learned is
to embed an image into the text flow, with the text wrapping around it,
[http://allwebco-templates.com/support/S_textwrap.htm](http://allwebco-
templates.com/support/S_textwrap.htm)

I always thought that was its original purpose. And it is its effect in its
purest form --- when you set the float property and nothing else. (Using it to
lay out a page in columns, as the article mentions, usually takes juggling
other properties, like margin, width, etc.)

------
joaodlf
Excellent! This is from the same author as "Modern JavaScript Explained For
Dinosaurs"[1], that article got me much more closer to understanding the
insane world of modern frontend development, I would recommend it to any other
"dinosaurs" like me.

I'm very excited about modern CSS, I grew up in the crazy world of floats and
the transition to responsive, new concepts like flexbox and grid are much more
sensible approaches to layout design.

[1][https://medium.com/the-node-js-collection/modern-
javascript-...](https://medium.com/the-node-js-collection/modern-javascript-
explained-for-dinosaurs-f695e9747b70)

~~~
bringtheaction
Thanks for the link, good and useful article indeed. What I miss from it
though is an explanation of how to debug bundled or transpiled code. I am
aware of the existence of source maps, but I've never used them. Until I am
able to debug my code efficiently with source maps I cannot adopt bundling nor
transcompilation for my projects. Does anyone have a good quality article or
video that explains this?

~~~
setr
I never used them myself but i thought the point of source maps was that the
major browsers understand them; you load them in the browser on command, and
can then debug from there, as you would normally with unbundled code

------
sireat
Excellent article for a dinosaur like me.

So much of CSS seems like a square peg trying to fit into a round hole.

I've had to occasionally delve into webdev since 1994 and despite progress CSS
still seems clunky.

Currently I am going through Udemy's Jonas Advanced CSS course

I love the idea of grid layouts, SCSS rocks, BEM sort of makes sense.

Still I hate the fact that I can't quickly iterate layout/design with CSS
unless I am really proficient with CSS.

I do not want to keep all the CSS quirks in my head!

Reading questions like this(oldie but still):
[https://stackoverflow.com/questions/396145/how-to-
vertically...](https://stackoverflow.com/questions/396145/how-to-vertically-
center-a-div-for-all-browsers) makes me recoil in horror.

For one there is no software tool that can let someone visually move elements
around and still produce reasonable CSS.

On one end you have mockup(Mockplus for one) and beginner(shades of Frontpage)
level tools which produce monstrous write only CSS.

On other end you have regular developer tools(VS Code, browser dev tools etc),
which do not really help you with layout.

So it seems for making SPA you need 3 people:

    
    
      1. Designer making mockups
      2. CSS expert converting said mockups to usable HTML/CSS
      3. Programmer actually working with DOM manipulation
    

My complaint is that when I am doing regular desktop development, I can wear
all 3 hats only consulting designer ocassionally.

With webdev it seems incredibly hard to go alone.

SVG seeems such a normal standard compared to CSS.

~~~
rimliu

      > I do not want to keep all the CSS quirks in my head!
    

Some had to care about IE6, _that_ was the time you had to keep quirks in the
head.

~~~
notahacker
You've still got to deal with the fact that some browsers support some aspects
of CSS Grid, some you have to fall back to Flexbox which doesn't work in the
same way and you'll still use some grid system based around floats or
display:table to capture everyone. More choice of ways to do the same thing,
some very useful media queries, but most of the rest of it could have been
done equally hackily in the late 90s.

If IE6 was bad, the fact that we're on the third or fourth generation of
different implementations of CSS layout aiming to reproduce common layout
styles achieved with HTML tables in the 90s and still need javascript
polyfills to use them on non-autoupdating browsers still in widespread use is
ridiculous

~~~
collinmanderson
I'm intentionally not learning CSS Grid until it has good browser support.
That way I only need to keep one thing in my head at a time, and I don't need
to write a bunch of fallbacks. I did the same thing with Flexbox.

------
wellpast
This kind of tech writing — the historical/anthropological - especially wrt
web tech is far more helpful to me than the technical & how-to docs etc.

Just knowing _why_ things are creates a much better context for me to place
the knowledge, understanding and appropriate use for each property/feature
etc.

~~~
normaljoe
I completely agree. I went down the rabbit hole a few months ago and started
reading some of Dennis Ritchie's papers on his home page. I particularly liked
the C history linked below. I found it interesting around how the limits of
the memory drove creation of things like the ++ an -- operators. Limitation
being the mother of invention it's amazing, at least to me, how far we have
come in such a relatively short period of time.

[https://www.bell-labs.com/usr/dmr/www/chist.html](https://www.bell-
labs.com/usr/dmr/www/chist.html)

------
m12k
As someone coming to web development from iOS development, CSS is the only
thing I've really been struggling with. I just have such a hard time working
with a model where changes aggregate around so much, so changes intended for
one place end up messing something up elsewhere. Maybe I'm just not using it
right? To me it just seems much saner that components (and the styling
thereoff) are by default completely isolated from each other and their parents
and children, and styling is only shared where you explicitly request it.
Maybe this is due to the historical roots, where CSS is intended to style
documents rather than apps? Maybe it's in the same category as JavaScript in
that it's easy to hack something together that sorta works, but it takes a lot
more overview and discipline to create something sane and maintainable? And
where there are a ton of online resources that are outdated or will teach you
bad habits?

~~~
naasking
> I just have such a hard time working with a model where changes aggregate
> around so much, so changes intended for one place end up messing something
> up elsewhere.

You're better off with functional/atomic css then, because the styles aren't
cascading like css is typically used, which, while powerful, doesn't scale. As
such, the classes defined in an atomic css framework are consistent and
reusable everywhere. See for example,
[http://tachyons.io/](http://tachyons.io/)

It maps much better to the programmer mindset, where we're typically
generating dynamic content, and so generating the sets of style classes needed
entails just using our usual code reuse techniques.

~~~
m12k
Thank you for the tip - this does indeed seem to map much more to the way I
tend to think.

------
hardwaresofton
Excellent article -- this kind of concise history is something beginners need
now more than ever. Also, I think it's ridiculous that CSS could be considered
the hardest language to learn but I can forgive the hyperbole.

One nitpick: I wish the article had started with a html file that used style
properties to influence DOM nodes though -- the <link> tag is basically
glossed over, could be a stumbling block.

------
collyw
More of this sort of article please. This is the sort of thing I come to HN
for.

------
dmitriid
I also highly recommend this article, "CSS Utility Classes and "Separation of
Concerns": [https://adamwathan.me/css-utility-classes-and-separation-
of-...](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)

This helps you wrap your head around semantic-vs-layout CSS and
Functional/Atomic CSS

~~~
rimliu
And then visit [http://www.csszengarden.com/](http://www.csszengarden.com/)
(also metioned in the article) and take that article with a huge grain of
salt. Especially with advent of CSS Grid some thing that were difficult do
achieve because source ordering still had a play are much easier now.

To me it looks like people still don't take HTML and CSS seriously. By this I
mean they do not think that it is worth understanding neither HTML nor CSS and
"whatever Boostrap does" is good enough.

Looking at that "Atomic CSS" abdomination: maybe let's just bring back <font>
and friends and be done with it.

Or people just forgot what web was for…

~~~
dmitriid
There's nothing abominable in the Atomic CSS. In order to achieve Zen Garden
with Zen Garden approach you need a PHD in brain-bending. It's enough to open
any of the CSS files in Zen Garden to see the amount of tedious repetitive
manual work, where every single small element has to be manually tweaked and
adjusted.

> Or people just forgot what web was for…

The web _was_ for simple text documents. News flash: the world has changed,
and the web has changed, too.

------
spyckie2
This needs a part 2 on the history of the philosophy of CSS code. It should go
through 4 eras:

Table and Frames - how layouting dominated the CSS school of thought

Grids and Frameworks - the mighty grid frameworks that gave you lots of stuff
for free at the cost of the language itself (and your freedom)

CSS Themes - how SASS, naming conventions, and framework customization created
the era of CSS theming

CSS Components - how we realized everything we did in the past was wrong,
fixed up the language itself, and made styles servants to modular components,
the way it should have been all along (spoiler alert: Javascript helped).

~~~
debaserab2
> CSS Components - how we realized everything we did in the past was wrong

Not really. This was born out of necessity - deeply nesting components within
other components doesn’t work so well when styling with broadly defined CSS
selectors. So, we generate class names (or inline styles) directly in our
application.

It comes with its own trade offs. I don’t know that adding a build step and
tightly coupling your styling with your DOM counts as “fixing” css, but I
suppose it all depends on your perspective.

It’s more like we kind of threw away one of the main principles of CSS and
forced a completely new philosophy upon it.

~~~
fiddlerwoaroof
This is the fundamental issue with most of the web technologies, though: we’ve
taken a platform intended to essentially display documents with a tiny bit of
interactivity and turned it into an operating system.

------
icc97
In a similar fashion to the start of the article you have

1\. [http://motherfuckingwebsite.com/](http://motherfuckingwebsite.com/)

2\.
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

3\. I wrote a slight further step for minimal forms/bootstrap
[http://ianchanning.com/mofoforms/](http://ianchanning.com/mofoforms/)

~~~
imaginamundo
I tried to do the same thing while keeping the same appearance between
browsers. Tried to use some graceful degradation on some parts, but this
articles really made think differently about the way I write css.

[https://imaginamundo.github.io/boilerform/](https://imaginamundo.github.io/boilerform/)

------
chatmasta
I built my first website in 2003 on freewebs.com, and a couple more from
2004-2006. [0] [1] I remember “slicing” layouts in Macromedia Fireworks and
Photoshop. You would draw rulers over the main components, and the program
would generate a monstrosity of <table> tags to convert the layout to HTML. It
was an improvement over Microsoft frontpage. At that time CSS was largely used
for fonts and colors. I even had a feature on one of those websites where you
could “switch layouts” by using a different css file with new colors.

Then developers started decrying the use of tables for layout, and sites like
AListApart (referenced in this article) really pushed for more reliance on
CSS. It seemed like we were then stuck in an uncanny valley from 2006-2015
when, even though some browsers supported modern flexbox/CSS3 features, you
couldn’t really use them if you wanted feature parity between browsers because
so many users were stuck on older browsers due to enterprise upgrade rules.

What really improved css, and the web in general, is automatic browser
updates. Chrome was the first to implement it and now its commonplace. Not
only that, but the security community spent a decade shaming enterprises for
rules against upgrading software. Now, finally, it seems like enterprises are
realizing the insecure thing to do is _not_ upgrade.

It’s an interesting interplay of pressure between chrome/Firefox browser devs
and security community that got us to a place where a huge percent of browsers
are the latest version. It really can’t be understated how much this trend has
helped frontend developer productivity the past few years.

[0]
[http://web.archive.org/web/20040610011616/http://www.mainelo...](http://web.archive.org/web/20040610011616/http://www.mainelobsters.org)
This beauty got me 2nd place in the "maine student web design awards" for
middle schoolers! You can see the layout switch if you choose "aqua" or "mid
morning breeze". I think I actually implemented it with two different slicing
layout. All the images are dead now, but you can see from where they were
positioned what slicing used to look like.

[1] Ok, so probably nobody cares about this, but I'm enjoying the blast from
the past... here was my second site the next year. This one didn't win the
competition, which I think was due to my trash talking on the competition
forums lol.
[http://web.archive.org/web/20070104015744/http://www.splitat...](http://web.archive.org/web/20070104015744/http://www.splitatoms.com:80/sa/tutorials/view.php?id=30)

~~~
josefresco
"I remember “slicing” layouts in Macromedia Fireworks"

I share this history, and while Fireworks _would_ export complete HTML,
"responsible" web builders never allowed that. We would use the "slice"
feature of Fireworks to manually export elements of our designs, and then
using HTML/CSS we would create the layout code. Raw exports from Fireworks
were horrendous, our hand-build layouts were lean, and worked great.

~~~
sangnoir
> I share this history, and while Fireworks would export complete HTML,
> "responsible" web builders never allowed that.

I guess I wasn't responsible - I confess that I left DreamWeaver's output
intact: those sweet, shiny rollover buttons where easier handled by
mm_preloadImages() :-D.

------
mxstbr
If the end of the article made you curious about CSS-in-JS this is a great
follow-up read about the why's and how's of putting your CSS into your
JavaScript: [https://medium.com/seek-blog/a-unified-styling-
language-d0c2...](https://medium.com/seek-blog/a-unified-styling-
language-d0c208de2660)

Highly recommended!

~~~
RobertRoberts
This seems to be only useful for large teams building complex web apps. :P For
everyone else, inline-css is a horrible idea.

~~~
philplckthun
It can actually help everyone to write CSS more quickly and in a scalable and
structured way. Not saying that everyone should and needs to get on the CSS-
in-JS train, but I'd certainly recommend any team of any size to investigate
it.

Also, it doesn't have any association with inline-css and -styling. What all
new CSS-in-JS libraries do is generate actual stylesheets in a performant and
sensible manner.

~~~
RobertRoberts
>What all new CSS-in-JS libraries do is generate actual stylesheets in a
performant and sensible manner.

Which web components will make obsolete. Therefore they are a temporary hack
of sorts.

------
lenkite
I recommend Rachel Andrews "The New CSS Layout" for understanding everything
in CSS layout: [https://abookapart.com/products/the-new-css-
layout](https://abookapart.com/products/the-new-css-layout)

------
redleggedfrog
I laugh every time I see the culmination of CSS has resulted in grid based
layout. You mean, like tables?

~~~
RobertRoberts
Yes, but grid/css is _designed_ for layout. Tables was a bastardization of
markup designed for data display. (ie, a table of data, like in a spreadsheet)

Unless you have truly dug into how awesome grid is, you can't really
understand what it's done for the future of web design.

I will look up a short tutorial I ran into that really showed me the
power/value of grid. (fyi, I use CSS daily in my work)

Edit: Here's one example. You could use tables, but this is incredibly
flexible and with media queries you can completely manipulate the layout and
position of the design based on the screen size. And the markup is incredibly
light, it's fabulous for those of us who want more control and less work to
do, _and_ less debugging of browser quirks.

[https://bitsofco.de/github-contribution-graph-css-
grid/](https://bitsofco.de/github-contribution-graph-css-grid/)

~~~
taeric
Of course, the argument can also take it that HTML was designed to markup
textual documents. Such that getting HTML to do what an SVG could easily have
accomplished is a touch excessive. :)

I suspect there is a middle ground here. But I can't shake the feeling that as
soon as you had to add all of the elements of the chart with javascript, the
options were already high that you could have used another method just as
easily.

As an example, this would not have been difficult with absolute positioning.
See a crummy Rubik's cube I built using absolute positioning in [1]. I could
have generated more of the styles using a loop construct in a programming
language, so there is room for help, but we already had javascript for that.

[1] [http://taeric.github.io/cube-
permutations-1.html](http://taeric.github.io/cube-permutations-1.html)

~~~
RobertRoberts
That's a neat example there. But with the grid example, it was more a
technology demonstration to show the power of a css tool so new most people
don't even know what it's capable of. (at least I didn't fully know)

So it inspires me to study more into grid. I avoid hacks like the plague, and
it's saved me tons of effort, time and money, and even emotional stress. Grid
is not a hack, but a full fledged solution to layout. It's how it should have
been done to begin with, if we could have condensed 20 years of global
css/html experience into an instant. :P

HTML is just a markup language, not a display language. Even an H1 element has
styles set by the browser, without that, it wouldn't look any different than
an H2.

------
treerock
Useful to get an overview.

I tend to delegate a lot of this to 'whatever bootstrap does'. Does anyone
know if bootstrap fits neatly with any of these methodologies?

~~~
crikli
Pretty solidly in the float schema / era. At least up to version 3. I started
using CSS grid and haven’t looked back except for the occasional polyfill.

~~~
laken
Bootstrap 4 I believe has switched to Flexbox entirely, but the naming
conventions have stayed the same for the most part.

------
latte
Just a minor note, in a couple of places there is "inherit" written where the
author clearly intended to write "inherent".

------
xab9
And this is just CSS. As a full time frontend dev (started it back in the days
of table-based designs) sometimes I look into the mirror and honestly think
that I'm a hero :D From mm_mouseover and Netscape Navigator to PWAs, electron
apps, responsive layouts, REST apis, webpack, babel and object spread, the web
today is getting dangerously close to rocket science.

~~~
ramijames
Since 1996 I've been doing frontend work. First it was HTML with table layout,
all the way up to modern js frameworks (although I prefer laravel). I've
recently taken on doing a lot of backend work for the first time, and it
finally clicked for me why people have had a hard time with CSS. It's a
totally different mode of thinking.

------
JepZ
Finally, someone mentions SMACSS.

I learned about it a few years ago, but whenever I saw blog posts they mostly
mentioned OOCSS and BEM. Meanwhile, I was more focused on SMACSS and was
wondering if it became obsolete or what happend, but I coulnd't spot why OOCSS
or BEM should be any better.

I am quite happy with SMACSS, but as that probably doesn't mean much, as those
rule sets become crucial when you are working on a long term code base with a
large team. So I would argue that SMACSS is probably a little harder to learn
and produces a little higher quality. But while large code bases should always
aim for maximum quality, using something which requires a few extra steps to
learn ins't the best thing to be introduced to a large team.

------
majewsky
> To use Sass, you need to install Ruby

Nitpick: You don't need to. There is `sassc`, a Sass/SCSS compiler written in
C (which is great for someone like me who hates Ruby with a burning passion).
(The article surprisingly hints at this by mentioning libsass later on.)

~~~
sondr3
This is a recent development however, the first few years of using SASS was
with Ruby and more often than not Compass as well. In the context of what he’s
talking about he is not wrong.

------
fergie
Its still not clear to me why native CSS doesn't/shouldn't support variables.

~~~
electrotype
It does : [https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_v...](https://developer.mozilla.org/en-
US/docs/Web/CSS/Using_CSS_variables)

~~~
brlewis
Pretty cool though < 80% supported as of now. [https://caniuse.com/#feat=css-
variables](https://caniuse.com/#feat=css-variables)

------
thomasfl
Good read! This article is specially interesting for "dinosaurs" who have been
coding html and css since the 1990's. It has been complicated to implement
layout on web pages. Slowly it is getting better though.

------
bbx
Very nice writeup! I like the fact that he explained both Flexbox and Grid, as
they can both be misunderstood since in some cases they can be
interchangeable, although they work quite differently.

If you like step-by-step guides, you might enjoy this tiny tutorial I made
last year: [https://jgthms.com/web-design-
in-4-minutes/](https://jgthms.com/web-design-in-4-minutes/)

------
bewresu
Remember the sliding doors button technique? Good times.

------
thomasfedb
What I've anyways wanted was a mixin-only Sass library so I can start with
nice building blocks and still end up with bloat-free semantic CSS.

Today I found Kickstart ([http://getkickstart.com](http://getkickstart.com)),
which seems to be an option if only it was more obviously maintained! Any
others liked it out there?

~~~
lambdadmitry
Surprisingly, Bootstrap v4 may fit your bill. If you into the source, it's all
scss and mixins, so you can freely pick and choose. Besides, it covers any
possible corner case out there thanks to its massive adoption.

~~~
thomasfedb
It's certainly all scss, but not all mixins. Ideally there'd be a framework
that output nothing more than normalize.css until you used the mixins.

------
snorremd
I really liked this summary, and I recall having gone through some of these
stages myself. Discovering BEM and ITCSS made my life a lot better. Even when
building React apps now using CSS in JS I still try to maintain BEM style
class names. It just feels right.

~~~
onion2k
I quite like BEM (and SUIT, and OOCSS), but every single naming scheme is hard
to enforce when it's just a 'process you must follow' type of system. There's
nothing about BEM that stops me adding a .homepage__contactform-name style to
a list item on the news page (apart from my colleagues rejecting the pull
request or something). Consequently it's far too easy to use BEM very poorly
especially when you're working under pressure.

Stylelint and PostCSS have postcss-bem-linter, but that just checks the name
is in a BEM style rather than testing that the style is being applied to the
right element. Linting style names is definitely better than nothing, but
really I want some way to tie class names to elements that's both easy to use
when I'm writing code, and straightforward to ensure my class names actually
match what ends up in the browser.

~~~
Hedja
You can do this with CSS Modules using BEM Classnames and a function to
generate BEM classnames given a Component Name and State/Props.

The function can then pick the generated classes out of the CSS Module's JSON
import. If the classname doesn't exist, it can warn to the console.

It's farely straight forward in React. You just need to make sure you always
use the function to provide values to the className prop instead of manual
strings.

------
maelito
I wonder if there are other languages that like CSS work by exception. You add
"cases" (switches based on the classes, ids, tags) to portions of CSS not by
adding lines (like traditional functions) to them but by extending them with a
distant block.

~~~
goldenkey
:not kind of disproves your point unless you are only talking about ancient
CSS.

------
RobertRoberts
To add to the mix:
[https://www.youtube.com/watch?v=7kVeCqQCxlk](https://www.youtube.com/watch?v=7kVeCqQCxlk)

------
peeters
Is it reductive for me to say that we're finally getting the GridBagLayout
that I was using for Java Swing UIs 15 years ago?

------
jstewartmobile
In a world where things like this[0] have legitimate reason to exist, an
article where phrases like "barbarianism", "dumpster fire" or "you have got to
be fucking kidding me" aren't central to the thesis hasn't _really_ explained
modern CSS.

[0] [http://howtocenterincss.com](http://howtocenterincss.com)

~~~
rimliu
If you understand CSS those things do not have reason to exist. You may have
similar sites for the various concepts in various languages— e.g. pointers in
C, block syntax in Objective-C. Yes, there were omissions in CSS which made
centering _vertically_ and only in _some_ cases difficult, but far cry from
"dumpster fire".

~~~
jstewartmobile
If you're writing an OS or a driver for the machines we have, whether it's C
or Rust, pointers are unavoidable.

The entire web platform is insane. Even basic things--like versioning--or
error reporting--were completely ignored. Semantic markup has been mostly
abandoned. Accessibility has declined rather than improved. Something as basic
as column layout shouldn't require an article that long, but it does.

~~~
rimliu
The web is not insane. Trying to make application platform out of the document
platform—that's insane. But I agree 100% about accessibility. In the race to
win the stupid war against the native apps all the good was thrown out of the
window. Somehow this point is conveniently forgotten by those touting the
superiority of the web tech for the apps.

~~~
jstewartmobile
How is the web _platform_ not insane?

edit: PS, not downvoting anyone here. Just curious as to how other people
square html5+es5/6+css2/3 as anything more than an engineering failure and a
major waste of human effort.

Having to put a considerable amount of reading, googling, continuing ed--or in
some cases even a college degree--just to technically layout a page (
_technically_ \--not getting into aesthetics, readability, flow, taste, etc.)
is insane if you ask me.

~~~
RobertRoberts
Because in theory, you can build an application that will work on nearly every
device in the world? Think phones, desktop computers, tablets, watches, tvs.
With every conceivable operating system going back many years. And you don't
have to install or update any software, worry about data loss, accessing the
same data from multiple devices anywhere in the world.

Seems like there's a lot of good non-crazy reasons for the web to have taken
this turn. Is it perfect? Nope, but it's pretty damn cool that I can login to
a computer anywhere, put a point on a map, and have it show up on my phone,
and I am privacy nut. :P

~~~
jstewartmobile
If we're getting into application development, we have a sandboxed VM that a)
requires megabytes of npm/webpack/jquery/bootstrap mystery meat to paper over
all of the cross-platform and form-factor potholes, and b) allows everyone and
his brother to track your behavior in real time.

Go to practically any major content website and poke around in the developer
console. Check the cookies, the constant ajax requests, the payloads, the file
sizes, etc. It would be one thing if this were all for the sake of
compensating creators and good user experience, but I don't see that. I see a
dystopia where Google/Facebook/Amazon gets the sandwich, SV gets the crust,
and everyone else gets the shaft.

There have been many browser forks where some heroic soul tries to strip a few
of the more obvious f-yous out of Chromium or Firefox. They all eventually
give up. When even the #3 company is blasting through half a billion dollars a
year to put mr robot bullshit in their browser, any one-man effort in that
direction will be drinking from the fire hose.

~~~
RobertRoberts
So you agree the web is a good platform for mass global access... gotcha.

~~~
jstewartmobile
The web is a good platform for mass global _surveillance and control_. If that
still counts as " _pretty damn cool_ ", then yeah, you got me!

~~~
RobertRoberts
"Gotcha" means "I understand you", its not an accusation or a condemnation.

Technology is not a moral issue, how people use it is. You seem to be
confusing the two.

~~~
dragonwriter
> "Gotcha" means "I understand you", its not an accusation or a condemnation.

It can also mean, roughly, « _j’accuse_ »—or perhaps, “I have just proven the
accusation against you”—so it can be ambiguous when context doesn’t make the
intent clear.

~~~
RobertRoberts
Maybe to a non native english speaker the context could be misconstrued.

------
kuon
I'm using style-element with elm now, and for the first time in ages I enjoy
web dev.

------
aardshark
I'd love to read an article like this for C-style languages.

~~~
normaljoe
[https://www.bell-labs.com/usr/dmr/www/chist.html](https://www.bell-
labs.com/usr/dmr/www/chist.html)

------
foreigner
What about Web Components?

------
spankalee
Unfortunately, doesn't mention Shadow DOM.

~~~
maaaats
How is that relevant to CSS?

~~~
a_humean
It is actually relevant: [https://developer.mozilla.org/en-
US/docs/Web/Web_Components/...](https://developer.mozilla.org/en-
US/docs/Web/Web_Components/Using_shadow_DOM)

Support for it only exists on Chrome at the moment
([https://caniuse.com/#search=shadow%20dom](https://caniuse.com/#search=shadow%20dom)),
but things like Angular are already geared up to use it for encapsulating
styles, but defaulting to an emulated mode that is essentially css-modules:
[https://angular.io/guide/component-styles#view-
encapsulation](https://angular.io/guide/component-styles#view-encapsulation)

~~~
bpicolo
Vue scopes components through data attributes. I'm not entirely confident we
really need shadow dom support in browsers, as we have good strategies now of
creating components without it.

------
GreaterFool
"semantic class names"

What?! Leave the semantics alone!

