Show HN: I decided to document and share my high-level CSS best practices

Re:Show HN: I decided to document and share my high-level CS... by csmeder on Monday March 12, 2012 @12:34PM (#3694198)

> We use hyphen delimited,

> lowercase selectors: .thisIsBad{},

> .this_is_also_bad{} but .this-is-correct{}.

I am a fan of mixing Camel Case and Dash Separated. I use Camel case for specific elements.

eg. ".addClientButton"

However, I use a mix of Camel Case and Dash Separated for IDs specifying a specific element in a specific part of the dom.

eg. "#newClientPanel-addClientButton"

I learned this method from looking at how apple.com does their styles on their check out screen. However, it doesn't look like they don't do it this way any more.

How do you handle making unique IDs? I guess I could switch to something like

.add-client-button and #new-client-panel_add-client-button

[ Parent | on HN ]

Re:Show HN: I decided to document and share my high-level CS... by harisenbon on Monday March 12, 2012 @08:33PM (#3696402)

I do something similar, where I use hyphens to delineate ideas and sub ideas (table-striped) but use camelCase when one of the class parts contains multiple words. (form-addUser)

This also plays well with my IDE which splits word selection on a hyphen, so if i want to change form-addUser to form-removeMonkey, it's just a single selection, where as if it was form-add-user, I would have to actually drag to select the text.

[ Parent | on HN ]

Re:Show HN: I decided to document and share my high-level CS... by indubitably on Monday March 12, 2012 @12:42PM (#3694243)

I don’t like .this-is-correct{} because sometimes you have the same variable name in Javascript too, where dashes won’t work.

[ Parent | on HN ]

Re:Show HN: I decided to document and share my high-level CS... by intranation on Monday March 12, 2012 @12:57PM (#3694318)

Dashes map more cleanly to existing CSS syntax, eg nth-child, background-color, etc. Much like camelCase looks more like Javascript than my_variable.

[ Parent | on HN ]