Harry Roberts

Point 13, ironically, reminds me of one of the best bits of writing[1] I ever did. I somehow lost an entire near-complete draft[2] of an article, so I had to write it again from scratch. It came out much, much better than the original. 1. https://csswizardry.com/archive/ 2. A fact I am embarrassed to admit in present company. I still can’t remember how it happened.

Food for thought: https://csswizardry.com/2018/11/css-and-network-performance/ Progressive rendering of CSS is a great boost in performance. Tailwind can't benefit from this technique I think and as such, imposes an added cost on our users. Correct me if I'm wrong!

I think if more web developers understood how browsers actually render a page we'd get much better web pages. In the case of CSS, the browser won't render until all the CSS files are loaded and parsed. Having lots of them is terrible for time-to-first-paint performance. That's reason enough to inline styles in the head and only have one CSS link on a page if you want something simple, or to use media queries in links to create different contexts if you want to minimize download sizes. CSS Wizardy (Harry Roberts) wrote a great article about this topic recently - https://csswizardry.com/2018/11/css-and-network-performance/

I like the Learn Enough tutorials and recommend them particularly for newcomers that like to find an introduction and overview to a topic. In this case the HTML and CSS / layout courses should be relevant: - HTML: https://www.learnenough.com/html-tutorial - CSS & Layout: https://www.learnenough.com/css-and-layout-tutorial However the CSS tutorial doesn't include CSS Grid yet, which is pretty much essential these days and therefor requires further reading elsewhere. CSS Grid is a major milestone for layout on the web. Don't miss it. Additionally another important aspect that is often overlooked: Naming things in CSS. Since you're working with a global namespace it's important to find a sane naming system. I recommend BEM, which is easy to grasp: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-be…

i've also been evaluating reflex css [1] for grids. it's been tiny and excellent so far. BEM syntax [2] is a bit odd at first, but the principles behind it are solid. [1] http://leejordan.github.io/reflex/docs/ [2] http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem…

Looks like he just rewrote the ideas of [Nicole Sullivan](http://stubbornella.org) and [Harry Roberts](http://csswizardry.com).

My understanding is that performance is a negligible factor next to maintainability when writing CSS in virtually all cases. The best post I've seen on the subject is by Steve Souders[0], which does include some numbers. [0] http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-… Further reading: http://csswizardry.com/2011/09/writing-efficient-css-selectors/ https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS

I've seen it persuasively argued that rems and ems with a pixel fallback is the best way to go. http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style/

I love the idea, especially since the magazine reading experience is somewhat diminished on the web. Unfortunately, the only way they achieve this is by using a pdf, which isn't terrible, I would just prefer to navigate some sort of html in my browser. Are there any projects out there that attempt to make reading on the web more "print like"? Typogridphy (http://csswizardry.com/typogridphy/) is a good example of making a website less like website and more like a well styled magazine, but I have only seen one site use it (http://hacker-newspaper.gilesb.com/). Obviously this is more likely due to my ignorance of other such sites, but the point still stands that there isn't much development in this area.

This is not a goods approach imho. When I'm the html/css guy on a team, it makes my work super frustrating to have to deal with devs who preemptively try to break down everything into smaller bits. It gets in the way of iteratively improving my templates and css throughout a project. The solution is simple. First, you should use the "bottom margins only" approach wherever possible, cf. CSS best practice "use single directions margins only". https://csswizardry.com/2012/06/single-direction-margin-declarations/ If the Vue/React devs I worked this even understood just this, and put single direction margins in their components, there would be less issues already with collapsed margins and/or unintended vertical spacings. Even better, just get rid of the spacing margins in the component altogether as the article suggest. But instead of creating more abstraction with "spacer" components, you simply add tailwind-style classes on your components such as list items, in the PARENT component's template. Then the html/css guy till has full control over the templating, it's fluid and simple to edit, and there is no headaches with abstract "spacer" components that also add unnecessary complexity and indentation in the templates. The main issue with "spacer" components is that in the end, the design is never this regular, There are always exceptions to the rule, and they are much more easily handled as I said by using atomic css classes like tailwind's `mb-*` in the PARENT template…

Seriously. To my sibling comments: show me an article about how great lisp or vim is that takes 2.5k words to get to its position statement. That's an introduction that's 50% of the length of the article! I don't mind long articles, but ill-proportioned intros seem like a bad idea. Incidentally, that position statement is ridiculously vague and anodyne: Principles of the New Web Typography 1. We must prioritise the text over the font, or semantics over style. 2. We ought to use and/or make tools that reveal the consequences of typographic decisions. 3. We should acknowledge that web typography is only as strong as its weakest point. Who's going to disagree with these? As best I can tell, these translate to: 1. Don't be afraid to show sub-optimal typography until your nicer font loads. Physical books never had to worry about load times. 2. Write better tools and share them. For now use Tachyons or Basscss, as a modern equivalent of a https://en.wikipedia.org/wiki/Type_case. 3. Try to keep your CSS selectors about the same length[1]. Read and internalize http://csswizardry.com/2014/10/the-specificity-graph. Like parent, I say all this with love. If it got me to read it all (albeit over the course of a day), it's doing something right. [1] I'm not sure about this, since http://cssguidelin.es/#specificity seems to suggest that specificity is the number of tags in your html that are selected by a selector. But that doesn't seem to be quite what OP means, unless I…

I can tell we're aligned regarding CSS architecture - and also regarding Angular. :) The style guide you linked is very clear and concise in explaining why BEM is great without being a panacea - it's ugly, but it's simple, predictable and solves many of the issues which arise with CSS nature (e.g. everything in CSS is global). I also liked the emphasis on having BEM as a naming convention, no more. Regarding how you introduce BEM, I would only: * Reinforce the idea that a BEM compliant worflow would typically allow developers to change mark-up without having to look up stylesheets and vice-versa; * Reinforce how much it would typically reduce side-effects! I'd also give a few words on the topic of using the preprocessor (mixins, extends and, obviously, variables) to achieve DRYness. * My argument to my team was to have readable semantic and obvious classnames (without style references in the name, e.g. no .blue-widget) which are "composed" via SASS (and SASS constructs might have style references in the name e.g. my-button @extends %blue-button); * The other argument, and the one I actually believe `philosophically is that this allows you transfer the object-composition duty from the browser to the build process. It just makes sense to me: why have thousands of clients composing styles (e.g. button class="btn btn-lg btn-primary") when this is predictable ahead-of-time (button class="my-btn", where .my-btn = @make-btn(lg, primary)). This gives you performance and, as I…

The issue I took was that in the HN submission you position them as best practices, but when questioned on them you said they are just guidelines that don't have to be followed all the time. This disagrees with your own views on what best practices are [1]. Perhaps it was just a badly phrased submission title, but it set the tone and direction of the discussion. The title effectively told people they are doing CSS wrong. People don't like to be wrong, and will go to great lengths to prove themselves right [2]. It's nothing personal and I bet if the title was less preachy, it would have gathered more productive comments and had a friendly tone. In general your articles are high quality and the advice sound. I think this issue was caused solely by a bad title. Though I still don't understand why you hate IDs so much! [1] http://csswizardry.com/2011/12/on-html-and-css-best-practices/ [2] http://xkcd.com/386/

This article is a good reminder of another one from late last year: https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rule… In the above article, Harry gives a more nuanced and specific method using data attributes to target specific anchors in the document, one reason being you don't need to prerender login or logout pages. <a href data-prefetch>Prefetched Link</a> <a href data-prefetch=prerender>Prerendered Link</a> <a href data-prefetch=false>Untouched Link</a>

HTTP/2 “pipelining” (multiplexing) is still there and works as intended; but bundling is still much more efficient. This article delves into just that: https://csswizardry.com/2023/10/the-three-c-concatenate-compress-cache… The first pair of waterfall graphics illustrates the problem clearly. (What you vaguely remember as not working as intended is probably Server Push).

Very nice article. Some waterfalls are screenshots of various developper tools. Does someone know what how this one https://csswizardry.com/wp-content/uploads/2023/06/defer-waterfall-ful… is produced?

For me, the "equivalent css" is the most readable form in most of the examples given. I can understand how this would be useful in some situations. However, from a practical perspective, I've found that writing nested CSS ends up creating a tight coupling between DOM structure and style rules which makes everything more brittle and harder to refactor [1]. I've personally been spoiled by the scoped styles in Vue [2] which makes this style of isolation in CSS mostly unnecessary. It serves a similar purpose as related encapsulation ideas like shadow DOM, BEM, CSS modules, and styled components. [1] https://csswizardry.com/2012/05/keep-your-css-selectors-short/ [2] https://vue-loader.vuejs.org/guide/scoped-css.html

Agreed. I've been using the idea of a "shame file" in css as a dumping ground for this sort of thing. It was brought to my attention by this post https://csswizardry.com/2013/04/shame-css/ And yes, there needs to be a structured and scheduled review and cleanup otherwise it becomes a nightmare. We do this every 3 months along with scouring the codebase for TODO's and FIXME's. It's done in mob-programming style with drinks which makes for a lot of fun and a good way to share our "mistakes". But to be honest, it's starting to devolve into a "coding roast" of sorts!

I think you're missing the whole point of BEM. Your suggestion is something I would avoid at all cost. Here's a good article explaining the idea: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem…

That's called the BEM naming convention. BEM stands for block, element, modifier. You can read about the reasoning for it in places like this one: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem…

I am really glad someone has put this together - I was enjoying Harry Roberts talk at RenderConf until he dropped this in our faces: http://csswizardry.com/2016/05/the-importance-of-important/ Utility classes I dislike (mixins plx) and the idea of using important with them is not a design decision I would want to pick up. I guess my bigger problem is that Harry sells himself as an expert, stands up on stage telling people this is how they should be doing things... and here I am, no book, no stage and my specificity level gets trumped by Harry amongst certain members of my team (despite my years of qualified awesomeness across large scale, popular, public domain sites) Thought I'd just share that with you :`P

File size is a moot point with regards to long selectors - they are just a bad idea. [1][2] I am a fan of BEM to keep things sane. [3] [1] http://csswizardry.com/2012/05/keep-your-css-selectors-short/ [2] https://benfrain.com/css-performance-revisited-selectors-bloat-expensi… [3] http://getbem.com/

I disagree on !important. Good use of !important in high level css is outlined pretty nicely in this article: http://csswizardry.com/2016/05/the-importance-of-important/

Why not look at BEM? https://en.bem.info/ http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem… Harry Roberts really simplifies the idea of it.

CSSWizardy say it better than me: "BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while." http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem… But basically: agreed rules for how to name and format css to make it maintainable and performant in big projects.

I would take a look at BEM. It's methodology and set of naming conventions to help write better, more modular and reusable CSS. It can take a while to get used to, and to get it right, but once you do it's a lifesaver. I can't imagine doing front-end dev without it now http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem… http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology…

.multi-word-block__with-an-element--and-modifier Also see the .site-search example here http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem…

Seems like what you're describing here is BEM (Block/Element/Modifier) - those interested can read more about it here: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem… Basically it's anti-nesting and proposes being very specific with regards to class naming: .block{} .block__element{} .block--modifier{} I've experimented a bit with this lately but haven't come to a conclusion yet myself. Yes, it does decrease the chances of accidently styling the wrong elements, but it also makes the html more verbose and can in some cases make it more difficult to implement the website w/jQuery (because of the different classes in use, ie. instead of a .selected class you might have .selected__orange, .selected__apple so to switch the selected item you can't just do an .removeClass('selected')/.addClass('selected)

>You shouldn't stop using ID's unless you have a reason to. The opposite approach is more useful: don't start using ID's unless you have a good reason. Classes can do anything (CSS-wise) that id's can, and lack the downsides (namely reusability and dealing with increased specificity, here's a pretty good write up: http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-cla…

I've adopted the 'BEM' way of naming my css classes and so on. It's pretty convenient, and it grows on you pretty quickly. I hope this helps - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem…