Ask HN: Do CSS expert write most of the things on their own? | Hacker News Reader

Ask HN: Do CSS expert write most of the things on their own?

9 pointsmkagenius11 comments

I am trying to learn CSS and am thinking whether everyone writes most of the css own their own.

If not, what frameworks do they use? I know of one: bootstrap.

In other words, how would an expert go about building a responsive beautiful website like, https://www.lily.camera/

If you’re just learning I think you’re better off without using a full framework like Bootstrap or Foundation. This is the time where you should be doing more of the leg work to understand how the different properties work, how the cascade works, the different methods to aligning elements (what a grid system would typically take care of for you), etc. Looks at sites like CSS Zen Garden or CSS Tricks to help you along your journey.

Now, as for whether those with more experience write their own or not, it’s usually a compromise between what that expert thinks is ideal, what the team he's working with believes is ideal and what's actually necessary for the project.

To me the ideal is doing almost everything from scratch, minus resets like Normalize or grids like Foundation’s – and just the grid – because they are done very well already. However past that I know I’ll run into roadblocks immediately trying to fit the look & feel into those frameworks and still be leftover with a bunch of cruft I don’t need. I can also write my selectors in a more maintainable fashion which will lead to less debugging headaches and scalabilities issues down the road.

Thats not a great website IMHO. Anyway you use frameworks for base styles, to assist you in setting up the ground work.

For example, reset and grid styles. Bootstrap is quite bloated but you can mix and match and use whatever you like.

If you are learning then just use reset style sheet http://meyerweb.com/eric/tools/css/reset/

and work out rest yourself.

I get paid to do css. If you write your own CSS for a while, get used to the syntax and solving certain problems that popup. display:block and position:relative for example are always things I try when something doesn't behave. Then make sure you are able to code around bootstraps constraints and defaults. bootstrap is very popular. I tend to do smaller sites where performance / downloads isn't an issue even on mobile. For a site with a lot more users, people can optimize all day and it will all be worth it. If you can get very familiar with bootstrap out of the box you can start to rip out the things you won't / never use.

one way I deviate from a lot of the popular frontend trends is I don't really like using preprocessors (LESS SASS) for projects. I totally get the benefits but the drawbacks of confusion within a collaborative environment offset the benefits. My experience, teams of coders have various skills and build processes and have to pick up slack across many projects, I don't want to enforce another level of abstraction unless I'm certain it will pay off for everybody and be easy to get going. So far, I see enough drawbacks that regular CSS is better when you're out for the week sick, or bringing on some outside help for overflow work.

But if you've got a small team and every one agrees on it and can and will back each other up with that same process, have at it. I've never met those people though.

Bootstrap/Foundation can be great when you don't know a lot and need something that is acceptable now. However, from a gaining experience point of view, those frameworks can get kind of complicated and trying to figure out how some effect is being achieved can be very difficult. I've found there's a certain level of skill you have to get to before you can actually use those frameworks to learn new techniques. When you get to that point, they can be great vehicles for learning how to do certain things.

I'm currently using foundation with SASS[0], Compass[1], and Susy[2]. I only take certain parts from Foundation as I need them. Foundation is built on top of SASS so it's easy to pull out parts of the framework. I can say that using a css preprocessor (SASS/LESS[3]) has really made a big difference in the speed I develop and the maintainability of my css. To directly answer your question:

>>In other words, how would an expert go about building a responsive beautiful website like, https://www.lily.camera/

They probably use a preprocessor like SASS or LESS and either build it from scratch or take parts from different frameworks that they need and mix and match. Looking at their html source, they're not using a framework directly, but they could still be using one with their css preprocessor which is compiling down to their production css. Also, there's a good bit of javascript going on in that site as well. Hope this helps.

[0] http://sass-lang.com/ [1] http://compass-style.org/ [2] http://susy.oddbird.net/ [3] http://lesscss.org/

I don't know if I'd consider myself an "expert," but I'm certainly advanced.

Using frameworks is the way to start, as it's one of the quickest ways to understand how things can be set up. What I found, however, is that very quickly you will outgrow frameworks. They tend to become more of a constraint than they help when you're working on more advanced things. When you reach that point, you'll probably start to piece together your own favorite snippets into something that works for you - grids, resets, etc.

So pretty much what eswat mentioned above. Just go into it with the impression that everything in a framework is a suggestion, and learn as much as you can, with the idea that you'll be doing it your own way soon enough. Later, you can get into things like BEM, or OOCSS, or SMACSS.

I am not expert front-end coder, but I like to meddle with front-end.

Bootstrap and Foundation are huge and terrible for load times. Moreover, most websites built with Foundation and Bootstrap look the same.

I usually choose grid systems like simplegrid or skeleton and build up from there.

Not sure if I'm an expert, but I've been employed as a web designer. I don't mess with bootstrap. It's a great tool for prototyping aplications, which is what it was made for. But few websites are going to use everything in bootstrap, and most will need additional styles. It's easier to just start from scratch.

I handcode all my CSS, but freely admit it is a bit of a mess and needs some TLC or a rewrite.

I'd start off with the Skeleton http://getskeleton.com/ and build up from there.

> In other words, how would an expert go about building a responsive [...] website

I'd really like to know what I need to take a regular WWW 1.0 website (html 4.01 strict) and make it at least vaguely responsive to mobile screens.

I think it depends on the site. I would say that usually, you just need to put percentage width on your elements so they fit the screen size all the time.

Add some media queries to change the % depending of the screen/window size, and maybe hide/add some elements so it is more readable.

Nothing, it's responsive by default if it's just text and links. Mobile browsers will reflow it. Once you start bringing in divs, widths is when it becomes not responsive.

Reply on news.ycombinator.com