Top all-time · #1435
Nicolas Gallagher
Personal blog · nicolasgallagher.comwebprogrammingdesign
Nicolas Gallagher's personal blog at nicolasgallagher.com covers web, programming and design. Since 2010, 50 different Hacker News readers have linked it 73 times, most often “About HTML semantics and front-end architecture”. No feed was found, so read it on the site itself.
Rarely recommended · 5 of 39 sampled comments recommend it?
Why HN links it
HN readers link Nicolas Gallagher's front-end writing on HTML semantics and class naming, normalize.css, and pure-CSS techniques such as icons, speech bubbles, drop shadows and clearfix.
Summarised by Claude from a sample of 39 HN comments that link here. Each comment is marked recommending, critical or neutral (citing without judging); how this works.
Most-linked posts?
- About HTML semantics and front-end architecture12 people · 18 mentions · first linked 2012-03-15
- Demo: Pure CSS GUI icons, no images (experimental).5 people · 5 mentions · first linked 2010-11-19
- Pure CSS speech bubbles3 people · 3 mentions · first linked 2012-05-10
- Pure CSS GUI icons (experimental)3 people · 3 mentions · first linked 2010-11-16
- CSS background image hacks3 people · 3 mentions · first linked 2011-01-21
- About normalize.css: a modern, HTML5-ready alternative to CSS resets3 people · 3 mentions · first linked 2012-02-28
- Flexible CSS cover images2 people · 2 mentions · first linked 2014-01-08
- CSS: the cascade, specificity, and inheritance2 people · 2 mentions · first linked 2012-03-05
- /about-normalize-css/2 people · 2 mentions · first linked 2022-01-14
- Pure CSS speech bubbles – Nicolas Gallagher2 people · 2 mentions · first linked 2010-12-18
What Hacker News says?
It's a cool little snippet but it's nothing more than three run-of-the-mill CSS declarations. The maximum width is specified, a small padding is applied and the margins around the element are set to automatic so it centers itself horizontally. All the other styles applied on this pages are not part of the snippet. The weight of the titles, the spacing under the paragraphs, etc., are all specified on the page's CSS f…
Comment linking /about-normalize-css/
on “58 Bytes of CSS to look great nearly everywhere”Submitted Brilliant use of CSS drop shadows as a story · 426 points
HN discussionI used to think this way until reading this article by Nicolas Gallagher: http://nicolasgallagher.com/about-html-semantics-front-end-a... These days I'm quite convinced trying to author your markup such that you can redesign a site by applying a different stylesheet has the dependencies backwards. If you try to keep visual information out of your HTML, you end up authoring stylesheets designed to nimbly navigate you…
Comment linking /about-html-semantics-front-end-architecture/
on “Semantic UI”Submitted About normalize.css: a modern, HTML5-ready alternative to CSS resets as a story · 219 points
HN discussionThe concept of 'semantic classnames', even if propagated by w3.org has caused as much grief as the concept of 'separation of concerns' between HTML & CSS fad. The reason we need semantics in HTML is to make the markup accessible for screen-readers, and no screenreader considers the class name of an element when reading it out. What we instead need are semantic tags like article, section etc. and aria tags like role.…
Comment linking /about-html-semantics-front-end-architecture/
on “Semantic UI”Submitted Demo: Pure CSS GUI icons, no images (experimental). as a story · 205 points
HN discussionCounterpoint to "not practical": We have a dashboard at work that displays, amongst other things, the CI build status. For reasons I won't go into, we cannot change the HTML. We can change the CSS though, using Stylish. The "build failed" / "build succeeded" icons were incredibly non-obvious and developers weren't paying much attention to them. Now, through a series of seriously horrendous CSS hacks, they display as…
Comment linking /pure-css-gui-icons/demo/
on “A Single Div”Submitted Pure CSS GUI icons (experimental) as a story · 127 points
HN discussionI made a bunch of this kind (and more complex) speech bubbles a couple of years ago: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ This is a nice little tool to help automate the production of the code for simple ones.
Comment linking /pure-css-speech-bubbles/demo/
on “CSS arrow please”Submitted CSS background image hacks as a story · 119 points
HN discussionThis approach is extremely seductive because on the surface it sounds so "pure" and "clean" but the reality is that on large projects it leads to some of the most horrific, hard to maintain CSS you'll ever see, no matter how hard you try to keep things in good shape. CSS is just inherently more difficult to maintain than HTML, and choosing a workflow that encourages editing CSS instead of HTML just makes things hard…
Comment linking /about-html-semantics-front-end-architecture/
on “CSS Zen Garden”Submitted CSS3 Facebook Buttons as a story · 85 points
HN discussionAh, read: http://nicolasgallagher.com/css-drop-shadows-without-images/ "Known browser support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+"
Comment linking /css-drop-shadows-without-images/
on “Brilliant use of CSS drop shadows”Submitted About HTML semantics and front-end architecture as a story · 72 points
HN discussionhttp://nicolasgallagher.com/about-html-semantics-front-end-a... Sorta interesting argument against this sort of grid system.
Comment linking /about-html-semantics-front-end-architecture/
on “Neat”Submitted CSS3 Social Sign-in Buttons as a story · 70 points
HN discussionseems similar to normalize [1] 1: https://nicolasgallagher.com/about-normalize-css/
Comment linking /about-normalize-css/
on “Simple.css – A classless CSS framework”Submitted Another CSS image replacement technique as a story · 25 points
HN discussionCSS is problematic in every project I've been on. It takes a lot of effort to stay disciplined and not just throw stuff in a class namespace that shouldn't be there. This article [1] by Nicholas Gallagher sums up how I feel after trying my damnedest to write maintainable CSS in my applications. I'm now using the Suit CSS [2] preprocessor to enforce strict guidelines to our app's CSS. It's working well so far. [1] ht…
Comment linking /about-html-semantics-front-end-architecture/
on “CSS: It was twenty years ago today”Submitted Demo: Pure CSS folded-corner effect [pseudo-element hack] as a story · 12 points
HN discussionAn ecosystem of attractive looking templates, devs who know how to use it, various tools that integrate or output it, examples and tutorials to learn from, code samples to re-use etc.? There's also a justification for the type of classnames you're railing against here: http://nicolasgallagher.com/about-html-semantics-front-end-a... I believe Bootstrap adopts many of these ideas. So it's not just a mistake, but an in…
Comment linking /about-html-semantics-front-end-architecture/
on “Bootstrap 4's mobile-first flexbox grid system, now used by default”Submitted A simple Git deployment strategy for static sites as a story · 5 points
HN discussionNicolas Gallagher wrote a pretty thorough rebuttal to this popular idea (at least popular in comment sections, as you note none of the frameworks that have taken the web by storm recently pay any attention to it). http://nicolasgallagher.com/about-html-semantics-front-end-a... Conclusion: "When you choose to author HTML and CSS in a way that seeks to reduce the amount of time you spend writing and editing CSS, it in…
Comment linking /about-html-semantics-front-end-architecture/
on “Primer – CSS toolkit and guidelines that power GitHub”Submitted About HTML semantics and front-end architecture as a story · 5 points
HN discussionI remember seeing something like this before too. This is the one I was thinking of. http://nicolasgallagher.com/pure-css-gui-icons/
Comment linking /pure-css-gui-icons/
on “Show HN: CSS ICON, an icon set crafted by pure CSS”Submitted CSS: the cascade, specificity, and inheritance as a story · 5 points
HN discussionThe double hyphen is actually part of a pretty common naming convention (BEM-style) for distinguishing between separate components, component modifiers, and component sub-objects. Examples: https://gist.github.com/1309546 http://nicolasgallagher.com/about-html-semantics-front-end-a... http://csswizardry.com/2013/01/mindbemding-getting-your-head... http://engineering.appfolio.com/2012/11/16/css-architecture
Comment linking /about-html-semantics-front-end-architecture/
on “Show HN: hint.css – a tooltip library in CSS”Submitted Pure CSS speech bubbles – Nicolas Gallagher as a story · 4 points
HN discussionThis is just a bit of experimentation. Not something with any significant practical benefit. You just have to look at the code behind this - http://nicolasgallagher.com/pure-css-gui-icons/demo/ - for confirmation that this is not a viable solution for complex shape creation.
Comment linking /pure-css-gui-icons/demo/
on “The Shapes of CSS”Submitted 84 Pure CSS GUI Icons as a story · 4 points
HN discussion
