 Hey everyone Hey I want to thank everybody for showing up for my presentation talking about Object-oriented CSS sass and how to do it better in my humble opinion So you're at Portland and we're gonna talk about sass. So just kind of a quick survey of the room How many people here are new to sass? Raise hands. Wow, that's epically awesome. Okay, totally cool How many people here use object-oriented CSS type methods? All right, you are my target audience. Okay, this is totally cool Okay, jump into this. That's me. My name is Dale Sandy I work up in Seattle at a place called substantial that's substantial. How many people here from Seattle? All right, we will all get together for coffee later So this is me on the Twitter's if you find anything I say to be interesting and want to hear more about it I tweet about this crap all the time I also That's recorded And for the people up in Seattle and for the people from Portland who want to drive up to Seattle if you're ever so inclined I do also run a sass meetup up in Seattle and again, you can follow me on the Twitter's I actually have more people following me on The Twitter's at sass meetup around the world that actually show up to the meetup. So that's pretty cool, I guess So I talk about a lot of stuff there, too And this is my daughter Zena today is her birthday. So everybody say happy birthday Zena. Thank you very much That is she's so cute So, yes, we're gonna talk about sass extends and a concept called silent placeholders, which is really cool when you understand What they're doing and how they can work for you Ninjas there's secret code in your in your in your code. Yeah Okay, so object oriented CSS frameworks Attempts at creating objects to streamline application. Okay So we all know that doing things to make things easier Usually means you end up writing a crap ton more code, which then makes your life more complicated So this is this is the precursor to what I'm gonna talk about here So object oriented CSS Nicole Sullivan teacher taught us some pretty great concepts, you know identify Reusable objects be semantic with your HTML minimize your selectors extend your classes style separate from content and content separate from container and This presentation I'm primarily gonna focus on these last three things here And of course style separate from content content separate container. Duh This where we need to go Object oriented CSS frameworks CSS frameworks They've been around for a long time even before object oriented CS came out I mean how many people in this room have used like jQuery UI, okay? So, yeah, you all know you put in one module you just inherited 20,000 lines of CSS. Yay. Thank you um Where they fail is That they're constantly trying to solve all of your problems even though you need to solve one problem and Where a lot of people will look at sass and go oh screw you sass people you're doing nothing But giving me a lot of code blow it. I was like have you looked at Twitter bootstrap lately Okay, 4,914 lines of code before you write line one to Make it what you want it to look like not to look like Twitter bootstrap I say I don't want that Okay, pretty simple Dry coding we all understand the concept of dry coding. Don't repeat yourself nine out of ten developers agree that this is a great way to Do it that one developer. We just don't talk to him Bootstrap buttons. Okay, so I'm gonna do right now. Let's just talk about buttons very simple concept, right? So let's look at some code for bootstrap buttons So, you know, how much CSS can it really be in bootstrap buttons when we're only just kind of talking about Two types of selectors with just you know and nav tabs and have pills I mean this goes on and on and on and on and on and on and on and on and on So that's a lot of code. That's 169 lines of code just for those two selectors right there That kind of code makes kittens cry. That's horrible. I don't even want to talk about that CSS vanilla CSS by itself is not a dry concept. It's a scripting concept that endlessly repeats itself We've all been environments where we create something and then you're working with the designer and you have all these little You know two pixels here two pixels there this hex value this hex value you're repeating stuff all over the place endlessly You know just in this example alone. There's 10 references to white You know, it's just like it's not It's not something that a lot of people like to work with because it's very hard to manage and What always ends up happening is that you know every developer in this room who started working with CSS I mean you start out and you're like, this is gonna be awesome this time. I'm gonna write good CSS You know and then the project starts to evolve and then more things happen And then you get more design templates and then now the product is live And you have a maintenance team that are working on it and then they're looking at your CSS And they're like, I don't understand any of this bullshit that's happening on here So I'm just gonna wrap a div around it slap an ID on it, you know And I'm just gonna go right to the bottom of the CSS put my ID in there and I'm gonna redefine font families I'm gonna redefine colors and it's gonna look awesome and it sucks okay So objects or in a CSS tries to get us away from that And the interesting thing about OCSS is that they readily admit that one of the coolest best principles of CSS is to extend the design rules of CSS and in CSS Sucks, okay It's hard. It's hard to do because you have all these lines of CSS and you're like, oh, yeah I want to reuse this thing and so then I'm gonna go all the way up to line 200 something and Comma delimited put my next selector and then I'm gonna go all the way down to the line 4,000 something and extend on top of that It's it's very hard to to visualize that and understand that so nobody ever really does it so object on a CSS says Okay, fine. Don't do that What we want you to do is create all these quote-unquote objects and You know these little snippets of CSS and then go into your DOM And then I want you to put all of the classes these Presentational classes inside the DOM all over the place So all great and dandy when you're doing this but then when you start working with something with per Twitter bootstrap And then you find yourself you know putting 16 classes on a single DOM element just to make a button look the way you want it to look is kind of Stupid to me. I don't like it. So you end up with something like this I mean here's you know, you have you know this class and this class and this class and this class and this class and this class And this class and this class and so then as you keep building out templates and modules and stuff You're repeating this endlessly over and over again It just gets really complicated to manage from there, especially through the lifecycle cycle of a project You're always going to run into situations where the design is going to evolve and then you have these Presentational classes all over your DOM and people start doing evil things like rewriting what that Presentational class is actually doing which goes against the naming convention because everybody sucks at naming things the naming is hard So it's just it's a great idea to start out with but it totally lends itself to a lot of problems So then again picking on Twitter buttons you have all these all the CSS right here, right? And again, this goes on and on and on and then your designer comes in says I've designed all the buttons That's how I feel when you just said that. No, no, no, no, I'm gonna go away. I'm gonna go away Okay So developers we want our cake and we want to eat it too, right? CSS we want it to be Presentational it needs to convey design. That's what CSS is for no screw you CSS is to be semantic because I wanted to have meaning Right, so vanilla CSS by itself. This is really really hard to do vanilla CSS Conveying presentation and semantics is about as realistic as this cat getting another top-ten hit. It's just like it's not gonna happen so I've just beat up an object or any CSS so now you're looking to be going okay So what's the better way to do it? So then this is when I say object-oriented s CSS. Yeah So placeholder classes This is um, this is a pretty cool concept I watched the concept evolve with the SAS team for for quite a while as you know the the role of object or in a CSS started to Emerge and a lot more people were talking about it and the the principal developers Nathan Wiesenbaum Chris Epstein and a few others were You know on github talking about what if there was a way that we could embrace this? Without having to do it the way they want us to do it. We can actually embrace it more semantically inside of our CSS and then have all the control from there So this is this is where cool stuff starts to happen And this is where everything I just talked about the object or in CSS take it and just just set it on fire forget about it We're gonna learn something else So here's a simple problem to solve you have a simple module some box with drop shadow article content and button Object-oriented CSS would want us to do something along these lines where you have you know a main content a post-summary a post-border you know and this is when romantic and Presentational all starts living together and not happily You know you have a post header a post button a primary post button you know you just start putting these individual small classes all over your Dom and You write some CSS that looks like this. This is all pretty cool and it kind of tells you what you want to do But as I've been saying before you know extending CSS and Vindadilla CSS becomes increasingly complicated as you start adding thousands and thousands and more lines of code Yeah, especially when you hit that number and You know as I've been clearly saved before it's like extending in the Dom. I don't really like that and Especially when you're working in environments such as Drupal's you don't necessarily always have control over the Dom You know you're gonna have these these pre fabricated things inside of your development environment You can't just go over there and just start spackling new classes in there as you need So you end up coming up with like crazy CSS tricks to force things around So object-oriented SCSS basically says I'm gonna be more Semantic in my use of my CSS. I'm gonna use something like you know a main Content which conveys simple meaning about the block that I'm working with I'm gonna use semantic classes and use the power of that class to hinge All of my design patterns off of that You can start coming up with very common patterns and very common use cases with these naming conventions which then gives you the full strength of developing everything from your CSS perspective and You know as you're redesigning stuff and your designer comes in all the time and asks for new stuff You don't ever have to touch the markup. You do it on your CSS So One of the one of the first tricks that kind of came out of this was using mix ins How many people here know what mix ins are? Wow, okay So very simply put mix ins is a great tool inside of sass It was probably one of the the first major power tools I came out of sass that allows you to encapsulate a chunk of CSS and then Reuse it inside of the rest of the stuff that you're writing again and again and again, and this is all great and wonderful You know mix ins are never processed into CSS until you actually include them into another selector They are much easier to reuse than standard CSS and In this particular example here, you can basically see that we've combined All of these mix ins into a simple module which you know that module by itself looks pretty awesome And you know it's simple to maintain So but mix ins as we all know the robot will copy and paste what's happening They will duplicate endlessly with a every time that you use it. So this looks pretty clean This looks pretty awesome, you know, but for reuse it's gonna duplicate everything so here's a use case of Building out that module that I showed before using just mix ins, you know, this is great I'm really reusing some code. This is so dry I feel so awesome but then the sad thing is is that when we start to Duplicate things again, and then we look at our output CSS. We realize that we're living a lie Because this isn't dry. I mean we're just Our CSS is dry, but our CSS is endlessly duplicating things again and again and again So that makes me feel sad inside Yeah, poor kitty So then this this is where the conversation with object-oriented CSS and SAS started to bubble up in in the github's like I was talking about and there was a lot of really cool conversations going back and forth and You know the problem that they wanted to solve is say is like, you know, how can we very easily create something like a mix-in? But it doesn't perform like a mix-in and that's where the concept of this extends came in Now in this example here, I Replaced the mix-in with a period and made it a standard CSS and then down here is we're basically I'm combining all of those things into a nice module. It's all pretty cool but All of these classes will get processed into CSS So now you're kind of going against what the mix-ins were doing for the sake of lack of duplication So when you start working in an environment where you're building out Object-oriented CSS and you have all these very Presentational classes primary border padding left padding right yada yada Even though you're not actually using any of those classes with your final Widget that you're producing all that CSS gets produced and so in essence you're kind of creating unnecessary code bloat For the sake of trying to create something semantic So this is what our process CSS looks like, you know, here's an object class There's a semantic class object class semantic class object class semantic class So again, you look at your output CSS and you're like, I'm feeling a little dirty here because I'm telling everybody I'm doing cool shit, but I'm not really doing anything So baby steps we're walking towards it. Okay So then another conversation starts bubbling up on the github's and They're basically responding to the very quick feedback to extends that says, you know, I'm Producing classes even though I don't want to use the classes is there a better way to do this? And this is where Chris Epstein Everybody knows what Chris Epstein is. He's the one who created compass the magical compass. Yay Not so much So then Chris kind of started the conversation where he was like Wouldn't it be cool if there was a way that we could do this without producing all the extra CSS? So that's when they started coming up with silent placeholder placeholder selector such and so forth and number of names Kind of started floating around so The concept behind placeholder selectors is again going back to object or in a CSS Let's Understand the principles of our designs. Let's understand what these reusable widgets are What are let's understand what these reusable patterns are and let's create them and give them purely Presentational names So you're gonna, you know create something like default block and default border and post header And these are purely Presentational and they convey enough meaning to understand that when you're applying them to CSS This is the look that you're gonna get when they get applied So when I come down here to post summary again in this later example, so yeah, so the press to create a silent placeholder All you simply do is replace the dot for a class with a percent symbol and then it becomes silent None of these classes are actually Produced in your output CSS until you actually invoke them within another selector that is actually gonna produce CSS So I got my post summary example down here. I combine these all into a nice little module and At the end of it Here's my CSS. Here's my output CSS and this is this is very clean and this is exactly what we are looking for And this is exactly what we are hoping for, you know It looks much like the mix and solution, but no styles are gonna be duplicated or harmed in this process styles are reused and now Going back to what I was saying before about extending CSS Inside of the CSS is a ridiculously complicated Process of doing things because you have to understand and remember where all these things are that you want to extend Placeholders completely take that away from you I mean just just imagine having a library of all these reusable things and then as you're creating a new selector You want to use those new use those new things you basically just say add extend standard border at extend standard title And extend border right or whatever it is that you want to use and then sass knows where that code lives What it's associated with and it's gonna output the the best possible CSS extending that series of CSS rules So, you know, no unsightly presentational classes. You have a good semantic meaning and It's an elegant solution from which, you know, you're extending in the CSS and out of the markup So this time the robots gonna make us happy because I'm doing the post summary and I'm doing the main article and Then I'm extending all those silent placeholders that I showed in the previous slide. So again, we're saying this is great We're really reusing some code. This is so dry and we are so right this time Okay, because now I have post summary and main article are extending the same CSS rules post summary and main article and just throughout the entire thing and reuse without duplication and Free bird Sweet everybody rejoices. This is great stuff but Extending selectors is Dangerous Okay, there's things that you can do that can really screw up your CSS output And I'm gonna talk about a couple of do's and don'ts kind of real quickly here so As a rule of thumb, I don't intermingle selector types. I like, you know, Presentational and functional is how I like to refer to them and I typically try to keep them very separate from each other and But why? It reduces readability Because as you're scanning through a document of all of these CSS rules is like, oh, that's a placeholder and that's a real CSS And that's a placeholder It just gets confusing You wait, we have we have the ability to make things less confusing. So don't make them confusing because you're want to Reduces findability again, you know, it's like when you're digging around for a certain piece of code If you find yourself using the find option in your entire application build just to find out where a selector is then You know, that's a good smell that you're probably doing something wrong and everything's all just mushed together And another thing is that it reduces import ability by import ability, I mean this rule also very much applies to the use of Mixons If you have a chunk of SAS code where its purpose is to be functional versus Presentational Depending on how your architecture set up from SAS. Everybody understands that there's the at import feature for SAS, okay? If you have a document over here that's importing this document over here And it has functional and Presentational inside of it and the reason you're importing it is because you want the functional chunk of that code SAS isn't necessarily smart enough to say oh, I've already processed those other CSS classes And so I shouldn't do it again. What it's actually going to do is it's going to keep importing it again so if you Happen to be in a scenario where you have a series of style sheets and then one style sheet imports another style sheet Which imports another style sheet just so you can get that chain going together And then you import that into something else and you have this endless loop of hell going on and you look at your output CSS you'd be like why is default container represented in my output CSS 36 times? That's why okay, so you want to you want to keep a separation of concerns when you're doing these things I'm an advocate for this type of folder structure Where I look at my my SAS Architecture in a very modular perspective I'll look at something like buttons on a root level of the file structure and say that this is going to be my Presentational output. Okay, so this is this is where I'm actually going to put CSS classes That's going to get turned into actual CSS is going to be using the application And then I'll have a folder sitting in there in the folder is what's going to contain all of the functional and inside of there I'll keep mix ins even separate from placeholder classes So keeping a good functional a good separation between functional and Presentational is definitely going to save your bacon in the long run because you'll know where things are you'll come up with a Consistent pattern on how to find things and then whenever you're creating a new selector You never have to sit there and look at yourself and go is like, oh, where's a good place to put this other than line? 5,000 you know, so it's it's a good way to keep things very structurally organized, you know, presentational functional awesome, so The next thing that's really going to get you in trouble is extending native selectors, okay The way Extends work is pretty awesome, but pretty dangerous all at the same time So this is this is an actual definition that comes from the SAS website That extends works by inserting the in the extending selector ergo H1 in this example Anywhere in the style sheet that the extended selector appears Okay, so even like in this example if I'm extending the H1 nested inside of episode header What SAS is going to do is all you want to extend H1 awesome I'm going to find all of the possible instances of H1 And I'm going to extend them in all the possible ways that I can't I possibly can and I'm going to create a whole shit Ton of selectors even though the one that you want is in there But it's surrounded by 17,000 other selectors and you will end up with this This actually exists in a project that's out in the world that I can't touch anymore So I kind of refer this is that the unicorn basically came and just puked all over your code Agical so do Extend placeholder selector so even though you can engineer a block of SAS And you're going to say like oh, I just want to simply reuse this thing and you can do that More and more often I find myself with the unicorn puking all over my code and then I go look an inspector and then I hate myself So what I'll typically do is that if I find myself in a situation like it's really great idea for me to extend these series of rules I will actually extrapolate them from the from the one thing that I want to extend from I will create a silent placeholder I will put that in the extends folder in my magical folder structure And then I will then extend that into the two plus use cases that I want to use it and the benefit that you're going to get from that is Now you have control over the output you have control over where these classes are going to be extended You have control on how they're going to be extended and you're not so susceptible to that insane loop of finding every selector possible Because what you're only selecting is that one silent placeholder, right? So it's it's the The the use case of a going totally wonky on you is going to be greatly reduced And it makes your life a lot easier to deal with so by simply just changing You know instead of select, you know extending that h1 what I'm actually doing is Extending the principles of what made that h1 and h1 into the different use cases And then I get a much more concise list of selectors that's going to be using that principle that makes more sounds awesome so now those are some basic uses of Using silent placeholders Silent placeholders also can be used very very interestingly to almost create a metaprogramming type experience inside of your CSS So in this example here, this is a pretty advanced chunk of Of SAS that's written here the first part that we're looking at here is a function. Everybody here know what a function is? No, okay So basically a function in SAS is something that actually allows you to create a you know a very Intellectual piece of code which can go which can accept arguments Do a whole bunch of magical things to get it and then give you return value. This is very javascript as javascript ish in a sort of way So in this example here this function right here It's going to take two arguments, you know the variable n and the variable d and the concept of this function is to be the greatest common Denominator and what it's going to do is that as this thing goes through it constantly cycles through and it keeps spitting out numbers Are the greatest common denominator until it gets to zero, okay? Then below that is a mix-in which basically takes advantage of the value That's output from that greatest common greatest common denominator function And then it again starts spinning it through magical things in sask is sask can now use for loops some people Real hardcore like javascript people hate this when they see things like a for loop inside of a for loop But in sass world, we don't care we can do it And it doesn't cause evil things like javascript will do so What this mix-in is then doing is that it's using that value like I talked before and See loop through so the return value from that function is now going inside those for loops And it's working its way through I get the the Then what it feeds it into You'll notice that that is a The primary placeholder selector and it's a selector that's being written on the fly Based on the values that it's collected so far out of that function and then it's creating it as a silent placeholder okay Then the next thing that it's doing is that it's also taking those same values that it's cycling through and it's Extending another silent placeholder. So it's a silent placeholders extending another silent placeholder and what this allows us to do is Once I include this mix-in into my my styles It's actually going to generate this exact example is going to generate a whole series of Every grid type possible in that you set up to grid to be a max of like so if you set up a if you Said the max grid type in this particular example is 12 It's going to go through and it's actually going to create every possible grid Space within a 12 column grid, you know one of one of two one of 12 six of eight You know on and on and on but it's all going to create it all silently. It doesn't exist So then I can come down here and then I have foo, which is my semantic class, you know, whatever you want to call it And then I'm extending grid five of five and then bars extending grid of one of eight Baz is extending grid two of nine and crypto is extending two of nine And then what you see the output there below you is Exactly what you would want to see is like the the semantic classes that I created SAS pulled all those silent placeholders out of that magical function and mix-in that created all these things in basically Meta space and then it's applying the values to the actual classes that I want to use in my CSS So if you were to go all the way back to the beginning of this presentation and you wanted to do something like this You would actually have to have like 500 lines of CSS with all these wonderful things called grid one of two grid five of six grid seven of eight You know, it's a bunch of crap and I want to look at that anymore You know, and I don't I don't want to send that over the wire and I don't want to I just want to deal with it This makes it so I don't have to deal with it So that's advanced placeholders And this this target code is actually inspired By a guy named Lou Nelson out of Berlin. He's He's a super smart cat. He's way smarter than I am And you can find him out on the Github's and if you're interested and you know A lot of these types of crazy loops and things like that, you know He's got a great series of gists out in Github that you can learn from so Insummary getting at the end of this whole thing here. The things that we have learned is that object-oriented CSS and UI frameworks can And basically will give you a lot of CSS bloat because they're trying to solve all your problems before you even write any code So we don't want to deal with that Managing presentational CSS and extending in the DOM is difficult complicated and it has its issues Extending classes with 4914 lines of code makes my brain hurt a lot. I it's hard. I just can't do it. I can't Object-oriented CSS is using a CSS and using a CSS processor will change your life But I'm sitting in the choir and everybody loves sass. So awesome Mixons was a great start. Mixon still has a Very specific role to play in your CSS. I'm not discounting Mixons But one of the other rules of thumb that you would definitely want to stick with is that if you're creating a chunk of code To be reused and it's not accepting arguments You know, then that's an opportunity to say that I should be using a silent placeholder Extends are awesome, but we can do better take everything you know about it set on fire Foo is the way to go questions Anybody have questions, sir Okay, so like like I just said you're He okay, sorry. He basically said, you know, what's what's a good use case of using a Mixon over a silent placeholder and vice versa basically When you're when you're going through and you're engineering the CSS for a particular widget and You see that there's an opportunity there to you know abstract some of the stuff out of there because you want to reuse it Then you know, that's where you look at yourself and go I'm gonna make a placeholder I'm gonna make a mixing if You're following a more of an object-oriented CSS principle And you want to start to abstract things that are just purely Presentational, but the output is going to be static Then that's when you would want to use a placeholder if you're starting to extract things that Aren't so Presentational and then the use case of using them again You're actually gonna want to change variables on the fly Then that's when you want to use a mixing because a mix can accept arguments And it'll allow you to reuse that thing, but you're not generating the exact same CSS again You're generating differences as based on the arguments you passed into the variables. Does that make sense? Yes Hey How do you are you using silent extends with in each other like in a project I'm doing right now I have one for just border for example And then the next one under it is if I want to have border and background and then kind of creating a silent extend built system on top of each other So you're you're basically saying like you have your your parent selector that you're outputting the CSS And then you have extend extend extend extend no like I have an like a really simple extend like just a border Okay, and then I have the next extend uses that border extend with a background maybe so like I have BG background so like it's an extend using an extent you're nesting extends. Okay Every use case is a little bit differently You want to pay attention To exactly what it is that you're extending and how that nesting is working I mean if you're using silent placeholders Yeah, they're all silent if they're all silent there's there's a good chance that it'll probably work But as you start nesting things like I said the rule of the extends is that it's going to go Loop through every possible combination to give you your output So it will work it can't do that But you just have to be mindful of the output that it's putting out is another rule of thumb I never use extends inside of a mixin Because what can very easily happen there is that as you apply that mixin again to another selector Then you're also injecting all of the code that comes with that It's with that extended placeholder and then it's gonna loop through all those different scenarios again And then you just end up, you know, just all you get to do is do it and then open inspector in Chrome and then look and see if you made good choices or bad choices Thanks. I have Two questions, but I'll go to the back for the second one The the question I have for you immediately is how do you extend across media queries? I know that that makes things kind of blow up right now. Okay. That's a trick I don't mean it to be a trick I mean no no no no it's it's a it's a very interesting question the the trick behind it is That you need to have So basically how extent how extends work in relationship to media queries is that the extended selector is scoped by the media query So if you are you you create a media query and then you create another selector And then you want to extend something that is outside of the media query sass is basically make a puke on you Okay, right now. They have a silent fail, which says it's not gonna work But in the next version it's gonna crash on you. So the way to get around that is What I'll typically do is I will create Placeholders that are to be used within that media query underneath another media query. So it doesn't have to all live Because the cool thing about sass is that you can write your selector, right? And then you can nest a media query with the via the bubble up method and then you can write all your media query specific sass based on that Based on that one particular selector So if you have Somewhere else in your hierarchy of sass you basically have a series of place holders That are also written underneath the media query that will work Does that make sense? I mean, it's a little ambiguous to me. What do you mean like underneath the media query? So Um, just nested in inside of the media query The internet still work Not really I Kind of have any No, no the internet doesn't work. No, no, I'm getting something. So it's it's basically not like a really good example is Nathan Smith wrote a unsomantic grid system And then one of the things that he did was that he created a whole bunch of placeholder code and then He has a master import file that he defines and media query and then he imports all of that Placeholder code inside of that media query So then now all of those placeholders Honestly live inside of the media query and then anytime you create a selector to find the media query sass is going Oh, yeah, it actually lives under the media query So it's sculptor properly and I will apply it to this particular use case. Okay, that that makes sense. Does that make sense? Okay That was pretty much my question But I have a one more question to add now. We said like so Should we have to define twice like for example if we create extents call us Border Borders and we have a width of two pixels should we extend should we define it twice in under two different media queries? Um, I mean again, it totally depends on the use case of how you're trying to build those things I mean you could it doesn't make you feel right Um, so we are repeating again, right? Like yeah, I mean there's and I think Yeah, that that was my thing actually like okay started with this but when it came to media queries We found that we are repeating ourselves again again because like once for let's say 720 and we have to define the same styles once again for one zero two four if you're gonna use Silent placeholders sure kind of silent placeholders also fails in this case, right? But what we what we are doing, I know if there are better ways to do it But this is something which I which we do I just want to verify if that's fine Sure, what we do is we have a mix in uh-huh and then Also, we extend that mix in in us in an extent like we have a mix in let's say for example Well, yeah, yeah, you can yeah. Yeah, that makes sense I mean you so that you define it really once and then for each of the media query we just go ahead and say Include this mix and so is that I mean if this if this okay Where's how did I do this? Yeah, I mean if if you guys and people wanted if you guys want to talk about this a little bit more about the session I will I can show you some examples I Know you briefly touched on the fact that you like to use modular file structure. Mm-hmm, but I guess what I missed was Does that have a special place with OO's SCSS? No, that's why I didn't really talk about it that much in this presentation. I have I have a whole other presentation that you can get from Speaker deck, okay It's basically called you just Google it. It's SAS clean out your junk drawer and The whole premise of that particular presentation is you know the the horrible practices of everybody just You know a lot of people when they come to SAS and then they come they you know, they find out about the the ability to create partials Then they just create a folder called partials Right and then you just shove all your partials in that folder and you make an endless amount of partials And you do your import thing and so SAS clean out your junk drawer basically talks about how you can have a better folder structure for managing You know your your elemental styles your module styles your layout styles and then keep them in a place that is Consistently usable so that everybody on the team knows where to look for code. It's very cool. Thank you. All right, cool so I went to Snook's presentation on smacks. Yeah, you did and I've read up on it online, but my approach was some of yours well No, not quite as clean and different training between the functional and the presentational and it seems like What you're saying here is a lot more appealing to me rather than nesting a bunch of classes Even there's a bit more in a certain sense. There's a You know, there's a certain sense of redundancy. I think you could kind of take smacks Principles for naming your placeholders Yeah, but I mean it's there. Yeah, there's nothing I'm saying here today is gonna say that you know What you know the principles of smacks the principles of object-oriented CSS and the principles of smacks are good principles I I'm totally cool with that and having having a consistent naming convention that works within your right I mean the funny thing is is that when we you know, we as developers and Presentational developers start saying is like, you know, I want my stuff to be more semantic Everybody remembers, you know, when you get into an argument with somebody and the argument ends with you know Now we're just arguing over semantics This argument begins with semantics because now you know, this is not gonna go anywhere, right? So you're you're fighting over something that is just purely you know, it's just totally argumentative and so if if if the smacks naming convention works for you and that's great but what I'm advocating for and what how I see silent placeholders being used is Not creating a bunch of things written in your CSS just for the sake of writing that but be use the silent placeholders To write them and then use them appropriately with the markup that exists in your in your down yeah, I mean I would see this as more of The primary means of development and then taking maybe some of the like the naming convention ideas from smacks A lot of people do that. Yeah, I mean his approach seems much more like the classic. Oh CSS sure Well, I mean, yeah, his approach is totally talking about like, you know You're just gonna use vanilla sat vanilla CSS and here's and here's a way to manhandle that and I Even if even if like my manager came up to me and said I need you just to output some CSS So I can plug it in somewhere. I'm gonna write it as sass now. I'll just give them the output I don't write CSS anymore. I actually hate the language. Yeah That's okay. Yeah, I have a brief discussion. Then he says like he does use extents and imports, but much more judiciously sure and so I mean, I personally Appreciate your approach better. Well, thank you. I appreciate that Thanks for presenting Two quick questions. One is the sass file. Are there any unknown issues with like browsers? No, because I mean sass The browser never sees sass. I mean your outputting You're you're going through a preprocessor that's gonna output CSS. So If you do anything that breaks in a browser, I mean you're You're just writing broken code You know, I mean, it's like it's sass is not gonna do anything that creates browser incompatibilities Actually out of all the preprocessors out on the market sass is the one where Nathan Weisenbaum is very specific about honoring the real principles of CSS honoring the cascade he understands how CSS works and he Continues to build sass in that fashion Whereas like the guy from stylus. He's just like I'm writing a preprocessor, man I'm just gonna break all the rules. I don't care and you know So like there's developers on the note side who love that because that's all they want to do is break rules Cool. So, you know, so it's if you if you're writing valid CSS Inside of sass you're gonna get violent CSS output and it's gonna work What sass is totally gonna give you is the ability to make it easier Okay, and the other question was are there any online tools such as JS battle? Yes Yes, there is I'll just go my local version sassmeister.com. Yay Okay, so this is this is a project that a friend of mine and I build and the whole purpose of this project is to show people how to use sass and One of the cool things that it does is you can choose between the two syntaxes sass and s CSS and What is also in this list is all of the popular compass plug-ins that you hear about on the news in the Twitter feeds And so you're like wow, I want to learn how to use Singularity, okay, so you don't understand how to use singularity and you don't want to set up an environment to play with Singularity so come to sassmeister put in singularity code You write code and then it spits out CSS and everybody knows what CSS also look like so you draw one-to-one and then you learn school Awesome. Thank you. All right. I just have a real quick question. I have a really long answer. Okay, awesome Are you at all concerned about the level of specificity with silent extends and silent placeholders the level of specific specificity like you're not you're not changing your markup. You're just extending your Placeholder and in one of your example slides that was the good example you had a block with maybe 20 different selectors all Associated with four lines of CSS and I just have concerns that you know if you're extending maybe four different Silent placeholders that you're then going to have Yes, there is specificity that is then really challenging to change later. Sure That is a development principle on how you and your team are basically developing the widgets I mean a lot of the scenarios that I find myself in where you know, we're we're writing We're writing a module that has a specific name Okay, but just by the the the pure nature of how we're developing things in this thing is gonna have a specific name But then there's a lot of reused design Presentational things that are gonna get appended to that So then that's where I make good use of it But if you come up if there are things that are you know more generically named like you know This is a primary article or a primary subheader There's no reason in the rest of your code to change that name Sure, you know So then that would actually be the class and you don't actually even need a silent placeholder in that scenario So it all kind of depends on the use case, you know I'm not advocating to say that you know Every design principle should be a silent placeholder and then change every class in your DOM and because you can extend everything That's pretty badass What you're gonna end up with is a whole bunch of really crappy CSS and then you just feel bad about yourself So it's a balance. Yeah, it's only a balance between smacks and this, you know, it's not neither or thing, right? I mean, it's I'm a tool is a hammer and I try to make small holes in the wall not big ones Awesome. So thanks a lot. Thank you Going once Going twice. Thank you everybody for showing up Whoo triple camp sassmeister use it love it. It's great. It's out there for you