[Partyfists]

Hey! I just want to say, this is awesome and I wish you the best of luck.

I am a Developer and I noticed a few really concerning things in your CSS:

1. I believe you're committing the greatest CSS Sin: Emulating the DOM structure using nesting. Here is one example: "#site-header.newheader nav>ul>li>a.buttonGreen"

That CSS Selector should not exist like that. You shouldn't be using ids (first) and second this should be be: .buttonGreen {}

It looks like bad Sass or LESS is being used and nesting is being abused. If you'd like more advice on how to fix this I have written many talks.

The reason these selectors are a problem is because of the extremely long paint time. Right now your site takes around 30ms to paint. It should be closer to 10ms.

2. The CSS classes used are meaningless. Above there's a "buttonGreen" class. However, what if you redesign and that button is now blue? Do you just edit the CSS (like should have to be done) Or do you change your HTML and CSS to reflect a basic styling change? This only hurts you and maintaining your site.

3. You're loading 2.4 MB of data on your home page. 1 MB of that is images, which is fine, but that means you have 1.3 MB of data loading. The good news is that on mobile almost 100% of what you are loading are images, however, that number is still 2 megabytes. I'd see if there is a way to lower that number.

4. It is extremely busy. I was really confused when I got to the site. I am not a good designer so I cannot give specific advice, but I'd think "calming" the site would help a lot.

5. On Chrome Mobile I cannot click the hamburger button. It does nothing.

6. You need to simplify your creation flow. You have 4 pages right now, it should only be 1.

7. Your select boxes need a dropdown arrow.

8. USE NATIVE SELECTS and restyle them using CSS. Use a fallback for IE and IE only!

9. Mobile functionality is not the same as desktop functionality, this is a big one that needs to be fixed. You should be able to do the EXACT same things on mobile that you can on desktop.

10. The goal of the site should not be browsing, I don't think. I think it should be about: Creating lists and sharing lists. Browsing should certainly be an option, but make creation and sharing more prominent than browsing.

[lumpypua]

I believe you're committing the greatest CSS Sin: Emulating the DOM structure using nesting. Here is one example: "#site-header.newheader nav>ul>li>a.buttonGreen" ... If you'd like more advice on how to fix this I have written many talks.

I didn't know this was an issue until recently and now I'm slowly fixing it on my main project. I'd love your additional advice/pointers!

[Partyfists]

Of course! The idea behind using preprocessors is helping you write CSS more easily. The goal is not to write obfuscated CSS, but rather to write CSS well! What it really enables (imo) is to think of styling in an Object Oriented way. Whenever you're about to write a block of Sass think "What is this thing?". The answer is almost never a "green button" but rather "getting started button". Or something like that. It also helps you to think in terms of inheritance:

The "getting started button" and "buy button" are both interaction buttons. (Similar buttons, but one is green and the other is yellow).

In Sass you represent that this way: 1. Placeholder %interaction-button class where you outline the fact that it has a border radius, color, and any other shared styling. 2. A button maker mixin where you put the colors that need to be changed, and any other flags (like has_sub_text: true for the unbold text) and then @extend's the placeholder above. 3. The classes ".buy-button {}" which include the mixin you made.

[MaxGabriel]

To clarify, for the `.buy-button` class, is that where one should put super-specific styles like `margin-left: 12px`?

Also, is there a good place I can learn these kind of things? I'm a programmer trying to get better at CSS (SCSS now that we've setup the asset pipeline)—so far I've been reading random A List Apart and The Sass Way articles, but I feel like I could use a more holistic, in-depth understanding of CSS if there's a good book out there for that.

[Partyfists]

To answer your first question, yes that is exactly where you should put your super-specific styles. You want to put your communal styles in your placeholder, styles that all types have but are different in the mixin (background color, etc) and the rest on the class itself.

The best way to get better at Sass is to follow people who are active in the community (which unfortunately is not me). Start with Chris Coyier and Hampton Catlin and work your way from there.

If you don't mind me plugging my own talks, I have a few that are really good at learning Sass:

https://speakerdeck.com/liamdanger/why-your-sass-is-bad-and-...

https://speakerdeck.com/liamdanger/what-if-css-was-object-or...

https://speakerdeck.com/benbayard/how-to-raise-a-code-puppy

[brickmort]

I appreciate your advice on this! From what I'm learning from you, it sounds like I'm committing some bad CSS practices myself.

[madeofpalk]

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...

http://www.smashingmagazine.com/2012/04/16/a-new-front-end-m...

[karmajunkie]

I'm not a designer by any means, so take this with a grain of salt, but after reading through the first link, BEM bears a striking resemblance to hungarian notation, which I think most of us decided was a bad idea a long time ago. Do you have any sense that this naming convention is different somehow from the naming conventions that have been used and abandoned in other areas of software development, and if so, what makes it different?

[id]

Is it advisable to just use plain old CSS these days?

[Partyfists]

Hey Id,

I'd say learn how CSS works first and really understand what it's doing. However, Sass can help you write very maintainable efficient styled code.

I will always recommend using Sass, but only if you know what CSS you're making and know that it matters what CSS is being output.

[fenier]

In general, you get more out of using a preprocessor.

In practice however, the generated output isn't always the best, and it's worth a look over to make sure it's not generating slower selectors.

[drinchev]

Actually there are a couple of rules that I managed to pick up from the frontend community about CSS rules.

1) Don't use tag names in css

    div.something should be .something

2) Don't use id's

3) Isolate elements into logical components and name part of those components in the css.

    <button class='button button-primary'><span class='button--icon-search'></span></button>

[stormen]

Hey Partyfists,

thank you very much for your answer. You put a lot of effort into it, so I wanted to reply in the same manner :)

The CSS stuff was done by Jesper, one of the founders, that unfortunately left the company. I'll tell him about the CSS issues you address.

As for issues 3-10, I'm noting down all of them in our todo list and I'll address them individually. Thank you for great input! :)

[Partyfists]

Of course, feel free to reach out with any questions you have. I'm on twitter @partyfists let me know!

Best of luck to you guys.