HNHacker News
TopNewBestAskShowJobs

csswizardry

913 karma · joined April 26, 2011

* Consultant Web Performance Engineer * Google Developer Expert * csswizardry.com * @csswizardry

![](https://csswizardry.com/img/css/masthead-small.jpg_ — csswizardry.at.hn

--- meet.hn/city/gb-Leeds

Socials: - csswizardry.at.hn - bsky.app/profile/csswizardry.com - github.com/csswizardry - instagram.com/csswizardry - linkedin.com/in/csswizardry - csswizardry.com - x.com/csswizardry ---

submissionscomments
csswizardry··on Show HN: I decided to document and share my high-level CSS best practices
> that made my teeth itch

Fair enough; any reason as to why?

> not all vendor css3 definitions have the same structure, so this can't be a standard

Well if it can’t be done then it can’t be done…

csswizardry··on Show HN: I decided to document and share my high-level CSS best practices
Thanks for the comment, I’m glad you like it :) The shorthand one is a really interesting one; it takes while to kick the habit and be purposely more verbose, but you soon get tired of undoing previously accidentally-set styles.

> Do you find indenting descendant selectors helpful?

Oftentimes yes; it can give a new developer more of a clue of the markup structure that a previous developer intended to be used. I can see at a glance that `x` needs to be in `y` but `a` needs to be a sibling of `b`. Of course you could just glean that yourself by looking at and reading all the selectors individually, but it’s nice to get an idea of structure at a glance.

> For your comments, do you adhere to CSSDoc or any particular convention?

Nothing official; I have my own habits but no documented standard. I like the look of http://warpspire.com/posts/kss/ though :)

H

csswizardry··on Show HN: I decided to document and share my high-level CSS best practices
> Not if .nav li a{} and .nav a{} are specifically meant to be differing nests.

But in the example they aren’t differing nests; if you change your example then obviously it isn’t correct any more.

csswizardry··on Show HN: I decided to document and share my high-level CSS best practices
> Please don't label things that can be discussed as 'best practices'.

This is valid point, however In the README there is the line ‘This document is a personal one, and for use at my place of work […] this is a document for me and Sky. You do not have to follow the advice given, nor do I provide any guarantee.’

In the context of our team I can afford to make more sweeping statements because I have the ability to discuss and expand on the caveats. Perhaps this document becomes less useful in places without that context.

> e.g this text is 12px, because it looks nice

This is not an example of a magic number, this is a design decision that was made regardless of code. Perhaps I need to me more clear on what a magic number is, but by that I mean anything that has no reason for being.

Cheers for the feedback, I might look at rewording some bits for clarity :)

H

csswizardry··on Show HN: I decided to document and share my high-level CSS best practices
No reason other than that is what I started off with and I’d rather keep things consistent. Had I started off with underscores then I’d be asking the team to stick with that.

I guess that section is more about ‘keep everything the same’ rather than ‘we must specifically use hyphens’ :)

Cheers, H

csswizardry··on Pragmatic, practical font sizing in CSS
> but I feel that classes give more meaning to an element

But they don't. Classes (and IDs) have nothing at all to do with semantics or meaning.

You can use whichever notation you wish (.big, .small, .alpha, .giga etc), I state as much at the end of the article, just remember that classes do not add meaning to (or subtract meaning from) an element :)

H

csswizardry··on Pragmatic, practical font sizing in CSS
Classes are neither semantic or insemantic, merely sensible or insensible.

Realising that classes aren't subject to the same semantics as elements is a massive breakthrough for a front-end developer to make IMO.

These classes aren't 'semantic' because no classes are; semantics in the front-end development sense is when something (i.e. a machine) can glean meaning from something. No machines (browsers, search bots, assistive technologies etc) actually interpret classes, they merely match them. The only thing that gleans meaning from a class is a human, so you should write classes for people.

Thus, in a roundabout way, no classes are semantic, so we need to stop worrying about that.

Cheers for the comment!

csswizardry··on Bootbox.js - alert, confirm and flexible dialogs for Twitter's bootstrap
Ah cool, my good buddy Nick made this!
csswizardry··on The Pure CSS3 Content Slider
@csswizardry ;)

But thanks for the link, much appreciated :D

http://news.ycombinator.com/item?id=3203834

csswizardry··on Best CV ever for a front-end developer
Thanks :D
csswizardry··on Inuit.css - Another CSS framework
Those are all great ideas, thanks. I'm already considering an 'inuit.css in the wild' type section, as soon as enough people start using it in production.

I definitely need to scale the site up somewhat as it currently doesn't do such a great job on the selling front.

This took off far more quickly than I expected. I only launched five days ago...

Cheers for the feedback :)

H

csswizardry··on Inuit.css - Another CSS framework
overflow-y, although relatively stable, has only been officially proposed in CSS3. So I could (and might) use overflow-y, but the height:101%; is a hangover from when overflow-y was a non-standard bit of CSS.

I don't dislike the overflow-y method, I just used the one I've used for year. I might update inuit.css to use the more obvious overflow-y property soon though.

Good spot on the charset declaration though. Thank you very much. I'll update on my lunch break or something :)

Thanks, H

csswizardry··on Inuit.css - Another CSS framework
Wow, on Hacker News, cheers guys!

I'm Harry, the guy who made inuit.css. There is a link to inuit.css in the page's h1, which I know is way too hidden: http://csswizardry.com/inuitcss/css/inuit.css

I'm a designer/front-end dev at heart so I don't know Git(hub) at all. I have made an account about an hour ago though and I'm hoping to get inuit.css on there asap. Just gotta learn it now.

Cheers, H

← PreviousPage 5 of 5