I am Chris Coyier. Ask me anything.

Held on 5 May 2016, 6:00 pm

Chris Coyier is the creator of CodePen and CSS-Tricks.com. He is a well known author, speaker and hosts the Shop Talk Show podcast. If you are a front end developer, you most likely use CodePen everyday. This is a great opportunity for you to get in touch with Chris and ask any questions you want him to answer.

Michele B's photo

This might sound cliche, but are you a fan of CSS frameworks? What do you think of them?

Chris Coyier's photo

Maybe a telling fact: I've never used one for a real project.

When I'm the CSS lead on a project (kinda my thing), I feel most comfortable when I'm intimately familiar with everything happening in the stylesheets. I get that intimacy by writing it (and reviewing what other people write). Not to mention I enjoy writing CSS.

I get squirmy when using any outside CSS at all.

But as usual, I'm of two minds. I'm also extremely impressed by some CSS frameworks. Bootstrap is kind of amazing and I feel like the "ugh, bootstrap is everywhere blah blah" sentiment is overblown and unnecessary. I'm super impressed by Foundation. I think it's approach is probably my favorite (I get good results applying it to raw semantic markup.) It's starting to get a little weird though recently with all the different varieties native apps and stuff.

For the teams out there that don't really have a CSS lead, or don't have one that is excited about that being their job, you can likely get a lot of productivity out of a framework.

There are also about 20 billion of them because of this weird thing that happens where people that have some success writing CSS from scratch want to turn their thinking into a framework for the rest of the world.

Ida Hansen's photo

Great to see you here! How do you maintain and manage both CodePen and CSS-Tricks?

Chris Coyier's photo

A photo was recently taken of me proving that I actually have three hands.

Also a tiny monster forces me to code quickly.

But really, this is my favorite quote about productivity.

I just work on stuff and that's it. I don't even work particularly hard. I just checked my RescueTime and it's kind of embarrassing actually. It's not even 8 hours a day. I need to up my game there.

Also, if it's not clear, I'm a founder at both CSS-Tricks and CodePen, but many people work on both projects. Here's the CSS-Tricks Team and the CodePen Team. I also do ShopTalk Show with my friend and co-host Dave Rupert.

Pankaj Parashar's photo

What are your thoughts about Atomic CSS (acss.io)?

With the introduction of so many similar frameworks (like Tachyons), do you think the CSS industry is moving away from OOCSS and towards single purpose styling units like ACSS?

Chris Coyier's photo

It weirds me out.

I'm not super compelled by it.

But, I know some very smart people that ARE compelled by it. I would use this kind of thinking:

  1. Can we be comfortable and productive with this thing?
  2. Does it seem like this thing will serve us well into the future?

If both of those questions get confident YES's, use the thing and ignore the nay-sayers.

Fred Copeland's photo

Thanks for hosting this AMA.

What, according to you, made CodePen a huge success? (given that the front-end world already had jsFiddle, Plunker etc)?

Chris Coyier's photo

Thanks for having me! I'm digging this site.

Also thanks for considering CodePen a huge success. Time will tell, on that one, but I'm very confident!

It's true that tools like jsFiddle and JSBin predate CodePen, and CodePen was born in their shadow. We had this consideration: "What are the coolest demos people have made on jsFiddle, TODAY?" How do you find them? Who decides that?

Based on that, we decided to make the homepage of CodePen a showcase rather than the editor itself. We decided to have user accounts and make CodePen a social network in addition to a code editor. We decided we'll pick some of the best work on CodePen and show it to you. We decided we'll use algorithms to determine popular work, so you have a voice in what is popular as well. The community that came out of that is what makes CodePen different. Well, one of many things ;)

holden's photo

CSS Tricks was the first blog that ever encouraged me, as a designer, to learn to develop.

The amazing thing is that in all those years the tone of css tricks remains the same (logical straightforward and un-intimidating) but I do wish you would have have more code pen meetups in SF.

Sorry for the long intro.

question: I have hit a spot in my career where it seems like I have to decide on dev or UX. Very few companies have team lead roles that are hybrid (it's kind of a new concept).

I know I can always learn on my own time but I can't imagine not using code as a design tool and vice versa. I would love to know how you have stayed firmly in between the two worlds and what steps I can take make it easier for people to accept more fluidity within a leadership role.

Sirwan Afifi's photo

Hi Chris:

1) As far as I know you are a self taught developer (the best one) how have you done that? I know it's a long journey to become an expert in one field but sometimes we we need guidance.

2) Could you please mention what tech/language/framework you're going to utilize in the next 6 months?

3) What's the tech stack of CodePen?

4) How many programming books do read per month?

One more thing, I started off my programming with CSSTricks :) Thanks for all the tricks you taught us :)

Chris Coyier's photo

1) There might be a little too much mystique around "self taught". A guitar player might be deemed "self taught" because they didn't take lessons. But in actuality, they downloaded a bunch of tabs, watched YouTube videos, ask fellow musicians questions, listened to a huge variety of existing music. They had teachers, they just didn't call themselves teachers.

Development is the same thing. Even if you didn't go to school for it, you learned along the way through reading, googling, co-workers, whatever.

As for me, I'm absolutely not self-taught. In high-school I took programming courses and loved them and excelled at them. In college I took both programming, art, and design courses. I've taken online courses. I've read a ton of books on design and development. All that in addition to the normal course of learning through community and doing. I'm very much a product of teaching.

2) The biggest project going right now is Rails, but React/Redux inside of it, and SCSS/PostCSS.

3) We have a podcast called CodePen Radio that talks about this stuff a lot. It's that stuff above, plus some Node, MySQL, loads of AWS servers.

4) I probably skim at least one.

Miłosz Kroczek's photo

What do you think? Is there a place on the market for frontend developers only with CSS + HTML knowledge?

Chris Coyier's photo

"Only" is the trick word there.

I hope companies have roles that are specifically focused on HTML and CSS. Those are vital components to any website. Having true experts focusing on them seems pretty smart. I see consultants like Harry Roberts making a good living helping companies with this.

The reason I'm tripped up with "only" though, is that if you're a smart person and already an expert with HTML and CSS, there is no reason you can't expand you're skillset a bit into other things. If you're like "Nope, I know this stuff, I'm not learning anything else" - that's probably not signaling very well.

David Tai's photo

I've recently been thinking about the future of CSS and JS division of responsibility/functionality on modern webapps. Currently, there seems to be a trend for migrating functionality that has traditionally been the responsibility of JS and Jquery libraries to CSS. In the last couple years, CSS only implementations of menus, columns, counters, media queries, and animations have become widely known and common place (thanks to services like Code Pen and Css Tricks) since they are cleaner and more fluid especially on mobile.

How much do you see future versions of CSS like the Level 4 proposals taking over things traditionally done using Javascript? In your opinion, will there be a day where Javascript is only used to bind form data and write dynamic data into HTML templates while HTML/CSS handles all the fancy user interactions?

Aron's photo

Do you use any particular JavaScript framework? In case yes, what is that and why do you like it?

Chris Coyier's photo

Here's the /libs/ directory on CodePen.

Sorry that wasn't very accessible, but the point is: yes, many. Those aren't all used on every page of CodePen, and there might be some stuff we've stopped using in there, but I'd say most of it is used.

That doesn't include our latest thinger we're working on that is in React/Redux and the smattering of libs that come with that.

I'd prefer nobody in the world picks a JavaScript framework based on what I use. I'm a follower in that regard, and definitely not qualified to be a trendsetter.

Ben Buchanan (200ok)'s photo

What do you think are the best and worst trends in CSS right now?

If you could change one thing about CSS what would it be?

Raymond Perez's photo

I often find that developers in your position, those considered to be gurus in their field, respond to these questions the same way. "I just love doing what I do".

You have a fair share of large projects. How do you keep from burning out? How do keep it all manageable? Is it as simple as never getting tired of it all because you enjoy it so much?

Interested in any tips you have. Are you a goal oriented person who keeps track of progress? Does that keep it all in perspective? Or do you have any other good advice on the subject?


Chris Coyier's photo

Vacations, yo.

This transcends design and development. It applies to anybody working on anything for long periods. People figured it out a long time ago. Take a break sometimes, come back refreshed. If you ain't refreshed, the break wasn't long enough, or you truly don't like what you're doing and you need to do something else (if you have the means).

Aaron Bushnell's photo

Unit testing seems crucial when doing JavaScript development. Is there anything comparable for HTML and CSS development? If so, are you using it?

Oli Laban's photo

If you were starting the development of CSS-Tricks today, would you still use WordPress? If not, would you build it from scratch or use another existing CMS (or a hybrid)?

Chris Coyier's photo

I'd totally use WordPress again.

Joshua's photo

What do you think about using visual studio as a web development IDE

Chris Coyier's photo

Seems pretty good. I know people that love it.

Miguel Rico's photo

As someone who is just now starting to get into web development. Should I still be worried about compatibility with old IE browsers? Every time I google something I end up with posts saying things like "Can't use that yet because I have to support IE 8 or below" Of course these are usually are old posts from stack overflow.

I guess I'm asking should I learn all the old school tricks of centering things or can I flexbox the shit out of my site and use fancy things like border-radius?

As a side note, just wanted to thank you for everything you've done for the community. CSS-tricks always goes at the end of my google searches.

Chris Coyier's photo

Every question about browser compatibility should be grounded in what the users of that particular website are using. Which a free analytics service like Analytics can tell you.

It's so tempting to think about and talk about global usage of browsers, but don't let that leak into your decision making on any individual site.

If your statistics for your website show that you have a significant number of users using IE 8, then you better as hell support IE 8, because that's the job, and if don't then you're probably not doing buisness good.

Best of luck!

Arihant's photo

Hey Chris! My question is an extension of a question here, nonetheless I'll ask it in my context and words. It's not related to CSS tricks and Codepen (which are awesome by the way!)

I learn something new, keep reading the blogposts, tutorials, docs, follow up on forums; but when I have an idea, I never follow up properly on it, because either

  • I convince myself that I won't be able to do it
  • I convince myself that I need a mentor to help me make it.
  • I get intimidated by people who are better than me and are making things.
  • I always force myself to do something alone, not asking many people to join on the idea, because I think I'd only be able to learn something properly if I do it alone.

Background: I'm 4 months old to web development.

Have you ever faced emotional bogging down challenges like these while starting up? How do you suggest I eliminate these for good and actually convert an idea into reality for good?


Jairo Mejia's photo

In your opinion - is being a Wordpress developer still a valid skill?

Hemza Wind's photo

How much did you suck at developing the first 3 years of your life? And what would you say helped you improve the most overtime?

Chris Coyier's photo

We'd have to ask my mom, but I suspect as a baby I was a pretty average baby developer.

In all my years as an adult developer, my favorite advice is the ShopTalk Show Mantra.

Alex Houghton's photo

I love CSS-Tricks and CodePen! And it's been a while for me, but Shop Talk has always been a joy to listen to. Thanks for all the work you've put out!

On that note, since you've dirtied your hands with so many different web techniques: How do you get yourself in the right mindset to learn new skills/technologies?

Juan Diego García Quiroga's photo

Hi Chris,

First of all I need to thank you for being the person from whom I've learned the most this past 4~5 years since I started my career in Web Development. I learned more from your Lodge videos on the CSS Tricks redesign than from many of the books I've read and tutorials I've followed. So, thank you forever for that!

I always find myself not knowing what to do when trying to learn some new framework, library, language. I end up reading lots of docs, blog posts, watching youtube videos but not building anything. I know I should build something to incorporate new knowledge, but I always ask myself: "What should I build?" I know I could always go with the Todo app or the Weather app, but those tend to became repetitive even when using other frameworks, libraries or languages.

I wanted to ask you: whenever you try to learn some new language or new framework, what is your approach? Do you just start building something while reading docs and watching videos? Do you first read documentation and some books or blog posts?

Chris Coyier's photo

I have the same problem. Even if you do pick some random thing to build (e.g. todo app) it won't be any fun and you'll lose interest. The trick is to care about what you're building. Maybe pick something that is inherently personal. Like build a section of your personal website that uses the new thing you're trying to learn, so there is something important at stake.

Karthick Sugumar's photo

What's your advice for a 3 years experienced (age 25) Frontend developer working in a private sector who leading UI team, to improve his managing and UI developmennt skills.

Nate Russ's photo

What does your typical day look like? How do you manage your work and personal life?

Ashwin Pathak's photo

How did you get started with blogging?

Chris Coyier's photo

Downloaded WordPress. Installed. Wrote stuff. Felt molten power course through veins.

Tim Sabat's photo

That guy, Tim Sabat. He seems like he may smell bad. Is that true?

Cédric Stempin's photo

What is THE thing you don't want to see anymore (on websites), and what is your better alternative?

Chris Coyier's photo

All this stuff. The alternative is to have a some empathy for the people trying to use your site.

Caleb Porzio's photo

Hey Chris,

What is it like to be sorta-kinda famous? Any perks you've experienced?

BTW - you are the man - and your sites are the men!

Simon Rothert's photo

Sorry for this late question but I was wondering what do you think of the sass framework bourbon vs compass? Thank you for your time and for hosting this ama :)

Aaron Brewer's photo

There has been a few rumblings about "failed" web standards recently (https://www.peterkrautzberger.org/0186/ for one), I've recently run into it myself with https://www.w3.org/TR/speech-synthesis/ and the patchy/broken support that currently exists in browsers.

I was wondering what you're take is on this working group issue, and if you think it's going to get better or worse while all our attention seems to be focused on ES6 and beyond.

Deactivated User's photo

Should I take this WordPress job I'm being offered?

The job in question is at a small agency that basically makes money by selling WordPress sites to small businesses and charging for upkeep/maintenance. I have no problem with WordPress itself, but my goal is to learn web development more thoroughly than just WordPress. The owner of the agency told me as much that most of my work will be configuring a theme. I feel like this job won't be instructional as I hope, and my time would be better spent learning relevant skills on my own. Basically, I want to be a web developer, not a WordPress developer.

I don't need the money either. I'm a full-time student currently.

Michael Bykovski's photo

How you create or get ideas such CodePen and CSSTricks?

lignux's photo

Is freecodecamp enough for one to become a decent web dev or maybe you recommend a different approach?

Abraham Earls's photo

What are the biggest challenges and drawbacks in today's learning process?

Chris Coyier's photo

I don't know that there is any standardized thing you could call "today's learning process".

I can say I feel a little sorry for people getting into web design and development right now, because it feels a bit more overwhelming than it did when I started. Having a good mentor (or teacher) will always be tremendously valuable.

Roman Ivanov's photo

Hey Chris, our job - is all day watching to the monitor... and I want to ask how to prevent eye strain and other issues... Maybe good monitor? or anything else?... Thanks.... (sorry My english very bad)

Chris Coyier's photo

I've never had eye trouble but I have had RSI. After suffering finger pain for far too long, switching to only of those split keyboards and a more ergonomic mouse fixed it quickly.

I also use F.lux to get that orange screen stuff going on in the darkness. I'm not sure if that actually is healthier on the eyes, but I know I like it.

David's photo

Do other people tell you that your voice sounds exactly like Chris Hardwick? Are you actually the same person?

Devin Chaves's photo

Is Value Based Pricing suitable for new freelance developers? Or should we first see what limits we can reach with an hourly structure?

Chris Coyier's photo

I'm not quite sure what that is and I've never freelanced. Just today though, I rounded up some freelancing advice for a friend, so maybe there are some bits in there that could be helpful.

Chris Johnston's photo

Have you ever seen Snap.svg fail like this on Chrome - logo in the bottom left:


works on safari

Chris Coyier's photo

At a conference one time, Pamela Marie said (paraphrased):

Golden rule asking a question: imagine trying to answer it Golden rule in answering: imagine getting your answer

I only mention this because I think it's useful for everyone in increasing how good of answers you get you when you ask questions. For your question, it's not immediately obvious what "fail like this" is referring to. I was able to see the problem because you mentioned it behaves as expected in Safari and I could compare and see the difference, so that's good, I'd just error on being even more clear.

I'm afraid I don't know what's going on there. I see the <path> isn't a stroke though, it's a shape, even though it's doing the "draw itself" trick. I think if I was going for this effect I'd make it a stroke on the path and use drawSVG.

Chris Johnston's photo

Thanks Chris! yes, I need to work on my skills of posing technical questions. I never get my questions answered on Stack Overflow :/ haha

Thanks again!

Bishop Zareh's photo

Why did Object-oriented CSS (ala Stubbornella) never take off?

Chris Coyier's photo

I think it did! Just in a more insidious and effective way. Nicole's lessons were things like...

  • Be very careful about specificity
  • Think in patterns
  • Use classes a lot
  • Use tools and analytics and heuristics to inform CSS choices

If any of these things seem obvious now, know that they weren't always. Even if we don't call it OOCSS much anymore, Nicole was way ahead of the curve on this stuff and influenced how the community thinks about CSS immensely.