Episode 125 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews a front end expert in Jonathan Snook (@snookca) who works for Yahoo and co-wrote The Art and Science of CSS for SitePoint too.
SitePoint Podcast的第125集现已发布！ 本周，我们的定期采访主持人Louis Simoneau( @rssaddict )采访了在Yahoo工作的Jonathan Snook( @snookca )的前端专家，他还为SitePoint撰写了CSS Art and Science。
You can download this episode as a standalone MP3 file. Here’s the link:
您可以将本集下载为独立的MP3文件。 这是链接：
SitePoint Podcast #125: Taming the Stylesheet with Jonathan Snook (MP3, 27:41, 26.6MB)
SitePoint Podcast＃125：用Jonathan Snook驯服样式表 (MP3，27:41，26.6MB)
Jonathan takes us through his recent work for Yahoo on their Web apps like their Mail service and Flickr, and the benefits of using CSS3. He also talks about his recent communication with the W3C Working Group on ideas and changes happening in the CSS3 spec.
乔纳森(Jonathan)为我们介绍了他最近在Yahoo的Web应用程序(如Mail服务和Flickr)上使用Yahoo的工作，以及使用CSS3的好处。 他还谈到了他最近与W3C工作组进行的有关CSS3规范中发生的想法和变化的交流。
Louis also asks Jonathan about his work on SMACSS, a workflow for CSS for everyone working with CSS.
Louis还询问Jonathan关于SMACSS的工作，SMACSS是CSS的工作流，适用于使用CSS的每个人。
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/125.
浏览http://delicious.com/sitepointpodcast/125上显示的参考链接的完整列表。
Louis: Hello and welcome to another episode of the SitePoint Podcast. With me on the show this week we have a veteran of the Web Design industry, Jonathan Snook; hi, Jonathan.
路易斯：您好，欢迎收看SitePoint播客的另一集。 本周与我一起在节目中，我们有Web设计行业的资深人士Jonathan Snook； 嗨，乔纳森。
Jonathan: Hello, thanks for having me.
乔纳森：你好，谢谢你有我。
Louis: Hey, it’s great to have you. You’ve been involved in the Web for a long time and somehow you’ve managed to never come on the podcast, but you’ve written for SitePoint before, you’ve got a couple articles on the site and you were co-author of The Art and Science of CSS.
路易斯：嗨，有你真高兴。 您已经参与Web已有很长时间了，并且以某种方式从未设法进入播客，但是您之前曾为SitePoint撰写过文章，并且在网站上有几篇文章，并且您是其中的合著者CSS的艺术和科学。
Jonathan: That is correct. I’ve always enjoyed working for SitePoint, it’s been fun.
乔纳森：是的。 我一直很喜欢在SitePoint工作，这很有趣。
Louis: Cool. And so, yeah, as it happens Kev (Kevin Yank) was back in Canada on vacation just a couple of weeks ago and you guys met up and he just sort of suggested to me why don’t we get Jonathan on the show and I thought that’s a great idea.
路易斯：酷。 所以，是的，就在几周前，凯夫(凯文·扬克(Kevin Yank))回到加拿大度假时，你们见了面，他只是向我建议，为什么我们不让乔纳森(Jonathan)参加演出，我认为这是个好主意。
Jonathan: Yeah, very nice; it’s always nice to see Kevin, he’s been up a couple times so it’s nice to be able to touch base with him and see him around these parts.
乔纳森：是的，很好。 看到Kevin总是很高兴，他已经起床了几次，因此能够与他接触并看到他在这些部位周围很高兴。
Louis: Absolutely. I’ve been familiar with your work for some time, I’ve been using that little color contrast checker tool that you put on your website pretty much every time I get tempted to try and use CCC on white, I always have this thing to reign me back in and say wait that’s probably not such a good idea.
路易斯：绝对。 我已经对您的工作熟悉了一段时间，每次我想尝试在白色上使用CCC时，我几乎都在使用您在网站上使用的那种小小的颜色对比检查器工具，我总是想重新统治我，说等待可能不是一个好主意。
Jonathan: That’s awesome.
乔纳森：太好了。
Louis: So what have you been up to these days?
路易斯：那你最近在忙些什么？
Jonathan: Keeping pretty busy. I’m currently working at Yahoo on the Apps Division which includes products like Mail, Messenger, Flickr, Calendar; we’ve got a whole slew of products under there. And working on the prototype team which means that I work with the designers to actually build front end prototypes, test the interactions, things like that, and then work with the engineers to actually get that stuff integrated and make sure that what they’re implementing matches the design vision.
乔纳森：一直很忙。 我目前在Yahoo的Apps部门工作，该部门包括Mail，Messenger，Flickr，Calendar等产品； 我们下面有很多产品。 在原型团队中工作，这意味着我与设计师一起实际构建前端原型，测试交互性之类的事情，然后与工程师合作以使这些东西真正集成起来并确保他们正在实施符合设计愿景。
Louis: Alright. And is that all front end work or do you do some backend as well?
路易斯：好吧。 并且是所有前端工作还是您也做一些后端工作？
Jonathan: There’s a little bit of backend, mostly with how we deal with our prototype engine, but it’s predominantly all front end work, HTML, CSS and JavaScript.
Jonathan：有一些后端，主要涉及我们如何处理原型引擎，但是主要是所有前端工作，HTML，CSS和JavaScript。
Louis: Alright. So how are you finding the work?
路易斯：好吧。 那么，您如何找到工作呢？
Jonathan: It’s been a lot of fun actually, it’s been a huge — just a fantastic experience. The amount of learning that can happen when you’re working in that kind of scale, I mean we have within mail alone over 300 million users, you know we’re the biggest webmail product out there, we’re dealing with 40 different languages, we’re dealing with bi-directional interfaces, we’re dealing with beaming, there are just so many different components involved in trying to make everything work smoothly to think about performance and it’s just been a fantastic learning experience.
乔纳森(Jonathan)：实际上，这很有趣，它真的很棒，只是一种很棒的体验。 当您以这种规模进行工作时，可能会发生的学习量很大，我的意思是我们仅邮件内就有3亿用户，您知道我们是目前最大的网络邮件产品，我们正在处理40种不同的语言，我们正在处理双向接口，正在处理波束传输，其中涉及许多不同的组件，它们试图使所有事情顺利进行以考虑性能，这真是一种了不起的学习体验。
Louis: I can imagine that’s pretty crazy. So I’ve got a couple of things I wanted to talk to you about on the show this week. One of the things is I had Paul Boag on the show a couple of months ago, and he’s working currently on a redesign of his website and we were talking about all the different things he was going to try and use, new technologies and this and that in his redesign, and one of the things he brought up was the rem based text sizing and he sort of said — he gave a shout out to you for pointing him in that direction in an article on your blog. So maybe we could talk a bit about that, it’s interesting because it’s one of these features that sort of appeared in a lot of browsers very quickly, so support has gotten pretty good pretty fast; it’s part of CSS3 but maybe not as shiny a feature as some of the other stuff like border radius or box shadow that people get excited about. So maybe it hasn’t gotten as much press as some of the sexier features in CSS3, but it is something that’s very useful.
路易斯：我可以想象那很疯狂。 因此，本周我想和您谈谈几件事。 其中之一是几个月前，我让Paul Boag参加了展览，他目前正在重新设计他的网站，我们正在谈论他将尝试和使用的所有不同事物，新技术以及在他的重新设计中，他提出的一件事是基于rem的文本大小调整，他有点说-他在您的博客文章中向您大声疾呼，指出了这个方向。 因此，也许我们可以谈一谈，这很有趣，因为它是许多浏览器中很快出现的这些功能之一，因此支持已经相当不错了。 它是CSS3的一部分，但可能不像其他令人兴奋的东西(例如边框半径或框阴影)那么闪亮。 因此，它可能没有CSS3中一些更性感的功能受到重视，但这是非常有用的。
Jonathan: It is, it’s something that caught my eye when IE9 was in beta, I had seen it in the future list and I was just really curious, what is it, how does it work, so once it came out of beta and just seeing what other browsers also supported it, and I was really surprised to see that it had pretty good cross browser support.
Jonathan：是的，当IE9处于beta版时，这引起了我的注意，我在以后的列表中看到了它，我只是很好奇，它是什么，它是如何工作的，所以一旦它退出beta版，看到其他浏览器也支持它，令我感到非常惊讶的是它具有很好的跨浏览器支持。
Louis: Right. The idea is that — so just to recap a little bit for anyone who hasn’t read your article, and if they haven’t they should go to Snook.ca and check that out, but the idea is that you take something that works like an em rather than pixel, so it’s an elastic text size, but it doesn’t have that flow-on effect that ems have. So, everyone will be familiar when you’ve got an em size on your body that’s say .8 ems and then you set on an unordered list, for example, a font size of .6 ems, will those two cascade, so you wind up with a size .6 multiplied by .8 instead of just having the .6 of a master value, and that’s exactly what rems give you is this kind of master value that then everything descends from that rather than descending from the parent element.
路易斯：对。 想法是–因此，对未读过您文章的任何人进行一点回顾，如果没有，则应该去Snook.ca并检查一下，但想法是，您可以采取一些可行的措施就像em而不是pixel一样，因此它是具有弹性的文本大小，但是没有em所具有的顺畅效果。 因此，当您身上的em大小为.8 ems，然后您将其设置为无序列表时，每个人都会很熟悉，例如，.em的字体大小为.6 ems，这两个字体将层叠起来，这样您就可以大小乘以.6乘以.8而不是只有一个主值.6，这正是rems给您的是这种主值，然后所有值都从该值降级，而不是从父元素降级。
Jonathan: Yeah, I think em based layouts the biggest frustration has been dealing with that cascade, dealing with the fact that you’ve got these multiple levels, and your example of lists is a perfect example of that and has been I think a point of frustration, I think a lot of people have fallen back to the pixel based layouts because of that, whereas rem is kind of really nice in that sense in that we can specify a value and have it relative to the root which is really what a rem is, it’s a root em based format, so that you can specify your base font size and then have everything based off that. It doesn’t have to be just font size as well, you can certainly use it for page measurements, images or divs or anything else with regards to layout you could also use for rem.
乔纳森：是的，我认为基于em的布局最大的挫败感在于处理级联，处理了您拥有多个级别的事实，而列表示例就是一个很好的例子，并且我认为这很重要令人沮丧的是，我认为很多人因此而退回到基于像素的布局，而rem在这种意义上确实非常好，因为我们可以指定一个值并将其相对于根，这实际上是一个rem是，这是一种基于root em的格式，因此您可以指定基本字体大小，然后基于此设置所有内容。 它并不仅限于字体大小，您当然可以将其用于页面尺寸，图像或div或其他与版式有关的布局。
Louis: So how is support at the moment? At the time you wrote that piece it was in IE9, so that’s good, and is it in all of the other browsers?
路易斯：那么目前的支持情况如何？ 在您撰写该文章的时候，它是在IE9中编写的，所以很好，并且在所有其他浏览器中都一样吗？
Jonathan: We see it in WebKit, Mozilla, so we’ve got Safari, we’ve got Chrome, we’ve got Firefox and we have IE9 which is pretty good, off the top of my head I don’t believe Opera supports it yet. The funny thing is I haven’t written about it, it’s not actually something that I have integrated into my workflow, it was something that I had wanted to point out for a lot of people who might be interested in what this new feature was, but I’ve actually been using pixel based layouts for a long time, I’ve been very comfortable with that. I think one of the complaints that people have often had with pixel based layouts has been IE7 and 8 have not had, well, and certainly before, IE6, IE5, IE5.5, does not allow text resizing. But when IE7 and IE8 supported page zoom I really felt that that gave users the functionality that they needed, so if they’re viewing a page where the font size is just too small what tools do they have available to them to be able to read stuff at a larger font size, and I felt that user do have the features available to them with pixel based layouts across all browsers, that it wasn’t really a huge concern, and as a result of that I felt very comfortable in recommending going with a pixel based layout. I certainly don’t begrudge anybody that want to go that extra step and support users who just want to bump font size in those particular browsers, but I would feel that that market is fairly small and I’m okay sticking with pixel based layouts.
Jonathan：我们在WebKit，Mozilla中看到了它，所以我们有了Safari，Chrome，Chrome和Firefox，还有IE9，这非常不错，我不敢相信Opera支持还没完成。 有趣的是，我还没有写过这件事，它实际上并不是我已集成到工作流程中的东西，我想向很多对此新功能感兴趣的人指出，但实际上我使用基于像素的布局已有很长时间了，对此我感到非常满意。 我认为人们对于基于像素的布局经常会抱怨的其中之一就是IE7和8，而且，当然在以前，IE6，IE5，IE5.5不允许调整文本大小。 但是，当IE7和IE8支持页面缩放时，我真的感到这为用户提供了所需的功能，因此，如果他们正在查看字体大小太小的页面，他们可以使用哪些工具来阅读字体较大的字体，我觉得用户确实在所有浏览器中都具有基于像素的布局可用的功能，这并不是真正的大问题，因此，我很乐意推荐使用基于像素的布局。 我当然不会对任何想要采取进一步措施并支持只希望在那些特定浏览器中增加字体大小的用户的人感到不满，但是我会觉得这个市场很小，我可以坚持使用基于像素的布局。
Louis: Yeah. I’ve always sort of been of that opinion, at least since browsers have had full page zooming, that the issue of resizing font size is less critical than it used to be, because it used to be a serious concern; if you were doing your text size in pixels it was actually causing a real problem. But I have had people when I’ve made that argument come back and say that’s not enough, people really need to be able to adjust the font size separately and that’s what they expect to happen when they go in the browser and they say set the default font size to large, for example, and then every website they load will have a larger font size.
路易斯：是的。 我一直都有这样的看法，至少由于浏览器已经进行了全页面缩放，因此调整字体大小的问题并不像以前那么重要，因为它曾经是一个严重的问题。 如果您以像素为单位进行文字大小设置，则实际上是一个真正的问题。 但是当我提出该论点时，有人说这还不够，人们真的需要能够分别调整字体大小，这就是他们期望在浏览器中发生的事情，然后他们说要设置例如，默认字体大小会变大，然后它们加载的每个网站都会具有更大的字体大小。
Jonathan: You know, I can understand that argument with the exception that if you looked at the marketplace, if you took let’s say the top 100 web pages, the top 1,000 web pages, how many sites are actually developed using a flexible font size such as an em based unit. And I would say that number is fairly small, I would say the number of users that would expect that to happen would actually probably be pretty small.
乔纳森(Jonathan)：您知道，我能理解这一论点，不同的是，如果您看一下市场，如果您选择了前100个网页，前1,000个网页，那么实际上使用灵活的字体大小开发了多少个网站，例如作为基于em的单元。 我会说这个数字很小，我会说期望发生这种情况的用户数量实际上可能很小。
Louis: Yeah, that’s a really good point, if people are not — if people have tried it and it hasn’t worked before they’re not going to try it again on your website.
路易斯：是的，如果没有人，那就是一个很好的主意-如果人们已经尝试过，但是在他们不想在您的网站上再次尝试之前没有奏效。
Jonathan: (Laughs) exactly. And I think there’s a lot of areas in web development that I think time and energy should really be spent on that I think have a much larger impact than the number of users in IE 6, 7 and 8 who are looking to bump up just their font size.
乔纳森：(笑)完全是。 而且，我认为Web开发中有很多领域我确实应该花时间和精力，因为与那些希望提高自己的IE 6、7和8的用户数量相比，我认为它所产生的影响要大得多。字体大小。
Louis: Another thing, though, is with the advent of responsive web design techniques we’ve seen a lot of flexibility added to pixel based layouts that wasn’t there before, so before if you did a pixel based layout you could be stuck at a given pixel width, of course the response to that would more be a fluid thing than an em based thing, but now it’s a lot easier to make something that’s pretty fluid despite being set in pixels.
路易斯：不过，另一件事是，随着响应式网页设计技术的出现，我们已经看到了以前不存在的基于像素的布局增加了很多灵活性，因此在进行基于像素的布局之前，您可能会陷入困境在给定像素宽度的情况下，对响应的响应当然比基于em的响应更流畅，但是现在即使将其设置为像素，制作相当流畅的对象也要容易得多。
Jonathan: Yeah, absolutely, I mean we definitely have a lot more tools at our disposal, and media queries and responsive web design definitely give us a lot more tools to play with.
乔纳森：是的，绝对是的，我的意思是我们肯定可以使用更多工具，媒体查询和响应式网页设计肯定可以为我们提供更多工具。
Louis: Right. Another thing you wrote about recently, I just happened to catch this on your blog this morning as I was just scanning it before the show, you wrote a bit of a proposal for a slight change in the way CSS3 animations work.
路易斯：对。 您最近写的另一件事，是我今天早晨刚在展览前扫描它时，碰巧在您的博客上注意到了这一点，您为CSS3动画的工作方式写了一点建议。
Jonathan: Yeah, it’s something that I’ve had a bit of a frustration with just wanting to take advantage of some of these features, and so had thought of these things and actually jumped on the W3C mailing list and was actually really surprised some of the stuff has already been discussed and agreed upon but just hasn’t shown up in the spec, and then for the other points it was stuff that they felt, yes, was actually a good idea, so I’m definitely looking forward to the next draft of the CSS3 animations to see if they can get those features in there because I think that would be awesome.
Jonathan：是的，我只是想利用其中的一些功能而感到有些沮丧，因此想到了这些东西，实际上跳进了W3C邮件列表，实际上让我有些惊讶这些内容已经过讨论和达成共识，但尚未在规范中显示，然后针对其他观点，他们认为它们确实是个好主意，因此，我绝对期待CSS3动画的下一个草案，看看它们是否可以在那里获得这些功能，因为我认为那太好了。
Louis: So what kind of stuff are we talking about?
路易斯：那我们在说什么呢？
Jonathan: So one of the things was that the current spec right now, and how the browsers certainly behave right now, is that when you specify keyframes that you have transitionable properties and non-transitionable property. So a transitionable property would be something like maybe top where you want something to transition between 0 and 100 pixels or maybe your opacity is going to go from 0 to 1, but non-transitionable properties like display block, for example, and you want to transition that to display none, there’s no way to transition it simply on or off. And the spec right now says that those properties should be ignored, and that actually makes some things a little bit difficult when you’re trying to create a fallback, so if you imagine, okay you know what, I have a browser that does not support CSS animations, what should happen in that case? And you might say, okay, I want this dialogue, for example, to go from display none to display block but for browsers that support the animation. The problem is that because of that instant on and off what we end up running into is a case where the animation will actually not work in certain directions, so if you’re going from display none to display block that will work okay because the display block comes on instantly and then we can actually animate that. But going in the opposite direction you go from display block to display none and the display none is applied and then the element is hidden so that the animation doesn’t actually occur. So the recommendation I had made was for the non-transitionable properties to actually be recognized, they just certainly wouldn’t be transitioned. So if you think a 0% if you had something set a display block it would still be visible, and 100% you may still say 100% display block and then it would actually be visible for the entire animation; once the animation is completed it would then default back to the style that you had as your fallback, in this case it would be display none, and your element would be hidden, so this would allow that kind of safe fallback but still allow the animations to occur like I think users would expect.
乔纳森：所以其中之一是，当前的规范以及浏览器现在的行为方式是，当您指定关键帧时，它们具有可转换的属性和不可转换的属性。 因此，可转换属性就像是top，您希望某些东西在0到100像素之间转换，或者您的不透明度将从0变为1，但是不可转换的属性(例如，显示块)，例如，您想要转换为不显示任何内容，就无法简单地将其转换为打开或关闭。 现在规范说明应该忽略这些属性，并且在尝试创建后备时实际上会使某些事情变得有些困难，因此，如果您想像一下，那么您知道吗，我的浏览器没有支持CSS动画，在这种情况下会发生什么？ 您可能会说，好吧，例如，我希望此对话框从不显示变为显示块，而是针对支持动画的浏览器。 问题是，由于那一瞬间我们最终遇到的情况是动画实际上在某些方向上不起作用，因此，如果您从无显示转到显示块，那将可以正常工作，因为显示块会立即出现，然后我们可以对其进行动画处理。 但是从相反的方向来看，您将从显示块转到不显示任何内容，并且不应用显示内容，然后隐藏该元素，这样实际上就不会出现动画了。 因此，我所提出的建议是要使不可转换的属性能够被实际识别，它们肯定不会被转换。 因此，如果您认为设置了某个显示块的值为0％，则它仍然是可见的；如果您设置了某个显示块，则为100％，您仍然可以说100％的显示块，然后它实际上对于整个动画都是可见的； 动画完成后，它将默认恢复为您的后备样式，在这种情况下，将不显示任何样式，并且您的元素将被隐藏，因此这将允许这种安全的后备但仍然允许动画就像我认为用户所期望的那样发生。
Louis: Right. And you were saying this is something that seems to be in consideration for the next version of the spec?
路易斯：对。 您是说这是下一版规范要考虑的问题？
Jonathan: Yeah, Dean Jackson was one of the spec writers, he was on the mailing list and had said that, yes, that should hopefully be in the next draft, so I’m looking forward to that.
乔纳森(Jonathan)：是的，迪安·杰克逊(Dean Jackson)是规范编写者之一，他在邮件列表中，他说，是的，希望该草案能在下次草案中出现，所以我很期待。
Louis: That sounds really good. Cool. So talk to me a bit about all these sort of CSS3 stuff, is that something you’ve had the opportunity to use in your job at Yahoo or is that still trying to be pretty conservative because of the needs for browser support?
路易斯：听起来真的很好。 凉。 因此，请与我谈谈所有这些CSS3方面的东西，是您有机会在Yahoo的工作中使用某些东西，还是由于需要浏览器支持而仍然试图保持保守？
Jonathan: Now, when we were working on the Yahoo Mail redesign, which we had worked on over the course of the last year and a half, it was actually one of those things that we really wanted to tackle and take advantage of. We knew that we could see some really large performance enhancements by going that route, and we had to sort of come to that conclusion that, you know what, the experience isn’t going to be pixel perfect in every single browser, but the functionality, you know the features that users want and need and that will actually use, will be consistent. And so in Internet Explorer, okay, they won’t get the rounded corners but everybody else will, but we were able to take advantage of certain features that IE had such as filters for gradients, so at least IE users still got gradients, whereas Firefox 3.5 users didn’t get gradients, but all the functionality was still there, the user experience was still consistent, and that was the important part for us. And as a result of doing that we had some huge performance gains, we really were able to reduce the amount of HTML we were sending over the pipe, we were able to reduce the amount of CSS that we were putting over the pipe, and as a result of that we managed to speed up our load time by twice as fast, we’ve reduced our initial payload I believe the number was like 35%; we saw some huge gains by going that route, and it’s just been a fantastic experience to see that come to fruition.
乔纳森(Jonathan)：现在，当我们在过去一年半的时间里一直在进行Yahoo Mail重新设计时，这实际上是我们真正想要解决并利用的事情之一。 我们知道，通过这种方法，我们可以看到一些非常大的性能增强，并且我们必须得出这样的结论：您知道，体验并不会在每个浏览器中都达到像素完美，但是功能，您知道用户想要和需要的以及将实际使用的功能将保持一致。 因此，在Internet Explorer中，虽然它们不会圆滑，但其他所有人都可以，但是我们能够利用IE具有的某些功能，例如渐变过滤器，因此至少IE用户仍然可以使用渐变，而Firefox 3.5用户没有渐变，但是所有功能仍然存在，用户体验仍然保持一致，这对我们来说是重要的部分。 这样做的结果是，我们获得了巨大的性能提升，我们确实能够减少通过管道发送HTML数量，能够减少通过管道发送CSS数量，并且结果，我们设法将加载时间加快了两倍，我们减少了初始有效负载，我相信这个数字约为35％； 通过这条路线我们看到了一些巨大的收获，看到实现这一目标真是一个绝妙的经历。
Louis: That’s really excellent. I think that’s something that maybe doesn’t get emphasized enough when people are talking about this stuff, you know people say oh it’s cool, you don’t have to do as much work anymore, and that’s really selling it necessarily to clients, we don’t have to do as much work to do rounded corners, but the bigger point here is that all those little images and all that extra markup and all that adds up to a significant performance hit, and if you can do it I mean a faster way that degrades nicely then there’s no reason not to.
路易斯：真的很棒。 我认为当人们谈论这些东西时，可能没有足够重视，您知道人们说哦，这很酷，您不必再做太多工作了，这确实是必须将其卖给客户，我们不必做很多工作就可以完成圆角操作，但是这里最大的要点是，所有这些小图像和所有这些额外的标记，以及所有这些都会导致明显的性能下降，如果可以的话，我的意思是更好地降级的更快方法，那么没有理由不这样做。
Jonathan: That’s it exactly. And we’re really trying to take advantage of this stuff as much as we can, even a lot of the work we’re doing now, you know, where can we some benefits; we always have performance to keep in mind and with a company the size of Yahoo I think it’s a very good use case as well. I had spoken at a conference, Future Web Design, and it was interesting to hear from the attendees afterwards who were really impressed, like they work for large companies and there’s only so much credibility or credence that they might give to smaller freelancers because they may not necessarily understand the business of being a big business, and to hear a company like Yahoo actually stand behind it and stand behind as wholeheartedly as we have I think has given it a lot of credibility.
乔纳森：就是这样。 而且，我们真的在尽最大努力利用这些东西，甚至包括我们现在正在做的许多工作，您知道我们可以从中受益吗？ 我们始终需要牢记性能，对于一家拥有Yahoo规模的公司来说，我认为这也是一个很好的用例。 我曾在“未来Web设计”会议上发表过演讲，很有趣的是，与会者之后给他们留下了深刻的印象，就像他们为大型公司工作一样，只有小规模的自由职业者才能获得信誉或信任，因为他们可能不一定理解做大生意的业务，而听到像Yahoo这样的公司实际上站在它的后面，并且像我们所认为的那样全心全意地站在后面，我认为这给了它很多信誉。
Louis: Yeah, absolutely. Another thing I wanted to talk to you about is you’ve got some workshops coming up.
路易斯：是的，绝对。 我想和您谈谈的另一件事是，您即将举办一些研讨会。
Jonathan: Yeah, so me and a group of guys, myself, Steve Smith, Dan Ruben and Brian Veloso, we had actually started this little sort of co-op probably about four or five years ago now called Sidebar Creative, and we had actually started off just doing personal projects, putting together some fun sites and applications, and then a couple years ago we had decided to put on a series of workshops called Sidebar Workshops, and we had put on a couple, as it turns out our major strength is not event management (laughter). As much as we love talking about it and teaching it was just really hard to plan those events, so we actually partnered up with UIE who has been doing all of the event management for us this year, and we actually managed to put on three events, we’ve done two so far and we have one more coming up in L.A. actually just next week, next Tuesday.
乔纳森：是的，所以我和一群人，我自己，史蒂夫·史密斯，丹·鲁本和布莱恩·韦洛索，我们实际上已经开始了这种小型的合作，大概是四五年前，现在叫做Sidebar Creative，实际上刚开始只是做个人项目，将一些有趣的站点和应用程序组合在一起，然后几年前，我们决定举办一系列名为Sidebar Workshops的研讨会，并且我们举办了几次，因为事实证明我们的主要优势不是事件管理(笑声)。 尽管我们喜欢谈论它并教他们计划这些活动真的很困难，所以我们实际上与UIE合作，UIE今年一直为我们进行所有活动的管理，实际上我们成功举办了三项活动，到目前为止，我们已经完成了两项，实际上下周，下周二，我们还会在洛杉矶再进行一次。
Louis: Alright, what’s the focus of these events?
路易斯：好的，这些活动的重点是什么？
Jonathan: So the focus is on front end design and development. We take an example project and we go through from the design phase working with Photoshop, working with Fireworks, giving off a number of tips and shortcuts and just how can we improve our workflow when it comes to the design phase, and then we transition through to the HTML, how are we actually going to build this out into the CSS, taking a look at a lot of the CSS3 features, all the tools that we can use and take advantage of as we build our sites, and then dive into JavaScript a little bit, you know JavaScript’s a very deep topic, but we do want to touch on it a little bit and sort of talk about the user experience and how we can integrate this stuff in a way that makes sense.
乔纳森：所以重点是前端设计和开发。 我们以一个示例项目为例，从设计阶段开始，与Photoshop一起使用，与Fireworks一起工作，给出许多提示和快捷方式，以及在设计阶段如何改善工作流程，然后过渡到到HTML，我们如何实际将其构建到CSS中，看看许多CSS3功能，在构建网站时可以使用和利用的所有工具，然后再深入研究JavaScript有点，您知道JavaScript是一个非常深入的话题，但是我们确实想稍微谈一下它，并谈论用户体验以及如何以一种有意义的方式集成这些内容。
Louis: Right, that sounds really good. So where were the two previous ones that you did?
路易斯：对，听起来真的很好。 那么您之前做过的两个在哪里？
Jonathan: So the two previous ones we did one in Philadelphia and one in Austin, both were fantastic events, they went really well, so I’m definitely looking forward to the L.A. event coming up.
乔纳森(Jonathan)：所以前两场比赛我们在费城进行了一次，在奥斯丁进行了一次，都是非常棒的赛事，他们的进展非常顺利，所以我非常期待洛杉矶赛事的到来。
Louis: That’s awesome; it’s a good team you’ve got as well. I saw Dan Ruben give a talk at Web Directions South just this last year, and he’s really a fantastic speaker and I can imagine as an educator in a workshop setting he must be pretty good as well.
路易斯：太棒了； 这也是一个很好的团队。 去年，我看到Dan Ruben在Web Directions South上发表了演讲，他的确是一位出色的演讲者，我可以想象作为一个讲习班的教育工作者，他也必须非常出色。
Jonathan: Absolutely. And, yeah, he loves to talk (laughter). But he’s passionate about what he does, and he’s got a lot of experience behind him and I mean Steve Smith has built a number of products and actually used to do teaching at Notre Dame, so he has a sort of teaching background as well which really comes through, and not to forget Brian has put together a lot of great projects and who actually works now at GitHub, so it’s great to have all that talent in one place, and even the people that come to attend I’ve been really impressed with the people that have been coming out. The skill level of people coming in can be almost a little intimidating, so I’m always impressed to see them walk out and say you know what, yeah, I definitely picked up some great stuff here, and that’s the best part.
乔纳森：当然。 而且，是的，他喜欢聊天(笑)。 但是他对自己的工作充满热情，他拥有丰富的经验，我的意思是史蒂夫·史密斯(Steve Smith)开发了许多产品，实际上曾经在巴黎圣母院(Notre Dame)教书，所以他也有一定的教学背景来了，不要忘记Brian汇集了很多很棒的项目，并且现在都在GitHub上工作，所以将所有人才集中在一个地方真是太好了，甚至那些来参加会议的人都给我留下了深刻的印象与已经出来的人在一起。 进来的人的技能水平几乎有些令人生畏，所以看到他们走出去并说你知道是什么，我总是印象深刻，是的，我肯定在这里捡到了一些很棒的东西，这是最好的部分。
Louis: That’s good. And is the L.A. event on Tuesday sold out or are there spots left if someone’s listening to this at the last minute and says I’m going to check a sickie on Tuesday and come to this workshop?
路易斯：很好。 星期二的洛杉矶活动是否已售罄，或者如果有人在最后一刻听了这话并且说我要在星期二检查一个病者并参加这个工作坊，那还会有景点吗？
Jonathan: Yeah, I mean you’ve got a couple days left, definitely signup, we have at this point I think just a handful of seats left, so if you can get in now is the time to do it.
乔纳森：是的，我的意思是，您还有两天的时间，肯定要签约，我们现在只剩几个座位了，所以现在就可以参加。
Louis: Alright. Are any of the materials from the workshop, does any of that wind up online; is there stuff that’s available for people?
路易斯：好吧。 是车间的任何材料吗，是否在线上完成了？ 有什么东西可供人们使用吗？
Jonathan: We do provide a number of resources afterwards, there’s obviously a lot that we cover over the course of the day, we have work files and demo files that we work with throughout the day that are provided to attendees as well as a list of resources that people can take advantage of.
乔纳森(Jonathan)：事后我们确实提供了很多资源，显然，我们一天当中都会涉及很多内容，我们会全天提供工作文件和演示文件，并会向与会者提供这些文件和演示文件。人们可以利用的资源。
Louis: Awesome. You were talking a little bit about optimizing workflow in there and various steps of the process from initially Photoshop and then your markup and then your CSS. You have this sort of ongoing back-burner project about sort of CSS workflow and organization that we might want to talk about a little bit. We were talking just before the show and I was asking you if there was anything you wanted to talk about and you said, “Ah, there’s some stuff that’s probably not quite ready to talk about,” and then I brought this thing up and you said, “Yeah, that’s the one,” (laughter) so I figure we’ll talk about it anyway. So it’s called SMACSS, do you want to tell us what that is?
路易斯：太好了。 您在这里谈论了一些关于优化工作流程以及过程的各个步骤的过程，这些过程从最初的Photoshop，然后是标记，再到CSS。 您正在进行此类正在进行的有关CSS工作流和组织的回头客项目，我们可能想谈一谈。 我们在演出之前就在谈论，我问你是否想谈论什么，你说：“啊，有些东西可能还没准备好谈论。”然后我提出了这个问题，你说，“是的，就是那个。”(笑声)，所以我想我们还是会谈论它。 所以它叫做SMACSS，您想告诉我们这是什么吗？
Jonathan: Yeah, S-M-A-C-S-S is a scalable and modular architecture for CSS, and sort of the impetus for this is actually coming from all the experience that I had not only in all the work that I’ve done before Yahoo, but also I think especially the work from Yahoo is just realizing when you’re working on a large scale how do we approach our code, and I think there have been a few people that have talked a little bit about it, I know Nicole Sullivan has been doing a lot of talk about her framework, Object Oriented CSS, and really talking about some of those approaches. So what I’ve been trying to do with SMACSS is really kind of analyze the entire process, it’s not meant to be a framework that people can plug and play into their projects, but rather be a guideline to understanding how they build things, that you can pick and choose whatever frameworks you want, but to understand how you’re building stuff. I’ve really been trying to understand what’s the best way to approach things, what will work well for large sites, what will work well for small sites, and it’s one of those interesting things to realize that some of the stuff that I’ve run into you can really get away with on a small site, you can get away with it because small sites aren’t complex, there’s not a whole lot to them, and they don’t really change as often necessarily as larger sites. I mean working on a project like Yahoo Mail there’s a lot of components involved in designing something like that, and there’s a lot of modularization that you need to do to make sure that your performance is up there.
Jonathan：是的，SMACSS是CSS的可扩展和模块化体系结构，其推动力实际上来自我不仅在Yahoo之前所做的所有工作中获得的所有经验，而且特别是我认为Yahoo的工作只是在您进行大规模工作时才意识到我们如何处理我们的代码，我认为有些人对此进行了一些讨论，我知道Nicole Sullivan所做的很多谈论她的框架，面向对象CSS，并真正谈论其中的一些方法。 因此，我一直在尝试使用SMACSS来分析整个过程，但这并不是要成为人们可以插入并参与其项目的框架，而是要成为了解他们如何构建事物的指南，您可以选择所需的任何框架，但要了解如何构建东西。 我真的一直在尝试了解什么是处理问题的最佳方法，什么对大型站点有效，什么对小型站点有效，并且这是使我意识到其中一些内容的有趣的事情之一碰到这个问题，您真的可以在一个小型站点上摆脱，您可以摆脱困境，因为小型站点并不复杂，对他们来说没有太多东西，而且它们并没有像大型站点那样经常改变。 我的意思是，在像Yahoo Mail这样的项目上进行设计时，涉及很多组件，并且需要做很多模块化工作以确保性能达到目标。
Louis: Yeah, CSS is always that kind of tricky one, right, when you’re working with code and especially for switching back and forth. In my day-to-day work I work with PHP and Ruby, and then whenever I have to go in and edit the CSS files I get complete brain — it’s a jarring experience when you open up the CSS file and like oh, wait, what? There’s no rhyme or reason to the way it’s organized really, and it’s always hard for even people who work in it full time to keep everything kind of separate and organized.
Louis：是的，当您使用代码，尤其是来回切换代码时，CSS总是很棘手的。 在我的日常工作中，我使用PHP和Ruby，然后每当需要进入并编辑CSS文件时，我就会全神贯注–当您打开CSS文件时，这是一种令人讨厌的体验，就像哦，等等，什么？ 真正组织起来的方式没有任何韵律或理由，即使是全职工作的人也很难将所有事物分开和组织。
Jonathan: Yeah, I think there’s this assumption that people have, it’s like CSS is easy, right, like how hard can it be, you want to kind of keep some general rules, you don’t want really complex selectors, you want to make sure your specificity doesn’t get out of control, but there hasn’t really been I think an overarching philosophy, and that’s really what I’ve been trying to document.
Jonathan：是的，我认为人们有这样的假设，就像CSS很简单，对，就像它有多难，您想要保留一些通用规则，您不想要真正复杂的选择器，您想要确保您的专一性不会失控，但是我并没有真正考虑过一个总体哲学，而这正是我一直在尝试记录的东西。
Louis: Alright. So what’s the status of that project or where can people find out more?
路易斯：好吧。 那么该项目的状态如何？人们可以在哪里找到更多信息？
Jonathan: Definitely check out SMACSS.com, I’ve got a signup form for a newsletter right now which basically means I’m going to email it once things get pretty close to launching. I have the — things have been kind of moving along at a pretty steady pace, I’ve got a lot of the outline written and a lot of the sections filled out, but I feel like I need a lot more examples. I want stuff that when people go in that they understand how clear and concise this is so that there’s not really going to be any doubt in how well this might work on a project. As well, because I have this framework in mind, this sort of holistic approach now that I’ve been actually trying to use more regularly and just make sure that what I’m saying is proven and can really be applied well. I think oftentimes we see frameworks and it’s often easy to dismiss them because they’re for such a small use case and great for that use case but that use case isn’t everybody’s use case, and what I really want is to have something that’s a little bit more general, that’s a little more applicable I think to everybody who’s building projects these days, so I really want to make sure I get this right.
乔纳森(Jonathan)：一定要访问SMACSS.com ，我现在有一份新闻通讯的注册表格，这基本上意味着一旦事情即将开始，我将通过电子邮件发送该表格。 我有-事情一直在以相当稳定的速度前进，我已经写了很多大纲，并填写了很多部分，但是我觉得我需要更多的例子。 我想要的东西是，当人们走进去时，他们会明白这是多么的清晰和简洁，这样一来，这在项目中的运行效果就不会有任何疑问。 同样，因为我已经有了这个框架，所以现在我实际上一直在尝试更定期地使用这种整体方法，并确保我说的话已得到证明并且可以很好地应用。 我认为我们经常会看到框架，并且通常很容易将它们解雇，因为它们只适用于如此小的用例，而对于该用例却非常有用，但是这种用例并不是每个人的用例，而我真正想要的是拥有一些我认为这对现在正在构建项目的每个人都适用一些，因此我真的想确保自己做对了。
Louis: Right, really looking forward to seeing what comes out of there, anything that can help us tame our style sheets is going to be much appreciated I think.
路易斯：对，真的很期待看到结果，可以帮助我们驯服样式表的任何事物，我认为都会受到赞赏。
Jonathan: Good.
乔纳森：好。
Louis: Was there anything else you wanted to let people know anything else you’ve got coming up, are you doing more public speaking?
路易斯：您还有其他想让别人知道的事情吗，您是否在做更多公开演讲？
Jonathan: I definitely have a fair amount of public speaking coming up. I had kind of taken a little bit quiet just because with the workshops I hadn’t really done much in a couple months, but this fall I’m going to be speaking at Adobe Max in L.A., and there’s actually a new conference starting up in Chile, Santiago, called StarTech which looks pretty good.
乔纳森：我肯定会有很多公开演讲。 我有点安静，只是因为在研讨会上几个月来我并没有做太多事情，但是今年秋天我将在洛杉矶的Adobe Max上发言，实际上有一个新的会议开始在智利圣地亚哥的StarTech看起来不错。
Louis: What’s the focus of that?
路易斯：重点是什么？
Jonathan: StarTech is a front end conference so we’re talking about HTML, CSS, JavaScript, so it should be a good time.
Jonathan： StarTech是一个前端会议，因此我们正在谈论HTML，CSS，JavaScript，所以现在应该是一个好时机。
Louis: Sounds like a lot of fun if anyone can make it out to Chile for a weekend why not, right, what’s stopping you.
路易斯：如果有人能在智利度过一个周末，这听起来很有趣，为什么不呢，是什么阻止了你。
Jonathan: Absolutely, it’s definitely going to be worth it (laughter).
乔纳森：绝对是值得的(笑声)。
Louis: Awesome. Thanks so much for coming on the show taking the time to talk about all this stuff. If people want to find you on the Interwebs where should they go?
路易斯：太好了。 非常感谢您抽出宝贵时间来讨论所有这些内容。 如果人们想在Interwebs上找到您，他们应该去哪里？
Jonathan: Well, they can definitely go to Snook.ca which is my blog where I like to share tips, tricks and bookmarks in web development, but they can also find me on Twitter @snookca.
乔纳森：好的，他们绝对可以访问Snook.ca ，这是我的博客，我希望在该博客上分享Web开发中的提示，技巧和书签，但是他们也可以在Twitter @snookca上找到我。
Louis: Alright, that’s easy enough, and thanks so much for coming on the show.
路易斯：好的，这很简单，非常感谢您参加演出。
Jonathan: Thank you very much.
乔纳森：非常感谢。
Louis: Alright, have a good one, bye.
路易斯：好，再见，再见。
Jonathan: Bye.
乔纳森：再见。
Louis: And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to Sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s SitePoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau, thanks for listening and bye for now.
路易斯：感谢您收听本周的SitePoint播客。 我很想听听您对今天节目的看法，因此，如果您有任何想法或建议，请访问Sitepoint.com/podcast ，您可以对今天的节目发表评论，也可以下载我们以前的任何节目或订阅自动显示节目。 您可以在Twitter @sitepointdotcom (即SitePoint dotcom)上关注SitePoint ，也可以在Twitter @rssaddict上关注我。 本周的节目是由Karn Broad和我是Louis Simoneau制作的，感谢您的收听和再见。
Hi there, I just wanted to drop in a quick note to mention that the SitePoint Podcast is honored again this year with a nomination in .net Magazine Awards. I wanted to take the time to thank all of our listeners for tuning in throughout the year and making this possible, and I also want to shamelessly beg you to vote for us, just head to thenetawards.com to cast your vote for the show as well as all your favorites in a bunch of other categories like Mobile App of the Year, Developer of the Year and Redesign of the Year. Thanks for your votes!
嗨，我只是想简单地提到一下，SitePoint Podcast今年再次获得.net Magazine Awards的提名。 我想花时间感谢所有听众在这一年中的投入并使之成为现实 ，并且我也想无耻地恳求您为我们投票，只需前往thenetawards.com对该节目进行投票即可以及其他类别中的所有收藏夹，例如年度移动应用程序，年度开发人员和年度重新设计。 感谢您的投票！
Theme music by Mike Mella.
Mike Mella的主题音乐。
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.
谢谢收听！ 欢迎使用下面的评论字段让我们知道我们的状况，或者继续讨论。
翻译自: https://www.sitepoint.com/podcast-125-taming-the-stylesheet-with-jonathan-snook/
