Hacker News Reader

Comment by sant0sk1 | Hacker News Reader

I've had a hard time deciding on a naming convention for my sass variables, and have sometimes resorted to 'color1' and friends.

Anybody have a method they feel good about and would like to share?

View on HN

If you go to http://colorschemedesigner.com/ and hit "Random > Randomize Palette" you'll see that most colors in a theme/palette could be categorized like this:

!theme_primary !theme_secondary !theme_accent

!theme_primary_dim !theme_secondary_dim !theme_accent_dim

!theme_primary_bright !theme_secondary_bright !theme_accent_bright

s/theme/palette/

and if you go to export as html/css you'll get something like this:

  .primary-1 { background-color: #FFDDC2 }
  .primary-2 { background-color: #E5C9B4 }
  .primary-3 { background-color: #DAAA84 }
  .primary-4 { background-color: #FFEBDB }
  .primary-5 { background-color: #FFF6EE }

  .secondary-a-1 { background-color: #FFE6C2 }
  .secondary-a-2 { background-color: #E5D1B4 }
  .secondary-a-3 { background-color: #DAB784 }
  .secondary-a-4 { background-color: #FFF0DB }
  .secondary-a-5 { background-color: #FFF8EE }

  .secondary-b-1 { background-color: #FFCFC2 }
  .secondary-b-2 { background-color: #E5BEB4 }
  .secondary-b-3 { background-color: #DA9684 }
  .secondary-b-4 { background-color: #FFE2DB }
  .secondary-b-5 { background-color: #FFF2EE }

  .complement-1 { background-color: #C2FFFD }
  .complement-2 { background-color: #B4E5E3 }
  .complement-3 { background-color: #84DAD7 }
  .complement-4 { background-color: #DBFFFE }
  .complement-5 { background-color: #EEFFFE }

You could use names that make sense in the context of the overall design, e.g. theme_color, horizontal_padding, column_width.

Same as in normal programming, really.

Good advice and I do for non-color related variables.

I guess its hard for me to put names on 3-6 colors that are used in various places on the site. This is probably just because I don't have a good idea going in where I'll be using these colors and I end up using them in places that don't apply to the name given.

For instance, I'll name a variable "background_color" and then I'll want to use it somewhere unrelated.

Don't waste time on this. The easy answer is "choose your names semantically", but that's easier said than done. In the end, your users don't care if your variable is named "blue", "color1", or "color_used_to_represent_user_likes_something"

Semantic markup and CSS is something to strive for, but don't kill yourself trying to get to 100%

if you use it for something unrelated, then set the unrelated thing equal to background_color, but keep them semantically separate.

This is what I'm using for a website I'm building.

    // >> HEADER/FOOTER
    // background color for header/footer
    !nav_background = #5C504F 
    
    // border of header/footer
    !nav_border = #5C504F + #2B2830
    
    // text in header/footer 
    !nav_text = #F0F8FE
    
    // >> BACKGROUND BEHIND CONTENT
    // background between content and nav elements
    !site_background = #2B2830  
    
    // border between background and content
    !site_border = #ABAB8E
    
    // >> CONTENT
    // background for content
    !content_background = #F0F0D8
    
    // table odd row
    !content_lighter_background = #F0F0CA
    
    // text color
    !content_text = #000
    
    // regular links in content
    !content_links = #2B2830
    
    // control links (flag, edit, delete, etc.)
    !content_edit_links = #8B8870
    
    // secondary nav border, section seperator, table header seperator
    !content_seperator = #D9D7A3

Screenshot: http://epochwolf.com/singleforestcom-screenshot

Reply on news.ycombinator.com