7 ms·
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 beli
by Partyfists 12y ago
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.
- stormen 12y agoHey 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 12y agoOf 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.
- lumpypua 12y agoI 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!
- drinchev 12y agoActually 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>
- Partyfists 12y agoOf 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.
- id 12y agoIs it advisable to just use plain old CSS these days?
- 12y ago