Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
OOCSS in the Real World31:04 with Jamie Strachan
CBC.ca is one of the biggest and most popular sites in Canada and our team was tasked with overhauling the front-end to improve our site speed and development process. I'll share the process we went through and highlight the benefits and challenges of moving to OOCSS so you'll be better prepared to do the same. Learn: - the key advantages of OOCSS as well as its drawbacks - how to rebuild an existing site using OOCSS - how a CSS preprocessor can work with OOCSS - what has happened in the 6 months since we launched
[MUSIC] 0:00 So just to have an idea of the people in the room, this is obviously a, 0:04 a CSS conference. 0:06 I assume you're relatively savvy CSS developers. 0:07 Who, who's heard of object oriented CSS? 0:10 Please put your hand up. 0:12 So yeah, so almost everybody. 0:13 So keep your hand up if you understand it, if you could explain it to somebody. 0:15 Okay. 0:21 So that's, no, no, that's good. 0:22 That's good. 0:23 So not very many. 0:24 I was gonna say keep your hand up if you actually worked on or 0:25 have a project in production that uses it. 0:27 I'm gonna guess, yeah. 0:29 So three, two and a half maybe. 0:30 So that's good. 0:33 So I'm gonna talk first about what Object-Oriented CSS is. 0:34 Pretty high level. 0:37 This isn't, this isn't a deep dive into what it is, 0:37 but talk about the principles just so 0:40 we're all kind of on the same page when I talk about specifically what we did. 0:41 So Object-Oriented CSS, first things first. 0:47 It's a technique, it's not a technology, okay? 0:49 This doesn't require a new build tool. 0:51 It doesn't require a new IDE, it doesn't require you to learn a new language. 0:54 It's just a way of doing the things that we already do. 0:57 Nicole Sullivan is kind of the face of Object Oriented CSS. 1:01 So she she coined the term. 1:04 She sort of packaged up these ideas with the name Object-Oriented CSS. 1:06 If you aren't following her work, you really, really should be. 1:09 Her stuff's amazing. 1:12 And she said this when she was talking about the impetus for what she was doing. 1:13 So she said that following our best practices leads to bad outcomes every 1:19 single time, which is, that's a bold, that's a bold statement, right? 1:23 And what she was talking about, if you look at, so an example like this. 1:29 This is something we call a top stories module on our website. 1:34 If we were gonna mark this up, 1:38 right, you might end up with CSS looks something like this. 1:39 So we started our two lists of stories, a primary and 1:42 a secondary, float one to the left, float one to the right. 1:45 We have little lines in between the stories, 1:48 you might not be able to see that. 1:49 Something like that, relatively straight forward, 1:51 this is very content semantic, very traditional. 1:53 Another element like this, very similar. 1:56 We call this Editor's picks. 1:58 So, maybe we have editor's picks div around it. 2:00 And this is a slightly gray background. 2:03 There's a sort of a thick border at the top of the element. 2:06 Again, there's lines between list items. 2:08 Shouldn't be anything here that's super surprising. 2:10 And this is how we would've gone about building our site. 2:12 This is almost exactly how we did go about building our site, 2:15 back when we did it before. 2:17 But what happens when you do this is that you end up with a lot of repetition. 2:20 If you focus on the content of the page, you don't see opportunities to 2:23 use sort of the same styles, the same designs over again. 2:28 So, what I decided to do was look at our website and 2:32 try to see if I could quantify what that repetition looks like. 2:34 So, I went to our, the news landing page that I showed you before. 2:38 And I took all the style sheets out, I concated them together, 2:42 and then I just did text searches for, for different rules, 2:45 different selectors just to see how many times we're doing certain things. 2:48 Some of them were pretty generic, float left, set a font size. 2:52 Some are pretty specific, right? 2:55 So, that particular border, that shade of gray, that, that width. 2:56 These are the numbers we came up with. 3:02 So, we had 16 style sheets that we're putting on that landing page. 3:04 We used the rule float left 78 different times. 3:08 We set font size 114 different times. 3:12 We set something to be 300 pixels wide, 34 times, and 3:16 that border top, we did that seven independent times. 3:20 Which is, is kind of crazy. 3:25 Again, our site's, our site's big, there's a lot happening and so 3:28 you may not have numbers quite like this, but this is, this is the end of that road. 3:30 This is what happens when you focus on the content semantics. 3:34 You can just sort of see it kinda plainly on our site. 3:37 So, object Object-Oriented CSS, says, look, this is, this is a problem, 3:39 this is a problem for maintenance, this is a problem for development. 3:43 What we need to do is we need to look at modules like that, 3:47 and we need to look at them differently. 3:50 So what we need to do is, try to identify design patterns that are common. 3:51 Don't worry about so much for the content, but 3:56 what, what design patterns can we see that are shared? 3:58 So, for example, up there, 4:01 that's that five pixel gray border that I mentioned earlier, right? 4:02 It happens to occur in two different places in these elements. 4:05 This is that single gray line, that key line between the list items. 4:09 It's exactly the same shade, exactly the same color. 4:13 Exactly the same size. 4:16 Which is in three different places. 4:17 It would have been marked up three different ways in CSS. 4:19 But even at a more basic level than that, this is a really common pattern, right, 4:23 to have just an image beside some text. 4:27 And I don't, I don't, know what website you work on, 4:29 but you have this on your website, I can basically guarantee it. 4:32 [LAUGH] So, what Nicole Sullivan did was turn this into a sort of reusable object, 4:35 and she called it the media object. 4:41 So she just sort of says every time that you do this, every time you have this 4:43 pattern, affixed with something besides a variable with something else. 4:46 often an image with text, often an icon with text, 4:50 but this pattern shows up all over the place. 4:53 And what we wanna do is turn that into a reusable CSS object and 4:55 we just apply a certain class, maybe a certain structure to get this layer. 4:59 You never ever, 5:03 ever again have to do float left this, margin right that et cetera, et cetera. 5:04 You just call it a media object and you're done. 5:09 So the object oriented part of Object-Oriented CSS, refers to this, 5:12 sort of abstraction, this turning things into reusable objects, 5:16 which she also talks a bit about inheritances. 5:20 So an object oriented programming idea, 5:23 where you have maybe a class that you want to use part of, but then you want to 5:24 extend, you want to do something more, you want to change it slightly. 5:28 So in this case if we wanted that image to be on the right hand side, we want more or 5:31 less the same underlying principles but we just wanna move which image, or 5:36 which side the image sits on. 5:41 So we would create a derivative object. 5:42 So for us, this is called media reversed. 5:45 That underscore notation actually borrows sort of from, 5:48 from BEM just to indicate that the, the media object is sort of the parents. 5:51 It's the the main object, the main class that we use. 5:56 And then media reversed is a version of that that we have for 6:00 this sort of exceptional case. 6:02 What this all really boils down to is that we need to embrace visual semantics. 6:06 That's really what underpins all of Object-Oriented CSS, but 6:10 also some of these other techniques and approaches. 6:14 We need to think about our website. 6:17 We're doing CSS, CSS is a visual language, it's a design language. 6:19 And if we aren't using it to deal with visual semantics, 6:22 then we're gonna end up with this repetition. 6:26 So this is the basic idea. 6:28 So we we sort of, you know, noodled around with this for a little while. 6:30 We like liked the idea, we just wanted to see if we could apply it. 6:33 So, our first stab at this we'll call operation twitter bootstrap. 6:36 We figured there are these frameworks that are out there already, 6:41 have similar ideas to this, we'll just find one and we'll use it. 6:45 Right, it's easy no problem. 6:48 There are a number of examples of this, obviously. 6:50 I mentioned Twitter Bootstrap, cuz it's the most popular one. 6:52 I've already heard it mentioned, like, six times today. 6:54 OOCSS is actually a library that Nicole Sullivan started. 6:58 I'm not sure how maintained it is anymore, but it is kind of a, 7:01 a style library, a framework that's available. 7:05 Inuit.css is by a guy named Harry Roberts. 7:07 Pure comes from Yahoo! 7:10 And they all follow the same notion, that they can 7:11 codify these reusable layout objects, put them into a library, use the library, and 7:16 now you get, certain of these things for free, things like the media object. 7:20 These are really good, in theory, and 7:24 only because of the ideas behind Object Oriented CSS is this even possible, right? 7:26 Three years ago, four years ago,. 7:30 If I tried to hand you a Style Sheet that I wrote, 7:32 you would get basically nothing from it. 7:33 It's all based on my content. 7:36 You don't have my content. 7:37 So, now with some of these ideas, it means we can do things like CSS Frameworks. 7:38 Unfortunately for us, this didn't work. 7:43 And the reason for this is interesting. 7:45 It's that because now we can, we can make reusable things, 7:47 we can make a CSS Framework. 7:51 They, they tend to be somewhat generic. 7:53 They, they try to create objects, kind of, for all these different cases. 7:55 And especially the cases Twitter Bootstrap, and 7:58 in some cases they make design decision for you. 8:00 And, like I said we were, we were aiming for 8:02 out sight design, not, not Twitter sight design not anybody else's sight design. 8:06 So, the actual objects and designs and things that we had were very clearly 8:09 defined, and they didn't necessarily mesh with how what these layers implemented. 8:14 So we couldn't find one that really gave us a solid base that we could build from. 8:18 There was just too much that we were sort of going to have to throw out or change. 8:22 Framers can be very helpful but 8:25 again in our case they just, it wasn't, wasn't that useful. 8:26 So our next attempt we'll call operation CBC Bootstrap. 8:30 So we figured we'd make our own. 8:34 We'll identify our own visual patterns, we'll codify those into objects, 8:37 make our own library, and then ship crazy with classes. 8:41 So, if you've ever actually used Object-Oriented CSS, 8:44 they tend to be a lot of classes that, the way the mark up is a little bit different, 8:46 the markup is a little bit [INAUDIBLE], I'll show you a little bit later. 8:50 But this is the idea, we'll make up our own framework. 8:52 [COUGH] So the absolute first challenge that we had, 8:54 almost out of the gate was having to retrain or gut. 8:58 And what I mean by this. 9:01 So I, I've been doing fine development for something like 12 years or something now. 9:03 And the ideas around content semantics and, and good clean HTML and 9:08 all that stuff have been around for a very long time. 9:13 And I certainly, and a number of us, have really internalized them. 9:14 And so when I started trying to write code this way, it, it felt really wrong. 9:17 I felt like, as I was writing and I was like, 9:23 oh, I'm gonna have to come back and fix this later cuz it feels really weird. 9:25 And it took a little while to kinda push through the, the wrongness, 9:29 I guess of how Object-Oriented CSS felt. 9:34 And that, that just takes some perseverance. 9:37 But we also realize that grids are an interesting sort of 9:40 gateway to object Object-Oriented CSS. 9:44 So grids are already very layout specific, all right? 9:47 When we deal with grids, we're dealing in columns, or 9:50 we're dealing in rows, and things are not at all content. 9:53 And yet, grids have become sort of defacto standards and have been for 9:56 quite some time. 9:59 And no one really seem to get all that upset about the fact that, well hey, 9:59 I'm not calling this a header, I'm calling it a 12th column element. 10:03 So we should have realized, well, we're already using grids. 10:07 We're already happy with that. 10:09 And this is really just an extension of that same idea. 10:10 And so grids can become this, this gateway to 10:13 sort of wedge into how we could get our heads around object-oriented CSS and 10:15 feel like we're not doing anything super, super crazy here. 10:19 So we started to build all these objects and, and 10:24 very, very soon the next challenge was that naming these things was super hard. 10:28 This is like a computer science problem, like naming is hard in general. 10:34 What's different about object oriented CSS though is that, 10:38 because now we're dealing in layout patterns, we're dealing in design, 10:41 we don't have the same hints from the content on what to call things. 10:43 You're trying to code up an element and it has a heading that says editor's picks, 10:48 well, great, that's fine I'll give that an idea of editor's picks, no problem. 10:51 Now we're talking about this thing. 10:54 Right, what do you call that? 10:57 Anyone? 10:59 You don't call it gray border top because it may not be a gray border tomorrow. 11:00 It may not be at the top tomorrow, but we need a way to communicate what this means. 11:06 Why it is that we have this border at the top. 11:10 And we don't have those clues that we would've had from the content before. 11:13 So what we did was we asked the designers. 11:17 We started talking to them. 11:20 Well, why did you even put it there? 11:21 Why, why is it there in the first place, what did you mean? 11:23 And they said, well, you know, it's sort of, 11:26 to distinguish that element, you know, from the element above it. 11:28 So we ended up calling this distinct. 11:31 And we got a lot of sort of clues from them, from the designer's, from how it 11:34 was that they put these sites together, and why they used those patterns. 11:36 And it led to this really interesting integration with design. 11:40 So again, we're, this, we're going back two, two years, 18 months. 11:43 And we were a very waterfall shot. 11:47 So, design comp PSDs, they flow from the design team to the development team. 11:51 We would build the thing, hand it off to QA. 11:55 And so, integration with design. 11:57 We, we talked to the designers, we knew who they were, 11:59 but the process was very siloed. 12:01 And what this meant was all the sudden we started having these conversations around, 12:04 well, you know, why'd you do this to the design? 12:07 Why does it look like this? 12:09 What can we call this? 12:09 And it meant that it, 12:12 it sort of created this integration with the design team that we didn't have. 12:13 Even more interesting, so 12:17 this on the left is actually cut out of our old style guide. 12:18 And the style guide used to say, well, we have something called a contained module. 12:21 When you use a contained module, it has this much padding and this much width. 12:25 And before we run a designer would give us a PSD, 12:28 we would either have to refer back to the designs, to the style guide. 12:30 We'd maybe have to get out the little ruler in Photoshop and 12:34 like count the pixels. 12:36 But in object-oriented CSS, we just, we create an object called a contain module. 12:38 And now, when a designer says it's a contain module, we say great, 12:42 the class is module contained, and we get all this stuff for free, and 12:46 nobody ever has to go back to the style guide. 12:49 And so now we, we have this, this kind of shared vocabulary with 12:51 the design team that we never use to have, which is really, really interesting. 12:55 So, in building these objects, and 12:59 I actually had a conversation with someone about this at lunch, 13:01 it's also very hard to find the right granularity. 13:03 And this is again, sort of an object oriented programming problem, but 13:05 trying to make objects that are the right size. 13:10 So if you make an object that's too big, you can't reuse it. 13:12 It does one monolithic thing and nothing else. 13:16 And so the only time you can ever use it again is when you do that one thing, 13:19 but that kind of defeats the whole purpose. 13:22 You can go the other way and make something that's so small that end up 13:24 having to use twenty of these little tiny objects to get anything done. 13:27 And in the case of object-oriented CSS, that could be something like 13:30 creating an object that only sort of has, you know, one rule. 13:34 Have a float lest, float left object that has one rule that says float left, and 13:38 any time you float something left, you just give it the float left class. 13:42 But that becomes effectively inline styles. 13:45 All the sudden you have to apply 30 classes to your element to say, 13:49 well, float left this, margin top that, padding bottom this. 13:52 And it becomes incredibly hard to actually do anything of any real use. 13:56 So finding the balance in between is tricky and there's no real secret to this. 14:00 It's just finding a way to make those objects sort of encapsulate enough of 14:04 a design pattern that they're useful that would be too small, too granular. 14:08 But after all of this, the, the, 14:13 this crazy benefit we saw from actually seeing the reuse happen. 14:16 So I, this is kind weird. 14:20 It's like, weirdly emotional for more. 14:24 I remember, I, I literally remember the day I was at work and 14:26 a colleague of mine was working on a, a different site. 14:31 So were trying to build mostly like sort of CBC News and CBC Sports. 14:33 He was working on a different part of the site. 14:36 And he knew the work that we had been doing. 14:38 We were building out the style library. 14:40 And he said well look I'm, I'm building against this other design, but I was 14:43 wondering if I could use the same library that you guys are starting to build. 14:46 And I said yeah sure. 14:49 Well, I'll sit down with you, we'll try to figure it out. 14:49 And he had the PSD open and we started sort of putting together. 14:53 And I was like oh you apply this class here and this class here. 14:56 And within a few minutes, we had, you know, a large percentage of 14:59 the layout of the page finished without writing a line of CSS. 15:04 Which is crazy to me actually. 15:07 Absolutely mind blowing. 15:10 And both of us kind of sat there after a while and 15:12 we're like, oh shit, this actually works. 15:14 [LAUGH] This is, this is crazy. 15:17 We can, we can do this. 15:20 We can actually make these, these style objects and use them somewhere else. 15:21 It's incredible. It wasn't even a site that we 15:25 were designed for, but we began CBC, we have relatively common branding and, and 15:26 sort of design patterns. 15:30 So we can, we can share these styles across different sites. 15:31 It's crazy. I, that day, I was basically sold. 15:34 That this was sort of the right way to do things. 15:39 This was, this was the way forward for us. 15:40 So just a few examples from our library. 15:43 So we have something called contentlist, 15:46 which is a list of content if that wasn't clear. 15:48 But, marked up as a list, and so we, 15:52 we get rid of the listy things like padding and bullets and stuff. 15:54 More interesting than this though, we have a, 15:58 a derived object called a content list grid. 16:00 So we use this pattern a lot, where you have just a grid of things and 16:02 we weren't using like Flexbox and stuff at the time. 16:07 So there's actually a bunch of things that happened behind here with floats and 16:09 weird margins. 16:12 But anytime a, 16:12 a developer wanted to get this pattern, they'd just apply this class. 16:14 Which is awesome because this was always a huge pain to have 16:16 to write every time you wanted to do it. 16:19 There's something called repel. 16:23 So we have this thing where you want, like, text to fly left and 16:24 text to fly right on the same line. 16:26 The video links. 16:29 So, every time we link to a video, we want, you know, always the same little 16:30 play button and it has this sort of transparent, opaque cover effect thing. 16:33 But instead of having to go find that image et cetera, 16:37 you just apply the right class. 16:39 And then you get this sort of design. 16:40 Which is pretty cool. 16:42 Our markup ended up looking something like this. 16:45 So this is sort of that editors picks module that I showed you earlier. 16:47 And this probably looks a little weird. 16:51 A little different if you aren't used to OOCSS and how it's sort of put together. 16:54 It's a little more verbose, like I said, there are a few more classes here that 17:00 you'll see than you would normally have used. 17:03 You might be able to kinda discern the structure of some of our objects. 17:06 We use hyphens to indicate kind of child properties. 17:11 So we have a module object, it has a module body I think it has a module head. 17:14 And then again the underscore is for variations. 17:19 So this is, this is fine, again, it's a little, 17:23 maybe a little hard getting your head around it at first, little more verbose. 17:26 Good news was this whole project was about implementing a CMS, right? 17:30 And CMSs love standardized code, they don't care verbose it is, 17:34 they don't care how weird it is. 17:37 You tell it, whenever you go put this thing, this is how it looks, right? 17:38 You're gonna tell it again cuz it'll just keep doing that same thing. 17:43 It'll keep providing the same markup every time. 17:46 Which is great. 17:47 We should've figured out that template one time, and then it was done. 17:48 Until that became an incredibly difficult problem for us. 17:53 so, this is probably not a problem for 17:57 any of you, but for us, we have news and we have sports. 18:00 And within the CBC, those are, those are different content areas, and 18:04 different content groups, and they actually have 18:07 kind of different a different sort of theme, I guess, on the website. 18:09 Various the same content, but they have it all look a little bit different. 18:13 So this is what we call a line-up, it's just basically a list of links. 18:16 On the left is news, a gray border, a smaller heading, on the right is sports, 18:20 they have a black border, and they have a bigger heading, a different font. 18:23 And what ends up being, 18:28 kind of ironically, what ends up being the greatest weakness of object-oriented CSS, 18:29 is that your HTML is not tightly coupled to your design. 18:34 Which is weird. 18:38 I mean it, that seems totally counterintuitive since this is all 18:39 supposed to be about abstracting your design and 18:41 turning it into these reusable classes. 18:44 What ends up happening though, if this is your markup, the only way to change how 18:46 something looks is by changing the HTML, by changing what classes you've applied. 18:51 You can't just go in, so in this case, distinct. 18:56 I showed you earlier that distinct means that grey five pixel border at the top. 18:59 But sports didn't have that, they had a black border. 19:04 I can't change the meaning of distinct because that's not what it means. 19:06 But if I want a different color border, I have to choose that class, and 19:09 now I can't. 19:13 Because my CMS is always producing the same code every time for 19:14 this thing regardless of whether it's news content or sports content. 19:17 So yeah, this guy right there. 19:20 That was our problem. 19:22 and, and this isn't necessarily a problem that anyone else would have to face, but, 19:26 but for us in actual fact it was, it was a huge, it was a huge problem. 19:29 And this was, again, this was, this was like, personally upsetting to me, 19:36 cuz I was, I was so pleased, I was so 19:39 happy with the way that things were going and they seemed to be going to so well. 19:41 And then we ended up running into this sort of roadblock. 19:44 So after I finished sort of mourning the idea of the work that we had done, 19:49 took another shot at this. 19:53 And I call this operation widowmaker, 19:55 because I thought it was going to kill me before I figured out how to get it right. 19:56 So we had this question, so 20:00 how do we have reusable objects, fixed HTML, and multiple themes? 20:02 And, as long as you may have already gone to this, 20:06 this conclusion, but the answer for us ended up being sass. 20:09 And so, we just to sort of set the stage back again, 20:11 sort of two years ago, we weren't using Sass. 20:17 We weren't actually really using any like, robust build tools. 20:20 We weren't using pre-processors like this or 20:22 anything, so Sass was actually a big kind of unknown for us. 20:24 We've obviously heard a lot about it, and it had gained a decent amount of 20:29 traction at the time, but we didn't know much about it. 20:32 There were a handful of developers on the team who, who sort of understood it, 20:34 and that's where this idea came from. 20:37 Well, the thing that got us really interested in Sass is 20:38 you may be aware of something called extend. 20:41 So, the way extend works, you can in one selector extend a different selector, and 20:44 that will sort of hoist up that second selector to be part of the first to be 20:48 part, part of the first rule. 20:52 So it gets that first set of rules as well as it can make it's own set of rules. 20:54 And this is great for object-oriented CSS in general but remember, 20:57 the problem we were trying to solve is this, right? 21:01 So, don't throw shoes at me or 21:04 anything, but our mark up ended up going back to this. 21:07 Which is exactly not how your really suppose to do it object-oriented CSS. 21:10 But for us again we have a CMS that's producing the same code every time for 21:15 an element, and the only thing that we can be sure of, is that it's a line approval. 21:19 And so we structured that mark up to say it's a line approval, and 21:23 the line approval has a head and a body, but that's all we know. 21:26 But then what we could do was we created theme style sheets. 21:30 And we said those different themes, they can use the same selectors but 21:34 they can extend different things out of that core library that we've got. 21:37 So in the case of news, they can extend distinct and get that nice gray border. 21:41 And sports can extend distinct, distinct black which is the same thing, but 21:44 it's black different fonts, different heading sizes, and things like that. 21:47 And so what we end up having is sort of a structure like this, 21:51 where we have this core library of all these objects that we already created, so 21:53 we don't have to throw any of that out. 21:56 But then we build in this layer in the middle, 21:58 that's all these Sass files that extend things out of that library and 22:00 we end up with individual style sheets for our different themes. 22:02 Because the markup is the same, 22:05 we can actually just apply them on the fly and say well. 22:07 Now this page looks like news. 22:09 And now it looks like sports. 22:10 Couple drawbacks to this. 22:13 The build process is definitely more complex. 22:15 So like I mentioned, this was all new to us. 22:17 We didn't have, we didn't have pre processes. 22:19 We didn't have build tools and deployment tools, and stuff like that. 22:21 Like, like we would use today, like granting things. 22:25 So for us this, this actually kinda changed our workflow, quite a bit. 22:28 Most people in this room, I suspect this wouldn't be as big a deal, but 22:32 for us this was, this was actually a pretty big challenge. 22:34 The other thing was that when Sass goes and 22:38 does all that cool extend stuff the code that comes out is actually kinda nuts. 22:40 So we ended up with stuff like this. 22:46 Which is well, I'll spoil something that comes later, 22:48 which is you're not supposed to do this. 22:51 [LAUGH] There are better ways of doing this. 22:52 But the, this is the kind of thing that we were seeing. 22:55 And, and obviscating code on the, on the front end. 22:57 And I mean it's all gonna/ identifying stuff anyway, just when we're 23:00 looking through debugger stuff, we would see crazy things like this. 23:03 Which is, you, you can tell clearly that something weird is happening. 23:05 Sort of, sort of unexpected benefits though. 23:09 The code was, what I'm gonna call backward compatible. 23:14 So I showed you this is what the markup looked like. 23:17 For anyone coming into this new, this shouldn't scare anyone. 23:19 Right? Whether or 23:23 not your understand object-oriented CSS. 23:24 Whether or not you know the principles that have gone into this. 23:25 ?The HTML anyway, looks pretty clear. 23:27 Naming conventions have changed, whatever, 23:31 but this is pretty straightforward in terms of being content semantic. 23:32 So what we've done is we've left the HTML more or less alone and said, you know, 23:36 it's really only the CSS that kinda weird stuff happens. 23:40 So it kinda smoothens out that learning curve a little bit. 23:43 We also found that in our style sheets opportunities for 23:46 optimization sort of started jumping out, which is kind of cool. 23:50 So we would have something like this where ideally what we wanted to 23:54 end up with is mostly extends. 23:58 Right? We wanted to 23:59 be pulling from that core library everywhere we can. 24:00 But whenever you have actual rules being defined explicitly, you can start to 24:02 pick out, well, we're doing the same thing in two or three places. 24:07 This [UNKNOWN] probably belongs in the library. 24:10 We need to abstract this, call it something and 24:12 then replace those with extend. 24:14 So like I said, 24:17 I've invested a lot of time and sweat, and tears into this project. 24:20 So I was pretty pleased that we ended up with, 24:25 with a solution with a system that worked for us. 24:27 We call it PODIUM. 24:30 It's reusable, it's scalable, it's flexible, 24:32 it's themeable, it's probably other ables that I didn't list here. 24:34 But I wanted to go back and look. 24:39 So, this is what our website looked before. 24:40 So I wanted to say well, okay, so now we've got podium, right? 24:44 So now we put podium on the page and 24:47 let's see, let's see all this, all this reuse and stuff that's happening. 24:48 So after so not as impressive as I was hoping. 24:53 And so I did this, I ran the numbers, and I was upset. 25:00 But I decided to look into sort of what was going on here. 25:06 And our, our site is again somewhat unique. 25:09 We have a, we have a whole number of third party widgets and things that we include. 25:11 We have some modules that come from other areas in the, 25:15 in the, the company that we don't necessarily maintain directly. 25:17 So we kind of take them wholesale. 25:20 They come with their own style sheets. 25:21 So the reason why we start 11 style sheets on the page has to do with a number of 25:22 those other things. 25:26 There are just a number of things on that particular page that are kind of 25:26 outside of our control. 25:29 So I did want you to when the stats don't bear out like you want, you cheat. 25:31 So I said, well, forget that, let's just look at podium. 25:35 So podium's only one style sheet, not surprisingly. 25:39 But only nine floats. 25:42 Even the 48 font sizes is actually misleading because we define font size 25:44 twice every time. 25:47 We define it in in pixels and then REMs, so that we get back with that [INAUDIBLE]. 25:48 Technically speaking it's actually 24. 25:52 And then only one with 300. 25:54 Only one border top, right? 25:56 Which is exactly what we're expecting. 25:57 If you ever want to have that border, 25:59 there's one class that you apply and we just. 26:01 Everyone learns that, they learn that vocabulary, now that's how you do it. 26:03 So this, this was exactly what we were hoping for, and these, these stats were 26:08 all from when we launched the project which was almost a year ago now. 26:11 I actually gave this talk about a year ago and this was sort of where it ended, 26:15 but I wanted to talk a little bit about what's happened in the last year. 26:19 So this was great. 26:22 We just didn't really know what it was, how it was really gonna work. 26:23 It seemed like it accomplished the goals, but was it gonna actually be better or 26:25 were the developers gonna like it et cetera? 26:28 So we'll go back to the [LAUGH] go back to the present, I guess. 26:30 But so back then podium looked like this. 26:33 So I ran this test again. 26:38 So not bad. 26:40 So obviously, you know, a year, there's been maintenance and 26:41 things, but, but we've managed to stay the course, relatively speaking. 26:43 We haven't, we haven't introduced any new duplication stuff here. 26:47 But I did notice the file size has actually gone up quite a bit, 26:50 which I was kind of surprised about. 26:54 I mean, things have been added to the site, things have been changed, so 26:56 you would expect some of it, this is sort of it's almost. 26:58 Probably not quite double but, bigger than I expected anyway. 27:01 So in, in the last year I actually haven't been working very closely with podium. 27:05 I've been on more the CMS stuff. 27:09 So I asked all the developers, therehave been a number of 27:12 developers now who have become sort of maintainers of podium and, 27:14 and have been the ones who have really been hands on with updating it. 27:16 So I asked them how they felt about it, how it had been going in the last year. 27:20 And one of the things that, that we sort of that we learned that we talked about 27:26 was that, so education is, is essential to this. 27:29 This is a, it's a different process. 27:32 It's not the same as the, the way that you used to develop front end. 27:34 And you have to be, 27:39 you have to have enough, you have to have right resources and 27:40 ways of teaching your developers how to do this properly. 27:43 You just don't sort of fall back into those old habits. 27:45 And there are great tools for 27:49 doing this, especially ones that have come into real favor now. 27:50 Things like living style guides are great ways of communicating what objects are in 27:52 your library. 27:56 That kind of thing? 27:57 But education's super important and with that, the learning curve for 27:58 this stuff was definitely one of the one of the biggest challenges for 28:01 developers getting involved. 28:05 So you want to support them as much as you can. 28:06 That backward compatibility thing is also kind of dangerous. 28:09 Because you can look at the HTML and 28:14 not really realize that like anything different's happening. 28:16 People, I think, sort of mentally can fall back into the trap of like, 28:18 well, the HTML is the same, so why isn't the CSS the same? 28:22 And they'll write CSS like they would have otherwise, and I, 28:24 I found like this example in Podium, which is basically just CSS. 28:27 Which is fine. There wasn't much of this, but I think, 28:34 I think what happens, again, is that if you hit the HTML and all of a sudden 28:36 the HTML is totally different, then you know you're stepping into something that, 28:39 you know, that you may have to treat differently. 28:42 Where as looking at the HTML now, you don't really get that, that impression. 28:44 The other thing is to use Sass properly. 28:48 So I mentioned this before. 28:50 We were totally new into Sass when we started using it, 28:52 which is obviously dangerous for any new tool. 28:55 Sass is really powerful and 28:58 you can do really, really cool things, but you have to be responsible about it. 28:59 And there, there's been a lot written sort of since we've started this about 29:03 mitigating some of the issues that we saw about sort of code bloat and 29:07 how do you use extend. 29:10 And there are things like placeholders in Sass now that are really, 29:11 really useful, but really smart people Chris Coyer and 29:14 Nicole Sullivan have talked and written about this stuff. 29:17 So we've learned a lot about Sass and 29:20 how to use Sass properly in the last year, which has been really, really important. 29:21 But the big takeaway for, from all of this and the, 29:26 the feedback that I got from everyone I talked to, this is the new best practice. 29:28 So, a lot of people don't actually call it object-oriented CSS. 29:34 And, and it's very good. 29:38 Like I said, it's very similar to SMACKS, there's a number of other ideas and, and 29:40 sort of frameworks or sort of philosophies out there that are very compatible, 29:44 but this is where CSS is going. 29:49 And I think it was this year that CSS turned 20, is that right? 29:51 And I, it's interesting to me that I feel like this now, we're coming into 29:55 this era of CSS, that I, I will never go back to writing CSS the old way. 30:00 This is how I write it now. 30:05 And even in some of the talks that I saw this morning, while Object-Oriented CSS 30:07 wasn't mentioned ever a lot of the ideas that people were talking about 30:10 fit exactly in line with the ideas that come out of Object-Oriented CSS. 30:14 So call it whatever you want, 30:19 but these ideas are how CSS is going to be written in the future. 30:20 This is how it's gonna be taught. 30:24 I'm completely sure about it. 30:25 So yeah that's sort of all I have. 30:30 There's some resources here. 30:31 Obviously Nicole Sullivan, Jonathan Snook. 30:32 Hi, Jonathan. 30:34 [LAUGH] I didn't actually think Johnathan was gonna be in the room. 30:36 So this is, that's sort of slightly awkward. 30:39 It's cool but [LAUGH]. 30:41 And again, Harry Roberts and Yandex. 30:44 There's someone, actually at the conference from Yandex. 30:46 I don't know if he's here. 30:47 Anyway, I was talking to him earlier. 30:48 But they have this system called BEM. 30:50 I'm Jamie Strachan, 30:52 I don't actually really belong on this slide, not with these people. 30:53 But I, I gave the talk so I get to put my name on there. 30:55 [LAUGH] Thanks very much, by the way. 30:57 [APPLAUSE] 31:04
You need to sign up for Treehouse in order to download course files.Sign up