15 ms·

Modern CSS Explained

762 points by MikusR 9y ago

hardwaresofton 9y ago
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.
FPGAhacker 9y ago
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.
- camillomiller 9y ago
  Wow, that’s actually a cool way to make sense of the quirky things float does to various elements
- valgaze 9y ago
  Your aquarium analogy visualized: http://youtu.be/xara4Z1b18I http://youtu.be/xara4Z1b18I
  - baxtr 9y ago
    Thanks for sharing. This is insane. CSS is probably the language that I’ve been using for a long time without exactly knowing how these things like float exactly work. Instead, I’ve often used a copy and paste or test and browse approach to get layouts I wanted.
    - amygdyl 9y ago
      I'm quite sure that English is the language that I've been using for the longest time without exactly knowing how it exactly works! Or metaphorically I don't know exactly how English works when it decomposes so gracefully as it is capable of doing. Is there any kind of equivalence in programming languages like this? I mean theoretically is it possible to design or possibly write code such that it is capable of imprecision and yet compiling to equivalent instructions? (I realize I may simply lack the formal language to describe what I mean, but if by virtue of any fortuitous inherent redundancy in my question, a passing expert may recognise their field and be willing to guide me, I shall be most grateful.)
  - Dragonai 9y ago
    Holy cow. Thanks so much for sharing this!
- cup-of-tea 9y ago
  Does float mean what you thought it meant in other contexts? In LaTeX it's basically the same as it is in CSS.
  - kriztw 9y ago
    It has his meaning in tiling window managers (where a floating window is in another layer, usually above the others), and probably in window managers in general. I'm curious if there are other examples.
- fireattack 9y ago
  > it must have something to do with layers and you would float an image to the top layer Isn't it? If you float an image it does go to a top layer and blocks other non-float layer below it.
  - oneeyedpigeon 9y ago
    In 2d. The OP was using the term "top layer" in a 3d sense.
    - fireattack 9y ago
      Ah, I just realized he's talking about float with inline elements. I'm thinking of float with block elements, which works in the way OP originally thought.
- masklinn 9y ago
  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.
  - scardine 9y ago
    Yes, the term was borrowed from typography and is used in most professional DTP software.
  - combatentropy 9y ago
    > 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.)
- toddmorey 9y ago
  Thanks for the honest admission! Totally agree. I really feel the fragile mystery of floats and they way they operated is what drove so much adoption for CSS frameworks. It's true today that you can do more complex layout without any type of framework. But understand that for a period it was so much easier to use tested approaches than to battle the edge cases.
- fold_left 9y ago
  Rightly or wrongly, I always thought of it as being the (since deprecated) IMG align=left|right attributes' behaviour promoted for use by other elements.
joaodlf 9y ago
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-explained-for-dinosaurs-f695e9747b70 https://medium.com/the-node-js-collection/modern-javascript-...
- avip 9y ago
  Wow, I feel like going back in time and reading this to a younger self. Excellent writeup.
- bringtheaction 9y ago
  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 9y ago
    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
- greggman 9y ago
  I doubt it's ever coming but to really separate layout from content requires the layout tree and the content to be separate trees. Right now there's effectively only 1 tree, the DOM and CSS for the most part is just meta data on that tree. GRID requires things to actually fit a grid. If your grid isn't easily divided you add nested grids. But once you nest grids you can no longer seperate layout from content since the nested grid tree (layout) and the DOM tree (content) are tied together.
latte 9y ago
Just a minor note, in a couple of places there is "inherit" written where the author clearly intended to write "inherent".
maelito 9y ago
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 9y ago
  :not kind of disproves your point unless you are only talking about ancient CSS.
spankalee 9y ago
Unfortunately, doesn't mention Shadow DOM.
- maaaats 9y ago
  How is that relevant to CSS?
  - a_humean 9y ago
    It is actually relevant: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://developer.mozilla.org/en-US/docs/Web/Web_Components/... 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
    - maaaats 9y ago
      Interesting, thanks.
    - bpicolo 9y ago
      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.
    - spankalee 9y ago
      Safari and Opera support shadow DOM, Firefox is adding it currently.
snorremd 9y ago
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 9y ago
  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 9y ago
    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.
dmitriid 9y ago
I also highly recommend this article, "CSS Utility Classes and "Separation of Concerns": https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... This helps you wrap your head around semantic-vs-layout CSS and Functional/Atomic CSS
- keybits 9y ago
  Agree. (The OP article already links to this in the 'Atomic CSS' section.)
- afarrell 9y ago
  > Phase 3: Content-agnostic CSS components Huh. As a mostly-backend dev reading this, it seems like both this and react.js are driving toward a philosophy where you consider the existing html elements to be a box of legos with certain default behaviour and then you can also use CSS and Javascript to manufacture other components that have different behaviour. Then, after building up the components you need, you snap together your layout from those components.
  - dmitriid 9y ago
    Yup. It's also known as Atomic Design. I highly recommend this (not that long) book http://atomicdesign.bradfrost.com/table-of-contents/ http://atomicdesign.bradfrost.com/table-of-contents/ for an overview. Mind you, the concept is simple, but it's not that easy to implement it in practice.
- rimliu 9y ago
  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…
jstewartmobile 9y ago
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 9y ago
  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 9y ago
    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 9y ago
      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 9y ago
        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.
thomasfl 9y ago
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.
collyw 9y ago
More of this sort of article please. This is the sort of thing I come to HN for.
sireat 9y ago
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-center-a-div-for-all-browsers https://stackoverflow.com/questions/396145/how-to-vertically... 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.
- deleted 9y ago
  [deleted]
- sureaboutthis 9y ago
  In almost every case, I find that people who struggle so with CSS are those who do not have a proper understanding of either CSS or HTML. They do not know or understand the "box model". They will even state they are unaware of validating (error checking) either and some even openly state they see no purpose in it.
- rimliu 9y ago
  > 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.
  - 9y ago
xab9 9y ago
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 9y ago
  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.
majewsky 9y ago
> 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 9y ago
  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.
- blowski 9y ago
  I'm no expert, but isn't sassc just a C wrapper around libsass? If so, there are wrappers of libsass in most mainstream languages - PHP, Scala, Go, JavaScript, Python, etc. http://sass-lang.com/libsass http://sass-lang.com/libsass
treerock 9y ago
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 9y ago
  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 9y ago
    Bootstrap 4 I believe has switched to Flexbox entirely, but the naming conventions have stayed the same for the most part.
spyckie2 9y ago
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 9y ago
  > 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 9y ago
    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.
  - spyckie2 9y ago
    > 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 is a fix. While creatively combining CSS rules to accomplish layouting is a tenant of past CSS history, it was terrible for coding in the language itself. Using tables for layouting or vertical centering hacks is the same kind of pain as using single letter characters for all your variables. In the same way, using flexible selectors to select any grouping globally was historically a positive feature of CSS, but we've done it enough to know that it creates extremely painful bugs related to improper scope and needless amounts of copy paste code fixes. The real fix is properly scoping css, which is what BEM is about, but what modular components does better.
icc97 9y ago
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 9y ago
  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/
- K2L8M11N2 9y ago
  https://bestmotherfucking.website/ https://bestmotherfucking.website/
mxstbr 9y ago
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-d0c208de2660 https://medium.com/seek-blog/a-unified-styling-language-d0c2... Highly recommended!
- RobertRoberts 9y ago
  This seems to be only useful for large teams building complex web apps. :P For everyone else, inline-css is a horrible idea.
  - philplckthun 9y ago
    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 9y ago
      >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.
bewresu 9y ago
Remember the sliding doors button technique? Good times.
fergie 9y ago
Its still not clear to me why native CSS doesn't/shouldn't support variables.
- electrotype 9y ago
  It does : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...
  - fergie 9y ago
    Wow- TIL. Thanks.
  - brlewis 9y ago
    Pretty cool though < 80% supported as of now. https://caniuse.com/#feat=css-variables https://caniuse.com/#feat=css-variables
- amptorn 9y ago
  Because > CSS style sheets are short. They are not much bigger than one editor window. Very few people (only professional designers, it seems) write style sheets longer than a hundred lines. <https://www.w3.org/People/Bos/CSS-variables> https://www.w3.org/People/Bos/CSS-variables>
  - mcintyre1994 9y ago
    I'm pretty skeptical of that quote: HN's CSS is pretty minimal and comes in at 174 lines: https://news.ycombinator.com/news.css https://news.ycombinator.com/news.css It seems to be based on the W3C website where apparently 90% of style sheets are <163 lines, but I'd like to see that distribution over the internet as a whole.
    - jrimbault 9y ago
      Sidenote: the html markup of HN doesn't lend itself to "clean" css (whatever that means). Hence maybe why it's bit over that 163 mark line. Nested tables inside nested tables, with styles inlined.
GreaterFool 9y ago
"semantic class names" What?! Leave the semantics alone!
chatmasta 9y ago
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.mainelobsters.org http://web.archive.org/web/20040610011616/http://www.mainelo... 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.splitatoms.com:80/sa/tutorials/view.php?id=30 http://web.archive.org/web/20070104015744/http://www.splitat...
- pjmlp 9y ago
  > 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. I wish, in some enterprises Chrome is forbidden by IT security exactly because of them not being able to control when updates take place.
JepZ 9y ago
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.
bbx 9y ago
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/
lenkite 9y ago
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
thomasfedb 9y ago
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 9y ago
  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 9y ago
    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.
aardshark 9y ago
I'd love to read an article like this for C-style languages.
- normaljoe 9y ago
  https://www.bell-labs.com/usr/dmr/www/chist.html https://www.bell-labs.com/usr/dmr/www/chist.html
wellpast 9y ago
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 9y ago
  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
redleggedfrog 9y ago
I laugh every time I see the culmination of CSS has resulted in grid based layout. You mean, like tables?
- RobertRoberts 9y ago
  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 9y ago
    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 9y ago
      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.
peeters 9y ago
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?
RobertRoberts 9y ago
To add to the mix: https://www.youtube.com/watch?v=7kVeCqQCxlk https://www.youtube.com/watch?v=7kVeCqQCxlk
m12k 9y ago
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?
- wwweston 9y ago
  > changes intended for one place end up messing something up elsewhere. Maybe I'm just not using it right? CSS selectors allow you a really wide latitude in the applied scope of the styles you specify -- you can literally pick everything (with the asterisk selector), or you can pick only one thing (with an id selector). With an almost arbitrarily fine-grained set of possibilities in between. A project could take a component centered approach, with unique id and/or class names for every component and only using selectors that begin rooted with those id/class names (the unique names thing can be harder with a large team than it should be -- I've sometimes thought that rather than a CSS preprocessor, I could use a smart linter that can take some comment hints and manage problems like this better). Or you could moderate that a bit with a reasonable core set of global styles addressing typography and baseline margins/padding and a few layout concepts, and go component from there. And then follow two heuristics: when you find you're playing whack-a-mole, you probably do have too many overlapping broadly scoped styles. If you're repeating yourself over and over again (or even relying heavily on a preprocessor to repeat yourself), you might be better served by a more broadly scoped selector. If this doesn't describe your approach, maybe you are indeed just not using it right. :) (And welcome to the club, happens to all of us at some point). If this does describe your approach and it still hurts more than a bit, well, maybe it is indeed the fault of CSS.
- 9y ago
foreigner 9y ago
What about Web Components?
kuon 9y ago
I'm using style-element with elm now, and for the first time in ages I enjoy web dev.

762 points by MikusR 9y ago

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.

FPGAhacker 9y ago

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.

camillomiller 9y ago
Wow, that’s actually a cool way to make sense of the quirky things float does to various elements
valgaze 9y ago
Your aquarium analogy visualized: http://youtu.be/xara4Z1b18I http://youtu.be/xara4Z1b18I
- baxtr 9y ago
  Thanks for sharing. This is insane. CSS is probably the language that I’ve been using for a long time without exactly knowing how these things like float exactly work. Instead, I’ve often used a copy and paste or test and browse approach to get layouts I wanted.
  - amygdyl 9y ago
    I'm quite sure that English is the language that I've been using for the longest time without exactly knowing how it exactly works! Or metaphorically I don't know exactly how English works when it decomposes so gracefully as it is capable of doing. Is there any kind of equivalence in programming languages like this? I mean theoretically is it possible to design or possibly write code such that it is capable of imprecision and yet compiling to equivalent instructions? (I realize I may simply lack the formal language to describe what I mean, but if by virtue of any fortuitous inherent redundancy in my question, a passing expert may recognise their field and be willing to guide me, I shall be most grateful.)
- Dragonai 9y ago
  Holy cow. Thanks so much for sharing this!
cup-of-tea 9y ago
Does float mean what you thought it meant in other contexts? In LaTeX it's basically the same as it is in CSS.
- kriztw 9y ago
  It has his meaning in tiling window managers (where a floating window is in another layer, usually above the others), and probably in window managers in general. I'm curious if there are other examples.
fireattack 9y ago
> it must have something to do with layers and you would float an image to the top layer Isn't it? If you float an image it does go to a top layer and blocks other non-float layer below it.
- oneeyedpigeon 9y ago
  In 2d. The OP was using the term "top layer" in a 3d sense.
  - fireattack 9y ago
    Ah, I just realized he's talking about float with inline elements. I'm thinking of float with block elements, which works in the way OP originally thought.
masklinn 9y ago
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.
- scardine 9y ago
  Yes, the term was borrowed from typography and is used in most professional DTP software.
- combatentropy 9y ago
  > 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.)
toddmorey 9y ago
Thanks for the honest admission! Totally agree. I really feel the fragile mystery of floats and they way they operated is what drove so much adoption for CSS frameworks. It's true today that you can do more complex layout without any type of framework. But understand that for a period it was so much easier to use tested approaches than to battle the edge cases.
fold_left 9y ago
Rightly or wrongly, I always thought of it as being the (since deprecated) IMG align=left|right attributes' behaviour promoted for use by other elements.

joaodlf 9y ago

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-explained-for-dinosaurs-f695e9747b70 https://medium.com/the-node-js-collection/modern-javascript-...

avip 9y ago
Wow, I feel like going back in time and reading this to a younger self. Excellent writeup.
bringtheaction 9y ago
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 9y ago
  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
greggman 9y ago
I doubt it's ever coming but to really separate layout from content requires the layout tree and the content to be separate trees. Right now there's effectively only 1 tree, the DOM and CSS for the most part is just meta data on that tree. GRID requires things to actually fit a grid. If your grid isn't easily divided you add nested grids. But once you nest grids you can no longer seperate layout from content since the nested grid tree (layout) and the DOM tree (content) are tied together.

latte 9y ago

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

maelito 9y ago

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 9y ago
:not kind of disproves your point unless you are only talking about ancient CSS.

spankalee 9y ago

Unfortunately, doesn't mention Shadow DOM.

maaaats 9y ago
How is that relevant to CSS?
- a_humean 9y ago
  It is actually relevant: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://developer.mozilla.org/en-US/docs/Web/Web_Components/... 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
  - maaaats 9y ago
    Interesting, thanks.
  - bpicolo 9y ago
    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.
  - spankalee 9y ago
    Safari and Opera support shadow DOM, Firefox is adding it currently.

snorremd 9y ago

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 9y ago
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 9y ago
  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.

dmitriid 9y ago

I also highly recommend this article, "CSS Utility Classes and "Separation of Concerns": https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... This helps you wrap your head around semantic-vs-layout CSS and Functional/Atomic CSS

keybits 9y ago
Agree. (The OP article already links to this in the 'Atomic CSS' section.)
afarrell 9y ago
> Phase 3: Content-agnostic CSS components Huh. As a mostly-backend dev reading this, it seems like both this and react.js are driving toward a philosophy where you consider the existing html elements to be a box of legos with certain default behaviour and then you can also use CSS and Javascript to manufacture other components that have different behaviour. Then, after building up the components you need, you snap together your layout from those components.
- dmitriid 9y ago
  Yup. It's also known as Atomic Design. I highly recommend this (not that long) book http://atomicdesign.bradfrost.com/table-of-contents/ http://atomicdesign.bradfrost.com/table-of-contents/ for an overview. Mind you, the concept is simple, but it's not that easy to implement it in practice.
rimliu 9y ago
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…

jstewartmobile 9y ago

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 9y ago
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 9y ago
  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 9y ago
    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 9y ago
      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.

thomasfl 9y ago

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.

collyw 9y ago

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

sireat 9y ago

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-center-a-div-for-all-browsers https://stackoverflow.com/questions/396145/how-to-vertically... 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.

deleted 9y ago
[deleted]
sureaboutthis 9y ago
In almost every case, I find that people who struggle so with CSS are those who do not have a proper understanding of either CSS or HTML. They do not know or understand the "box model". They will even state they are unaware of validating (error checking) either and some even openly state they see no purpose in it.
rimliu 9y ago
> 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.
- 9y ago

xab9 9y ago

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 9y ago
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.

majewsky 9y ago

> 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 9y ago
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.
blowski 9y ago
I'm no expert, but isn't sassc just a C wrapper around libsass? If so, there are wrappers of libsass in most mainstream languages - PHP, Scala, Go, JavaScript, Python, etc. http://sass-lang.com/libsass http://sass-lang.com/libsass

treerock 9y ago

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 9y ago
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 9y ago
  Bootstrap 4 I believe has switched to Flexbox entirely, but the naming conventions have stayed the same for the most part.

spyckie2 9y ago

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 9y ago
> 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 9y ago
  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.
- spyckie2 9y ago
  > 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 is a fix. While creatively combining CSS rules to accomplish layouting is a tenant of past CSS history, it was terrible for coding in the language itself. Using tables for layouting or vertical centering hacks is the same kind of pain as using single letter characters for all your variables. In the same way, using flexible selectors to select any grouping globally was historically a positive feature of CSS, but we've done it enough to know that it creates extremely painful bugs related to improper scope and needless amounts of copy paste code fixes. The real fix is properly scoping css, which is what BEM is about, but what modular components does better.

icc97 9y ago

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 9y ago
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/
K2L8M11N2 9y ago
https://bestmotherfucking.website/ https://bestmotherfucking.website/

mxstbr 9y ago

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-d0c208de2660 https://medium.com/seek-blog/a-unified-styling-language-d0c2... Highly recommended!

RobertRoberts 9y ago
This seems to be only useful for large teams building complex web apps. :P For everyone else, inline-css is a horrible idea.
- philplckthun 9y ago
  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 9y ago
    >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.

bewresu 9y ago

Remember the sliding doors button technique? Good times.

fergie 9y ago

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

electrotype 9y ago
It does : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_v...
- fergie 9y ago
  Wow- TIL. Thanks.
- brlewis 9y ago
  Pretty cool though < 80% supported as of now. https://caniuse.com/#feat=css-variables https://caniuse.com/#feat=css-variables
amptorn 9y ago
Because > CSS style sheets are short. They are not much bigger than one editor window. Very few people (only professional designers, it seems) write style sheets longer than a hundred lines. <https://www.w3.org/People/Bos/CSS-variables> https://www.w3.org/People/Bos/CSS-variables>
- mcintyre1994 9y ago
  I'm pretty skeptical of that quote: HN's CSS is pretty minimal and comes in at 174 lines: https://news.ycombinator.com/news.css https://news.ycombinator.com/news.css It seems to be based on the W3C website where apparently 90% of style sheets are <163 lines, but I'd like to see that distribution over the internet as a whole.
  - jrimbault 9y ago
    Sidenote: the html markup of HN doesn't lend itself to "clean" css (whatever that means). Hence maybe why it's bit over that 163 mark line. Nested tables inside nested tables, with styles inlined.

GreaterFool 9y ago

"semantic class names" What?! Leave the semantics alone!

chatmasta 9y ago

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.mainelobsters.org http://web.archive.org/web/20040610011616/http://www.mainelo... 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.splitatoms.com:80/sa/tutorials/view.php?id=30 http://web.archive.org/web/20070104015744/http://www.splitat...

pjmlp 9y ago
> 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. I wish, in some enterprises Chrome is forbidden by IT security exactly because of them not being able to control when updates take place.

JepZ 9y ago

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.

bbx 9y ago

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/

lenkite 9y ago

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

thomasfedb 9y ago

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 9y ago
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 9y ago
  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.

aardshark 9y ago

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

normaljoe 9y ago
https://www.bell-labs.com/usr/dmr/www/chist.html https://www.bell-labs.com/usr/dmr/www/chist.html

wellpast 9y ago

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 9y ago
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

redleggedfrog 9y ago

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

RobertRoberts 9y ago
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 9y ago
  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 9y ago
    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.

peeters 9y ago

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?

RobertRoberts 9y ago

To add to the mix: https://www.youtube.com/watch?v=7kVeCqQCxlk https://www.youtube.com/watch?v=7kVeCqQCxlk

m12k 9y ago

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?

wwweston 9y ago
> changes intended for one place end up messing something up elsewhere. Maybe I'm just not using it right? CSS selectors allow you a really wide latitude in the applied scope of the styles you specify -- you can literally pick everything (with the asterisk selector), or you can pick only one thing (with an id selector). With an almost arbitrarily fine-grained set of possibilities in between. A project could take a component centered approach, with unique id and/or class names for every component and only using selectors that begin rooted with those id/class names (the unique names thing can be harder with a large team than it should be -- I've sometimes thought that rather than a CSS preprocessor, I could use a smart linter that can take some comment hints and manage problems like this better). Or you could moderate that a bit with a reasonable core set of global styles addressing typography and baseline margins/padding and a few layout concepts, and go component from there. And then follow two heuristics: when you find you're playing whack-a-mole, you probably do have too many overlapping broadly scoped styles. If you're repeating yourself over and over again (or even relying heavily on a preprocessor to repeat yourself), you might be better served by a more broadly scoped selector. If this doesn't describe your approach, maybe you are indeed just not using it right. :) (And welcome to the club, happens to all of us at some point). If this does describe your approach and it still hurts more than a bit, well, maybe it is indeed the fault of CSS.
9y ago

foreigner 9y ago

What about Web Components?

kuon 9y ago

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