Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Clean Out Your Sass Junk-Drawer - Dale Sande49:17 with Dale Sande
CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer in line.
So Sass, Clean out your Junk-Drawer. 0:02 There's actually kind of an interesting story on even why I even 0:07 put this together, is I kind of, I, I've been working with Sass. 0:10 I, I, I started out as a designer. 0:16 I transitioned into being a front-end developer via Sass, really. 0:18 And it's, it was through a series of experiences when working with companies 0:24 that I was pretty much kind of like master of my domain, right? 0:28 I was the one doing everything. 0:32 And, and it wasn't until I started working with a company that was the first time 0:33 ever that I was actually surrounded by other Rails developers. 0:38 Who also, you know, because no, there was nobody really being 0:43 a front-end developer, they also did a lot of front-end development code. 0:47 And they also had a lot of experience with 0:50 Sass, cuz they're all a bunch of Rails developers. 0:52 And so then I started looking at a lot of 0:53 their projects and it was some of the most horrible 0:55 shit I've ever seen in my entire life. And, I'm the new guy, right? 0:57 So I'm not gonna show up, and then be, like, you know, you're doing it wrong. 1:01 You know? Cuz they're, like, you suck. 1:05 Why don't you just leave? So, being from Seattle, the land 1:06 of the most passively aggressive people on the planet, [SOUND] I thought to myself. 1:12 How can I communicate a message telling them that they 1:18 suck, but making me look good at the same time? 1:20 So I made 1:22 this slideshow and I also wrote a blog post about it. 1:22 Which basically illustrates what I'm gonna talk about today, a 1:25 lot of the really bad habits that I see developers do. 1:27 And then, apply the way I think the world should be a better place. 1:31 So brief run through my history. 1:36 Years ago, I used to work for a company called Acumium back in Wisconsin. 1:39 It was .NET. 1:41 This was back in 2006. 1:43 I knew one guy who was a Rails 1:44 developer, he introduced me to this thing called Sass. 1:46 I desperately wanted to use it, but then, I was living 1:48 in an evil world of .NET developers, so they said no. 1:51 So I was leading a secret life, playing with Sass on the side. 1:55 [LAUGH] [COUGH] So then, the next thing I did 1:58 is I went and started work for Getty Images. 2:03 Now, this is the big giant corporate overlord environment. 2:04 But I ended up working with one of the most kick 2:07 ass team of developers I've ever worked with in my entire life. 2:09 And then the first thing they said to me, is, 2:12 like, do you use Sass? 2:13 And I said fuckin' A right, I'm using Sass. 2:15 So I started learning it, and I learned it really good. 2:16 And so then now we're in like 2008. 2:20 This is when Sass 2.0 started coming out. 2:21 All the really cool features started coming out and so 2:24 it was a, an amazingly exciting time to use Sass. 2:26 And I use it on my first project, 2:30 which was it's still out there, it's called photos.com. 2:31 And it is some of the worst Sass that I've written in my entire life. 2:35 But we'll move on from that, cuz you can't actually 2:38 see the Sass, you can only see the really crappy CSS. 2:40 So then I went to Substantial, and then this 2:44 is the company that I was working at where I 2:45 decided to write this whole thing surrounded by a bunch 2:47 of really awesome Rails developers who really sucked at Sass. 2:50 I recently left Substantial, and I'm now an instructor at Code Fellows. 2:54 So this is kinda cool because 3:00 I'm a technology front-end developer and instructor 3:01 at Code Fellows. 3:03 So, I am going to be the secret Sass mole 3:05 telling everybody about Sass through every technology course that I teach. 3:08 I fucking love this. 3:13 Okay, now there's the Sass hole [LAUGH]. I consider myself a SASS-ANGELIST. 3:16 Another interesting story, I was at my apartment 3:24 one day, the doorbell rings, I open the 3:27 door, there's a couple of guys there from 3:28 a certain religious persuasion that I'm not gonna mention. 3:31 But, it was funny to be because they started talking 3:34 to me, and then I immediately stopped listening to them. 3:37 Kay? 3:42 Cuz I wasn't interested, but I was being polite. 3:42 And then all of a sudden, I realized to myself, wow, 3:44 this is what other people feel like when I talk about Sass. 3:48 [LAUGH] And this was an amazing revelation. 3:53 I was like, oh, I get it. 3:55 This is why they let me talk and then 3:58 don't actually do anything I tell them to do. 3:59 [LAUGH] Kay. 4:02 So, I, since then, I've been trying to figure out better 4:04 ways to communicate to people, as a Sass-angelist. 4:07 So now, everybody in this room, whether you're 4:12 a Sass merge or a Sass noob, whatever. 4:15 We've all written really crappy code, and it's not your fault, okay? 4:19 I'm not gonna blame anybody. 4:22 But, you know, for many of us getting started with 4:24 Sass at one time or another, we've created Sass junk-drawer files. 4:26 It just happens, because we get really 4:29 cool powers given to us, but no real structure to do it with, right? 4:32 So, be it a rookie mistake, or you know an issue, you know 4:37 but for others it's just an 4:41 issue with continuing architecture and file management. 4:42 And, you know, even though, like I said, I, I have a background 4:46 in designer, I also have a background of being really fricking anal retentive. 4:49 So it just kind of lended myself to coming 4:54 up with better management strategies. So, Sass doesn't come with any real rules. 4:58 Like I said, developers are pretty much left to their own devices. 5:03 And, this is when they come up 5:07 with really, really insane ways of managing files. 5:08 So I'm gonna take a step back in time a 5:13 little bit and we're gonna go through the history of CSS. 5:14 And remember back in the old CSS 2.0 days? 5:17 We had this awesome power of changing font. 5:20 Whew. 5:22 I, I mean, how many people here were writing CSS like, in the early 2000-ies? 5:23 All your shit was in tables and you had 20 5:31 lines of CSS for some badass font family management, right? 5:33 You're like, you're feeling good. 5:37 That's all we did. 5:39 Because we also had to deal with this 5:40 thing called Internet Explorer 4 and Netscape Communicator. 5:41 And those browsers sucked. And then secretly, 5:44 in the back, there's people that 5:47 are playing with ideas called table-less design. 5:49 So, then we start doing more of that and browsers started coming into play. 5:52 And I remember when Safari came on and it 5:55 got released and it actually supported all these wonderful things. 5:57 I was like, this is sweet. 5:59 But because of that, we started writing a crap ton of CSS. 6:01 So CSS files are becoming bigger, and bigger, and 6:05 bigger, and harder, and harder, and harder to manage, right? 6:07 So we always look for a better way. 6:12 One of the first things that a lot [LAUGH] of people 6:15 looked at was the old CSS @import file and this was horrible. 6:17 [LAUGH] Everybody knew that didn't work, right? 6:20 Everybody, does anybody remember when Adobe bought Macromedia? 6:23 Remember when they used Macromedia's website? 6:30 And then you went to the website and you 6:32 waited eight seconds for the CSS to show up? 6:34 Because they did this, you know, it was really stupid, it was a bad idea. 6:37 So then we, you know, oh, [LAUGH] sad kitties. 6:41 So then we started looking at CSS processors. 6:45 There was Sass, there was Less, there was 6:47 Stylus, you know, but really there's only Sass. 6:49 And, this is, this is, this is really cool new age stuff, 6:54 and that's why we're all here, because we love to play with this. 6:58 Because it finally gives us the power 7:01 to start breaking things down into the 7:03 smallest pieces possible that make them very manageable. 7:05 But now what that left us with is a ton of CSS files 7:07 that are just all over the place and all these different types of concepts. 7:12 Now not only do we have a shit ton of CSS, but we have a shit ton of Sass. 7:14 We have our mix ins, we have our variables, I 7:21 mean, there's just like, there's stuff all over the place. 7:23 I've seen projects that just, it just makes me cry 7:25 in the inside because I see CSS mix in, mix in variables 7:28 CSS mix in, it's just like, it's just ongoing mess of chaos. 7:32 So, old habits, die hard. 7:35 [LAUGH]. 7:37 You know, they just, everybody just carried this stuff over, right? 7:37 So we can make it better. 7:45 And then, what basically happened is we had our early days of 7:46 file management, and we just kind of put together a few simple files. 7:49 You know, we had our 7:53 mixins; we had of variables; we had our forms, typography, style, 7:53 if we were trying to be cool, but this was overly simplified. 7:56 It was too much code in one file you know, based on what modules and layouts all 7:59 in the same file so you end up with like you know, 2, 3,000 lines of code. 8:04 It's just absolutely absurd. 8:09 You know cats, dogs living together, it's mass hysteria. 8:10 It just doesn't work, right? So, close but no cigar. 8:12 [LAUGH] We can do better. 8:16 [LAUGH] 8:17 Being in the Rails community, there is this magical thing called MVCs, right? 8:19 So, a lot of the Rails developers are like, well, if I can use MVC to 8:25 model my application, I should be able to do the same thing to model my Sass, right? 8:29 But it does, it's not a one-to-one correlation, it doesn't necessarily work. 8:35 MVC is awesome. 8:38 Let's use it for, to organize our CSS, and you come up with 8:39 something like this, okay? 8:42 So this is actually, like, maybe a good way of doing this, if you were to do this. 8:45 But, you know, you have attempts to break 8:50 out mix-ins and variables, just kinda put' em in 8:52 these folders, and then you're just kind of shoving 8:55 a bunch of files in this folder at random. 8:56 And hope to God you have a naming convention that makes sense, kay? 8:58 And then UI modules again, just dump all the UI modules into this thing 9:02 called views. 9:07 Because all of your shit goes in views, right, cuz you can see it. 9:09 [LAUGH] 9:11 >> [LAUGH] But then, as you start to write a lot of this stuff, then all of 9:12 the sudden you start seeing duplications so then 9:17 we need to create our first junk-drawer called partials. 9:19 Fuck. >> [LAUGH] 9:24 >> I've seen folders that have like, 300 files of them, 9:26 of partials with a naming convention that nobody understands what the hell 9:29 is going on. 9:32 And then there's one giant @import file that you can't make heads or tails about. 9:33 So what does anybody do when they're adding new code to the project? 9:36 Make a new fucking partial. [LAUGH] You know? 9:41 Like, [LAUGH], I'm just gonna go home. You know, like. 9:45 >> Job security. 9:50 >> Yeah, job security my ass. 9:51 [CROSSTALK] This slide is slightly out of context, but I can't bring myself 9:54 to take it out because I fucking hate it when I see this. 9:57 This is, just don't ever do this! 10:00 Okay? 10:03 There was a, a post put out from a guy from 37signals who spent a lot of 10:05 time writing a post about why you should do this and this is the best thing ever. 10:11 And this is the worst thing you could possibly do. 10:15 Just don't ever do it, okay? 10:17 And, It's one of the, it's one of the by-products that actually 10:19 kind of came out from trying to follow the MVC pattern and 10:23 you know, write all your CSS to be exactly like the view. 10:26 And if you match the CSS, you're Sass, which exactly looks like your HTML. 10:29 You're fucking a, you're winning. 10:32 I'm sorry, I swear a lot, but, fuck. >> [LAUGH]. 10:35 >> So yeah, I love this. 10:38 Just, just, [LAUGH], his eyes. Can you see that? 10:39 Just don't do that. 10:42 [LAUGH] Don't do that. Okay, life is a journey. 10:43 I did not get up on this stage. 10:49 I did not start doing things because I knew how to do things right away. 10:50 I spent a lot of time doing shit really wrong. 10:53 But what I did is that I realized I was doing it wrong. 10:56 And I took pro-active things to change my path. 10:59 So I stopped doing things wrong, so somebody wasn't up here talking about me. 11:03 So, one of the things that's also 11:08 very interesting about doing UI development [SOUND] 11:10 is you know, the, the antithesis of what Burman was talking about. 11:15 And I know a lot of people in this room 11:19 still deal with designers that make things like this, okay. 11:21 This is the comp. 11:24 The comp and they, and then, and when they try tell you what the 11:26 comp looks like, they put all these 11:29 horrible red lines things all over the place. 11:30 You know, and they think they're communicating. 11:31 They feel good about themselves. 11:34 Well this is a horrible disaster. 11:35 Because one of the things that this totally does 11:36 that screws all us up as front end developers, 11:38 is that you do what's called an outside in approach. 11:41 Kay? 11:44 You look at this, and you're like, all right. 11:45 I'm gonna start from the top left. 11:46 I'm gonna make a header. And then I'm gonna build that. 11:47 I'm gonna put stuff inside of it. I'm gonna define font families. 11:48 I'm gonna define colors. I'm gonna go to the next thing. 11:51 I'm gonna make a box, I'm gonna put something inside of that. 11:53 I'm gonna keep going, I'm gonna keep going. 11:55 And then every time you keep going in a box, a lot of 11:56 the times, you just feel natural to keep nesting your CSS Don't do that. 11:58 Okay? 12:03 This basically starts creating 12:04 front-end code that's extremely fragile. 12:06 And it's totally overly specific to its context. 12:09 And you can never reuse it again because now you have 12:12 this first comp, and then the designer comes with another comp. 12:14 And you're like, hey, that's that same module shit. 12:17 Okay, I'm gonna do something really dirty. 12:20 Like the class names that I use in there, I'm 12:22 just gonna make them kinda fit into this view over here. 12:23 And I'm gonna try to perpetuate that thing forward, and it doesn't work. 12:25 You know, and then one of the things that is beautiful 12:29 about Sass is that we don't have to live with 12:31 archaic, crazy, bullshit scenarios like 12:33 overly specific presentational object oriented CSS. 12:38 And make a button that says, button, button, red, 12:41 button, highlight with twitter, icon, button, press, fuck it, okay? 12:44 So, this I don't want, right? 12:50 I don't want this. This is, these are all the bad things 12:52 that comes with that you know, copy, paste divide us. 12:56 Using IDs all over the place, right? 13:00 It's just nuts. So decompose the UI, right? 13:02 So if you look at this from a difference 13:06 perspective and you decompose the UI, crap, I went, no. 13:07 Go back. 13:10 You decompose the UI then you know, you 13:12 start doing these things that we're all talking about, 13:14 you know, like the smack system and, looking at 13:16 things like you know, I want my base styles, 13:19 right? 13:21 And then you, you pull the things out like the typography, the buttons, 13:21 the line borders, the icons, color palates, these are all great things right? 13:24 And then you start build up, you know you 13:29 have your foundation, Header module, Nav modules, Hero copy. 13:31 I mean, we are all pretty familiar with these types of concepts, right? 13:35 Right? Okay. 13:40 You are there, and I'm not high, I could be high. 13:44 okay. So Elements, Modules, & Layout. 13:48 'Kay, this is, nature's taught these things. 13:53 You start small and you make big. 13:56 All of you are big people made of little things. 13:57 Okay? 14:00 Follow the pattern of nature and you will be successful, I guarantee it. 14:01 So, let's get back to what I'm even talking about here. 14:05 Crazy tangent. 14:07 There is a file structure. Okay? 14:08 So, now, what I've been talking about is really 14:11 good development concepts, how you break things down into smaller pieces. 14:13 But then I also talked about Sass. 14:16 Being this giant bucket of crap with a really bad naming convention. 14:18 So then what's my answer to make it better? 14:22 This is where I start. 14:24 Every project I ever worked on, I start here. 14:26 I make this structure, okay? I look at it from a perspective, is that 14:28 my styles that are gonna produce CSS for that particular project 14:32 kinda set up on this first level. 14:38 You know, I got base stuff, like forms, reset, typography, buttons. 14:41 And I have an overarching global config file, 14:45 which basically helps me manage all of my crap. 14:48 And then I have this one file here, 14:52 styles, this is the, this is the magic file. 14:53 This is the only thing that ever actually outputs CSS. 14:57 And everything else gets put into these nice and tidy folders, right? 15:00 So I have a typography button which is 15:05 gonna refer to a lot of stuff in typography. 15:06 A lot of stuff is gonna be inside of forms. 15:08 You know, there's, what's gonna be built in here is 15:11 a nice tidy way of organizing all of your logical code. 15:13 Your mixins, your variables, your pre, 15:17 your, silent placeholder classes, you know? 15:20 Like, all this stuff, that, typically, as we're going through a project. 15:23 We're, like, where do I put it? 15:26 Put it in a partial, [LAUGH], right? Put it in here. 15:30 So then, when you get to the manifest part of this whole thing, 15:32 this would be the, The style Sass fold, file that I showed before. 15:34 You know, you wanna call in your libraries, you know, and the 15:40 compass, stype bring in some vendor stuff, then you come down in here. 15:42 And then you bring in the, the, the, those topmost 15:47 files that are local to the project that you're building. 15:50 And so then you keep kinda going through the succession of pulling 15:53 in all of your library code, and then you 15:56 start assembling your visual code, and then it outputs CSS. 15:59 And then, oh my God, you can actually like find shit, okay? 16:04 It's crazy. 16:09 So, keep directories nice and tidy and organized. 16:11 That's kind of a key thing. 16:13 I make a lot of use of manifests. I'm a little anal with that thing. 16:15 I make a primary manifest. Each folder has another 16:19 manifest of files inside of it and such and so forth. 16:21 I try not to go any crazier than like two or three levels deep cuz that's stupid. 16:25 But I like to keep the things very organized from that perspective. 16:29 There is, so I, I like files that look like this. 16:33 You know? 16:37 This is basically the one thing that gets imported into a primary manifest. 16:37 And it's calling out all the individual parcels that are inside of it. 16:42 There is an actual 16:46 thing you can do that's called globbing. 16:47 Globbing is pretty cool If you're a Rails developer, there's the Sass 16:49 Rails gem, and the Sass Rails gem basically includes globbing as a feature. 16:53 And basically what that is, you can just kind of point Sass to a folder, put a 16:57 star at the end of it or a wack star, star, wack star, wack star star wack star. 17:01 And what's it Sass will do is it will go find 17:08 all those files. 17:12 The only bad part about it is that it'll bring them in in alphabetical order. 17:13 So if you have styles that are dependent on previous styles in the cascade. 17:17 And your naming convention is basically like, the style that you 17:24 need is, starts with the letter Z for whatever module you created. 17:28 And then you know, you know what I'm getting at 17:32 you know it's just like, it just needs, it's gonna pull 17:34 it in in alphabetical order if you're globing. 17:37 And if your styles do not, styles names do not support 17:39 that you can end up in a little bit of trouble. 17:41 So either way it's a great solution. 17:43 Oh, the last thing I was gonna say about that too, sorry. 17:47 So Rails has globbing built into it, it has Rails. 17:50 Chris Eppstein actually released a separate gem that you could 17:54 also use if you're not using Rails as a development environment. 17:58 You could use the globbing there as well in any environment. 18:02 You just have to list that as another dependency in your config-RB file. 18:05 So configuration options. 18:10 This is where the rubber really meets the road, right? 18:12 Because you're building a lot of things you know, turtles all the way down. 18:16 A lot of, a lot of mixins, a lot 18:19 of modules, everything kind of needs configuration at certain points. 18:21 So you've got to start thinking 18:25 smarter about how you're using variables and how all those 18:27 variables cascade through all the things that are in your application. 18:31 So, one of the things that I definitely have at the global 18:35 level, like I showed in the fire structure, is a config.scss file. 18:38 And the config.scss file will basically have all of those 18:41 configuration variables that are really 18:45 pretty broad scope throughout the application. 18:49 But that 18:52 being said, also when I started doing this and working on some bigger and 18:52 bigger projects, all of a sudden I 18:55 just started having completely unreadable files of variables. 18:56 So I started coming up with some better strategies of including 19:00 variables closer to the meddle of the modules that I'm building. 19:03 So I'll kinda talk about that a little bit more. 19:07 But a key thing to keep about, know about this is that when you 19:11 start making like these config files or these logical files, there is no CSS 19:14 in them whatsoever. 19:18 And that's very important, cuz I see a lot of examples 19:19 like I said before, people, CSS mixin, CSS mixin, you know, variables. 19:22 Depending on how you're assembling your files in your development environment. 19:28 If for some reason you come up with another file that you wanna use 19:31 that mixin from the previous file and then you import that file into said file. 19:35 It brings all the CSS with it and it'll duplicate it and 19:40 that's bad. I know that because I did it a lot. 19:43 Okay? 19:47 I was like, why is that selector in my CSS, 13 times? 19:48 Oh shit. 19:51 Okay. So element partials. 19:52 [COUGH] 19:56 So, you know, like I've been kinda saying 19:59 is that you're, you're going through a process 20:02 of basically building up a framework from which 20:03 you're going to build a website on top of. 20:06 You're building a lot of logical 20:07 pieces and putting them in these nice cleaned up directories. 20:08 And so then when you get up to the next level, where you 20:12 are actually creating the CSS, that's going to be used for the application. 20:14 Again, just emphasizing a point, no logic goes 20:17 into this, it's all execution of your logical files. 20:22 Total separation of concerns, right? 20:25 Need to get much cleaner output in that scenario. 20:29 So as you're building custom code, 20:32 here's basically the anatomy of one of these folders going inside of it. 20:33 So on the top level, I have buttons. 20:37 And buttons is when I'm writing CSS that makes buttons, crazy, right? 20:40 Inside of buttons, there's mixins; there's extends and what's in there is 20:45 all the logic that I'm going to reuse as I'm making buttons. 20:50 So when you actually start looking at a button 20:53 file, you get something really sweet that looks like this. 20:55 Simple, 20:58 right? This is all we, what we want. 20:59 I want to see the libraries that I'm pulling in. 21:00 Be it either my own or from somebody else's library. 21:03 And then I just wanna execute the CSS that makes the visual output. 21:06 That's all that's in that file. 21:11 [COUGH] The modules and UI patterns, this is actually kind, slightly of a grey area. 21:14 More so than most. 21:22 I don't know. 21:23 So, a lotta, a lotta ways I will, I will basically say like, a module, is something 21:24 that is a functional piece of code that's actually going to exist in the website. 21:32 Okay? 21:37 A UI pattern is 21:38 something that, say, a module will take advantage of. 21:40 So like the closest example I can give, is to say like, 21:42 we're you know, in the UI you need a tab bar, okay? 21:46 So that tab bar basically has a UI pattern associated to what do the tabs look like? 21:50 Do they have different states? 21:55 You know, borders, background colors, you know, all that kinda stuff. 21:56 But that in itself is not a module. 22:00 You're never gonna use that tab bar over 22:02 [INAUDIBLE] in the application. 22:05 What you're gonna do is you're gonna take that tab 22:06 bar aesthetic, and you're gonna apply it to an actual module. 22:08 Of which is then gonna have functionality associated to 22:13 it, and that's what's actually gonna put into the application. 22:16 So there's kinda different layers there. 22:19 Like another example is like like what Behrman 22:20 showed before with like the little content bubbles, right? 22:23 So that bubble itself is 22:28 a UI pattern. 22:30 That's gonna get reused again, and again, and again. 22:31 But there's gonna be individual executions of 22:33 that bubble in different states throughout the application. 22:35 So that's a UI pattern being applied to a bubble. 22:38 So now, when you have those things separated like that, if 22:41 the designer comes back and says, yeah, all of our bubbles. 22:43 You know, the background is red, I need it to be green, right? 22:47 Via all this magical stuff in Sass, either 22:50 variables or mixins or place holders, you know? 22:52 And then you can get into, like, this module UI pattern thing. 22:55 You have a very laser focus way of getting in there, making a 22:58 simple change, reproce, reprocessing your Sass, 23:01 pushing it out to production, being done. 23:04 And then you can get back to Twitter. 23:05 That's what I do. I need more time for Twitter. 23:09 [COUGH] 23:12 So, UI patterns, I totally agree that's a gray space, right? 23:14 That's gonna be up to your own interpretation. 23:19 Take this information what you will. 23:21 I don't lose sleep over it. 23:23 I don't sit there and be, like oh my God, that's UI pattern! 23:24 No, that's a module! 23:27 No, I just like over time, I, I definitely live off of refactoring, right? 23:28 I will look 23:34 at you know, I will execute something, then I'll look 23:35 at it later and be like I can make it better. 23:38 If I come across something that you know, I didn't know instinctively that 23:40 a designer was gonna use it more than once, I would execute it single. 23:44 Then he comes back and he does it, uses it again, so now I'll go to abstract 23:47 that out, and then start using some of 23:51 these techniques to make it reusable without duplicating code. 23:52 All right, so getting into 23:55 the folders structure of modules and UI patterns. 24:00 You know, I'm gonna go down into modules 24:03 and inside of regis, inside of modules is registration. 24:05 And then inside of that folder is extends, functions, mixins, 24:08 and then the modules that are part of the registration family. 24:12 Right? 24:15 Same thing, like here's an example from something called purchase. 24:17 Again inside of purchase, I'll have extends, 24:20 functions, and mixins, code that I can 24:22 abstract, so that I can basically apply these UIs again. 24:25 And, you know, the various modules that fall under the purchase family, right? 24:28 So, directory name, primary module, try to keep like 24:35 some type of naming convention in there so at least 24:38 when other people are looking at the code, they can 24:40 understand what the hell is going on in my head. 24:42 So then, now here's actually kind of an interesting 24:47 thing though too, is that you know, a lot 24:50 of times, I will definitely execute the entire scope 24:53 of the module under the name space of said module. 24:56 And a lot of times too, I will also do that as a place holder selector. 24:59 So that even gives me more opportunity to reuse this, right? 25:05 And, 25:11 how we can do that is when we get to assembling the layout. 25:12 Right? 25:15 So now we've kind of gone through a pretty 25:16 cool process here, we've identified what some base styles are. 25:19 You know we have our initial typography, we have our 25:23 form stuff, we know what our buttons look like, right? 25:25 Then we went into the process of creating modules, we wrote good modules, 25:28 we extrapolated all the code that we needed to in a modular fashion. 25:32 Module, how many 25:37 times can I say that? 25:37 And now the next thing you need to do as you created all these modules too, you 25:40 never create them to fit exactly in the 25:43 space that somebody with a comp showed you right? 25:46 You always want to build them to take up 100% of the space 25:49 with, you know, whatever height is needed 25:52 for that particular chunk of content, right? 25:55 So when you get to the layout, you know, 25:58 you wanna think of things very black and white. 26:00 You wanna think of the layout as holes to shove things into. 26:03 Cuz at any point, the layout is still the layout. 26:07 And the layout is gonna be more 26:10 or less dictated by an informational architecture., 26:11 What needs to go to each slot in order to you know, 26:13 get the most impact of your message to that particular user, right? 26:16 So, at any point, depending on the size of the 26:20 organization that you're in, the business or product owner, whoever. 26:23 Could come in there and say, he's like, Al, in this slot up 26:26 here I actually need to be able to put something else in there. 26:28 You need to be able to quickly [SOUND] grab another module and shove it in there. 26:30 So, from the layout perspective you really just want to focus on, what is that grid? 26:34 What is that box of holes that goes in there, right? 26:40 But then when we get in there, you can do something like this. 26:45 You know, I have, I have the check out experience. 26:49 I kind of wrap it in a div, cuz I wanted to. 26:51 Then, I have in there customer checkout, but what I'm 26:54 extending to customer checkout is, I'm extending the, the checkout module. 26:58 And then I'm also extending you know, grid seven, for the grid system that I have. 27:03 And then what's cool at this level too, is that this 27:08 is probably the best place you wanna start writing responsive code, right? 27:11 Because whenever you're being responsive with stuff, the 99% of the thing 27:16 that changes is your layout, you're moving things around, right? 27:19 So if you can do the majority of your layout work from 27:23 this level, then all of a sudden your life becomes much, much simpler. 27:26 I'm not saying that you can do all of it. 27:29 Modules, themselves will have you know, 27:31 principles for responsive web design in there. 27:36 But if you can bubble most of that up to this 27:38 level then doing your responsive layout work gets much, much easier, okay? 27:40 And it goes on. 27:45 You know, go onto the next thing, order summery. 27:48 It's extending order summery module, it's using, you know, a grid of five 27:49 and then tablet, I want it to use a context of ten and ten. 27:53 Cuz I go to a ten column within for tablets, portrait. 27:56 So, this just makes my life easier, 28:02 okay? 28:07 So namespace selectors, placements of elements, everything's 28:07 really easy to read here too, right? 28:10 It's very clear what's happening. 28:12 So, in summary. What have we learned? 28:15 So CSS management, by itself, has come a long way with power tools like Sass. 28:19 Vanilla CSS has no tools for management. 28:27 If you're using Vanilla CSS, you're just plain 28:29 screwed, but that's why we're at Sass Con, okay? 28:31 How many people in here write in Vanilla CSS? 28:35 I should see nobody. 28:36 Kay, outside-in is bad. Inside-out is better. 28:37 It's harder, but you feel better. 28:45 And the great thing about that process too, 28:47 is that every word situation where I put 28:50 this process into play, it doesn't force anybody to do the right thing. 28:52 But you know when you're doing the wrong thing. 29:00 And then, and you kinda feel bad. 29:03 Cuz you know that when you're like aw, I'm just cramming a 29:06 bunch of code in this thing, everybody knows it, and they hide. 29:08 And then they do their git commit, and then 29:10 I see it in the repo, I'm like ha, ha. 29:11 [LAUGH] You know what you did there. 29:13 So modular files with a good import system equals winning. 29:17 It's a great way to manage your stuff, we all know that. 29:22 Elements, modules, view, work your way up, it's going to be totally awesome. 29:25 Take everything you knew before and just set it on fire. 29:32 Just forget it. 29:35 And organize your Sass. Your life will hurt less. 29:38 Yeah, oh, yeah, book pimp. Kianosh is in here. 29:43 Kianosh is right here. 29:50 Him and I are the ones co-authoring the, the 29:51 latest Sass in Action MEAP that's out right now. 29:53 There's a, yeah, you can go to that website and use that promo code and 29:58 get what, 50% off? 30:03 So, you can just buy the book now, and then 30:05 use the 50% off coupon and ensure that I make nothing. 30:08 Cuz, that's pretty much [LAUGH] what happens there. 30:12 It's like it all gets blown away, but I would love for you to have the book. 30:14 Now as a special treat, I have one more thing to put out there. 30:17 A colleague and I, 30:22 we're the ones behind SassMeister. How many people in this room know what 30:25 SassMeister is? [NOISE] 30:29 There we go. [NOISE]. 30:35 Jed, is this thing on? Oh, you have that one. 30:37 Jed, is gonna talk to you about the latest release of SassMeister 2.0. 30:42 >> Yeah, so for those of you that don't know 30:48 what SassMeister is, it's a, it's a web app that lets you play 30:50 with Sass, Compass, and over two dozen 30:54 different compass extensions, all in the browser. 30:57 Dale and I built it for our meta presentations so that we could write Sass 31:02 on one side and see the compiled CSS on the other it debuted a year ago. 31:07 And since then, we've added various features, like compass extensions. 31:14 So, it's a whole list of really cool things in here that people have written. 31:20 We're, we put it here, so that you can play with 31:25 it in one place, without having to install it yourself. 31:28 We added, jist saving. 31:32 So you can save what you've written as a jist and then share it with other people. 31:34 And we added a, a really cool thing I, I like. 31:39 On-the-fly syntax conversion, so you can go from SASS to SCSS, right there. 31:42 Easy as that. And today we're 31:49 talking about the next major feature, which we're calling SassMeister 2.0. 31:53 The number one feature request has been HTML. 31:58 Turns out that people like to see what their code actually looks like 32:04 in the browser, not just the CSS, but what it actually looks like. 32:08 and, so that's what we'e done. 32:13 [LAUGH] [SOUND]. 32:18 We, we think this is a cool feature and we hope that 32:27 helps Sass noobs and pros, all become, sassmeisters. 32:31 It's live now, please go check it out. 32:36 And I have SassMeister stickers, come find me. 32:39 >> We have stickers. 32:42 >> Lots of stickers. 32:44 I would really like to not go home with any. 32:45 I've got a lot. So. 32:48 Thank you. [SOUND]. 32:49 >> So for those of you who haven't really used SassMeister, or 32:54 those of you just kind of played with SassMeister a little bit. 33:01 Like Jed said, one of the, one of 33:04 the driving things behind building SassMeister was when 33:05 I was having one of our Sass meetups in Seattle. 33:09 And, you know, I'm up there, I'm like, okay, here's some SASS, and I hit 33:14 save in a process and here's some CSS, and then see what it looks like? 33:17 And everybody's like, no I don't get it. 33:20 So then I keep going back and forth and I try doing split screen. 33:22 It was a total disaster. So that was the birth behind this. 33:24 So you see a lot of people really being 33:27 excited about using SassMeister, is in that very educational sense. 33:29 You know you're trying to bring on somebody new. 33:32 You show Sass on the left, you show CSS on the right. 33:34 People make that one to one connection and it's pretty awesome. 33:37 And like Jed said, one of the other cool things that you can 33:39 do, and which I make ridiculously heavy use of, is putting out gists. 33:42 So, how many people here have a GitHub account, right? 33:48 [NOISE] Yeah. Okay. 33:51 So you all have power of gists. 33:53 So there is another little magical thing that Jed made, which is pretty 33:56 awesome, called roughdraft.io. Now what roughdraft.io is, is basically a 33:59 kind of little shell application that you put your GitHub user name in front of it. 34:08 It goes digging in your gist and anything that you have that 34:12 has a markdown document, or what else is in there, there's Markdown. 34:14 >> Markdown, Textile, Haml. 34:18 >> Markdown, Textile, Haml, anything that SassMeister can produce 34:20 in HTML it'll basically put into this list with the date you publish the list 34:25 and so then basically you have a kinda of audial little mini blog, right? 34:29 So, what's kind of cool about this too, is that, so 34:34 for Sass training purposes, I created another alter 34:39 ego on GitHub called CodeRecipez. And then in this 34:45 list right here is a bunch of gists that I wrote with Mark Down, and so 34:50 then you come here and then you see here. And here's this wonderful answer. 34:58 And then there's some code information in there and how this whole thing works. 35:02 And then you come down here and then 35:05 you click SassMeister Gist and then there's your answer. 35:07 So it's a complete full circle education solution. 35:09 It's awesome, there you go. [SOUND]. 35:15 And apparently I talk really fast, cuz I am done and I have a lot of time left. 35:21 [LAUGH] Anybody want to come up here and dance? 35:25 >> With you? 35:27 Yes. 35:27 Come on Ian. [LAUGH] Does anybody have any questions? 35:28 What's the promo code from the book? 35:35 >> The promo code from the book? Yes, you need that. 35:38 >> It's 35:40 in your tote bag. 35:40 >> It's in, oh, but I'll put it up on the screen. 35:42 Promo code for book. Book Pimp. 35:46 Yes. Boom. 35:51 I have no idea what that means, mldsandeau. 35:53 I'm not European so that's weird. okay. 35:57 Any other questions, comments, concerns? 36:00 [BLANK_AUDIO] 36:04 >> Run Forrest, run! >> [LAUGH] So in your, like when you're 36:07 saving your modules do you have like you would have like, can you hear me? 36:11 I can hear you. 36:18 >> Oh, you had like a looking thing. >> I was looking for you. 36:20 >> Oh, okay, I'm here. 36:22 >> Yeah. [LAUGH] 36:24 >> Hi, I'm Pam. 36:25 >> Hi Pam. 36:27 >> So I, in your models you had like like 36:28 you had lot of things like named the same things. 36:32 You had like your extends and your function things. 36:34 >> Yes. 36:36 >> And like I assume that you, those are obviously 36:37 like, individual, special snowflake things that only apply to that module? 36:39 >> Mm-hm. 36:43 Oh yeah. 36:44 >> Okay, I was just kind of curious because like 36:44 I was thinking that that could get confusing for people. 36:46 >> If it's confusing for you then change the names. 36:50 I mean it's this, there's nothing dogmatic about 36:53 this I mean all I'm really doing here is. 36:56 Like 36:58 I said in the beginning, I was in a situation where it was really 36:58 bad practice, and this was the best way for me to communicate the good practice. 37:01 So, yes, I mean to some it could 37:06 be confusing to have like the same name repeated. 37:08 But I also found it really annoying when I was looking at my 37:11 import files that I said, you know, I had like module name/module name extends. 37:13 Mm-hm. >> Cuz that was redundant. 37:18 What I was able to actually very clearly see is what that module is associated 37:20 to via the folder structure. 37:23 I put more emphasis on the folder structure than the 37:25 naming convention because folder structures are easy to adhere to. 37:27 People always fuck up naming conventions, okay? 37:31 And another thing that just kind of played in 37:34 too is like the ongoing topic of style guides. 37:36 As I have another project out there that's in various 37:40 states of awesome and un-awesome, depending on who you are. 37:43 That it's basically 37:46 like a Rails implementation of an automated style guide. 37:48 And the way that entire thing works, is based off of a folder convention. 37:53 So I put, I create another Rails partial and then I create a Sass partial. 37:58 You know for my, for my module and then 38:05 via that naming convention I can actually get those two 38:07 things to show up in a view without me 38:09 having to code anything else [SOUND] it just shows up. 38:11 So, I mean, you can do a lot of really 38:13 powerful stuff on just, you know, a good folder structure. 38:14 That helps you solve a lot of these problems. 38:17 Are we done here? >> [SOUND]. 38:22 >> I gotta go. 38:26 Thanks. [LAUGH]. 38:30 >> Hey Dale, I've a question. 38:31 >> Yes? >> Regarding media queries. 38:33 I'm sorry if you already covered it cause you were going really really fast. 38:34 So media queries for, to change for layouts that's what you covered. 38:39 But I also, I often run into the issue that the 38:44 content of a module or the way a module 38:49 looks also needs to change depending on screen size. 38:52 >> Yes. 38:57 >> And now media queries only work on document size and not 38:57 >> No, no, no yes, I agree. I talk really fast. 39:01 I'm originally from the Midwest, very close to Chicago. 39:06 It's cold. 39:08 You talk fast to stay warm. 39:08 >> I'm sorry, I'm not following. >> [LAUGH]. 39:09 >> So, the answer to that question was, I do a lot of the responsive 39:16 work from the layout level, cuz that's the biggest thing that usually changes. 39:24 Also embedded in the modules themselves will be the code for the 39:28 responsiveness if the module needs to be adjusted per a different state. 39:34 >> Okay, but then when you reuse a module in a different context a 39:38 wider column or a more narrow column. 39:43 You may need your module to behave differently. 39:48 >> Sure. 39:51 >> Same screen size, but in a different part 39:51 of your layouts, if you get what I mean. 39:55 >> Sure. 39:58 I mean that all really kind of comes down to 39:58 how you want to apply the modules to the individual layout. 40:00 It comes down to, like, you know the, the layout is gonna have 40:02 a parent class which is then gonna have the module nested inside of it. 40:05 I mean, you may have to, you, you know, you may have 40:09 to put in a different type of state class on that particular module. 40:11 I mean, no process is gonna be a silver bullet that fixes that entire thing. 40:14 But, the more you can figure out how to reuse 40:18 something in different contexts, its always gonna save your butt. 40:21 So that when you are just using that one module in an alternate 40:24 context that is slightly different; that's the 40:27 only problem you're trying to solve, right? 40:29 So yeah, I mean, via different 40:31 classing convention or different state conventions or whatever is you 40:34 know, how I typically end up solving that problem, so. 40:38 >> Okay, cool, thanks. 40:41 >> I just think you're 40:43 okay, you're first? Or should I? 40:47 Okay. 40:48 >> Whoever's talking, go. Go! 40:49 >> [LAUGH] 40:51 >> yeah. 40:53 Sorry I think the speed of your talk is perfectly fine. 40:54 It keeps me from falling asleep [LAUGH] so 40:56 thanks for that it was very nice to listen. 40:59 I was just wondering about the structure for me it looks very complex. 41:01 How long it takes you, if you have a new 41:06 developer until he really works with the structure without making mistakes. 41:08 And if it's always clear what to do and what, and when to use the trial. 41:12 >> there's, there's always there's always gonna be a, a question. 41:17 I mean there's, no matter how good of a system is, 41:24 there is always going to be a question how to do something. 41:27 I would definately say that any developer that I paired 41:30 with while I was trying to teach them this process. 41:33 I would say by the third or 41:35 fourth module they figured it out. 41:37 You know, and it's just, it's just kind of one 41:41 of those things it's like, you know it's, it's okay to 41:43 have I mean, it's okay to have like somebody on a 41:47 team that like knows the answer better than somebody else, right? 41:49 And so then as long as the team knows that they can go to somebody like me and 41:53 say, what do you think is the best answer, 41:57 that's where you have some type of code review. 41:58 And then it's through that continue process 42:00 of you know, iterating you know, the, the rules on how things should be done. 42:03 It's how the rest of the team gets brought 42:07 up, but I've never had it, I've never really 42:08 had it last longer than maybe a handful of 42:10 commits to a project or a few weeks at most. 42:13 >> Cool. 42:17 >> Yeah. 42:18 >> For the typography or some folders like that do 42:19 you think a lot of files could be in there. 42:22 Or, if I see a lot of files and such stuff, 42:25 maybe you should think about the design. 42:28 If it's got too complex, and you maybe need to refactor it and. 42:30 >> No, I mean, there's I, I, I keep typography separate for the 42:34 reason, so that when you, there's code in there that totally focuses on typography. 42:37 But I would agree that there's not gonna be a whole lot of stuff in there. 42:41 I guess what really kind of comes down to, is like, you're gonna write, you know. 42:46 As you start getting into more advanced concepts with Sass. 42:49 I mean, you could start writing 42:52 a lot of, like, very typographical, specific type code. 42:54 So, it's like, you probably would have just that one typography 42:58 file, you know, sitting at the root level, like I showed. 43:01 But inside the folder would be like typography specific functions. 43:04 Like, you know, say you didn't want to use and, okay, say you're in an 43:08 environment very similar to the one I was just previously in, where projects 43:13 you, it's more dangerous to attach them to libraries. 43:19 So like, you know, like the previous job 43:26 that I was in, is like, actually using Compass 43:28 was actually kind of a problem because of 43:31 the way the application was gonna continue moving forward. 43:33 So I was gonna have to write a lot of the library code myself. 43:36 So you know, like if I had a, a typography function for converting pixels to ems. 43:39 Or I had a mixin that was gonna help me basically do 43:45 my, you know, my line heights, at a, automated basis, stuff like that. 43:48 So that's the kinda stuff that would still end up in a typography file. 43:53 >> Okay, thanks. 43:56 >> All right, yeah. 44:00 I just wanted to, I'm giving a session tomorrow. 44:01 and, I wanted to thank you for making a lot of my slides completely redundant now. 44:06 [LAUGH] 44:11 But the good news is, is that I'm basically, going to be 44:13 covering the same topic at, 12:20 44:16 tomorrow, managing complex projects with design components. 44:19 And it's a, a more basic approach 44:22 to this, this same idea. 44:25 I mean, we'll go more in depth and it, it'll 44:27 be, you know, collaborative with every, everybody who shows up. 44:28 So if you want to. 44:32 >> I promise I won't show up at yours and talk. 44:33 Was that? 44:34 >> I promise I won't show up to yours and then start talking. 44:35 [LAUGH] 44:38 >> So if you want to talk more about this you can come see my session. 44:40 I'm gonna feel slightly bad about pimping it during the middle of [LAUGH] 44:44 >> This guy did a really good job, but tomorrow. 44:49 [LAUGH] Woo. [CROSSTALK] 44:51 >> Gonna be on fire. 44:55 >> [CROSSTALK] opposite mind is, is by 44:56 Mason who's sitting right next to me [LAUGH]. 44:58 >> [INAUDIBLE] talking about similar things. 45:02 >> Talking about similar things. 45:05 >> [CROSSTALK] 45:06 >> I wish that I wasn't speaking then because I would go see his session. 45:07 But, anyway. 45:10 [LAUGH] >> Thanks. 45:11 >> Those guys tomorrow are gonna fucking rocket. 45:13 [LAUGH] 45:14 >> But you've got a podcast. 45:15 >> Good plug, John. Good plug. 45:18 >> [CROSSTALK] would start doing some fricking podcasting. 45:19 I do have t-shirts. >> Stickers. 45:21 >> And stickers. >> And stickers. 45:24 Sorry, John. 45:25 [LAUGH] >> John has a jacket. 45:26 [LAUGH] >> Yes. 45:28 A guy from Seattle. 45:31 >> And my name is Dale as well. >> Nice. 45:33 >> Yeah. 45:35 You're the second Dale I've met in two days. 45:35 >> You're the second Dale I've met in my entire life. 45:37 >> Sweet. [LAUGH] so, in in your your different 45:39 modules folders, do you ever include like global 45:43 variables and stuff like that, within, as you 45:46 go down to the different, so you could 45:47 have your global styles go into your different modules? 45:49 >> The global variables at that top 45:53 config file will blanket through the entire set. 45:54 The only variables that would be in there is the ones 45:57 that I would want to isolate specifically to that particular thing. 46:00 So it's like, it's more of like I was saying like a management type scenario. 46:03 So giving, 46:07 like a quick example, I did like a series of button mixins 46:09 so I could easily create a couple different types of buttons, right? 46:12 >> Right. 46:15 >> And then, I had, you know. 46:15 It was totally sweet and had all these different configs associated to it. 46:17 And then I took those 20 lines of configs and put it in my giant config file. 46:20 And then I was like, okay that's the breaking point. 46:24 This thing's too big. 46:25 So then that's when I kinda starting doing a pattern of, like, you know? 46:27 These are specific to this button module. 46:29 And then I have a place in my folder structure to actually put these things. 46:31 So then, when you go in there later, and 46:34 say, I need to change the variables for my buttons. 46:36 You just go right to the button file, and then, there's all your stuff. 46:38 So, it's, it's, you know? 46:40 Everything about this, it's a convention. It's a, it's a good idea. 46:42 It's a path, it's a way to start something. 46:46 If you don't have a process, maybe look at this process. 46:48 And maybe it'll help you. 46:51 And if you see faults in it, then change it. 46:52 >> [INAUDIBLE]. >> I don't have this one exactly, 46:55 but there is one I there's, there, if you do that blackfalcon.io. 46:59 You can just do a search, just do 47:07 a Google search for cleaning out your Sass junk-drawer. 47:08 You'll find all the shit I have out there for it. 47:10 So there's a, there's another version of this and then, no, there's no porn. 47:12 >> [LAUGH]. 47:17 >> [LAUGH]. I heard you. 47:19 >> [LAUGH]. >> So, [LAUGH] so 47:21 yeah, clean out your Sass junk-drawer, and then you'll see 47:24 like a blog post that I wrote about this entire thing. 47:27 And then, another version of this deck. 47:29 Yes. >> What 47:33 was the rough draft, URL? 47:37 >> Just roughdraft.io What was his [INAUDIBLE] 47:38 >> Oh no. 47:47 You, yeah. You can just pick up any. 47:47 You can pick up anbody's Twitter handle. I mean, Twitter, GitHub handle. 47:48 And then, so then, mine was blackfalcon.roughtdraft.io. 47:53 And then you could pick up anybody's and look at it's, it's kinda fun 47:58 cuz then all of a sudden, you just grab somebody's 48:02 thing and like, oh, there's all the crap they write. 48:03 >> Hi, how long have you been use or, down here. 48:07 How long have you. 48:12 >> [INAUDIBLE]. 48:12 >> Been using how long have you been using the system? 48:12 And does it vary at all, depending on the scope of the project or 48:15 is this pretty standard across the board, regardless of how large the site would be? 48:19 >> I've probably been probably using 48:24 this specific system for about three years, 48:26 two, three, it got tested the 48:31 most while I was working at Getty Images. Enterprise scale. 48:38 And then it got tested reallot. Reallot, cuz that's a word. 48:42 It got tested a lot when I was working at 48:47 Substantial, where I was working on a bunch of small projects. 48:48 So it scaled big, and it went small, and it always worked. 48:51 >> 48:56 Cool. Thanks. 48:56 [BLANK_AUDIO] 48:58 >> And we're out! >> [SOUND]. 49:03 >> Thank you. 49:08 [BLANK_AUDIO] 49:14
You need to sign up for Treehouse in order to download course files.Sign up