CSS Architecture with SMACSS (feat. Caleb Meredith)

hey do you remember a few weeks ago we had a really awesome live episode of dev tips where we all have kind of tuned in and had fun and chatted to hung out we were celebrating the milestone of dev tips reaching 20,000 subscribers before that show started I sent out a tweet and asked if anybody wanted to come on to the show and do some code examples or something fun or you know whatever one of the replies to that tweet was from dev tipper Caleb Meredith who proposed a really awesome idea unfortunately as the time came closer our schedules couldn't match up with a live show and he wasn't able to do it but we kept talking and he eventually made an entire video just for you guys on his own and it's a good one it really is it changed the way I look at a lot of things I'm currently doing and I think that's true of every time you guys come in and teach me something new whether that's making an entire video by yourself or you know doing a pull request on github or just drop in knowledge in the comments down below and so that's what we're gonna do today I'm just going to pass it over to Caleb but before we do you might remember in last week's episode I teased a big dev tips announcement stick around and at the end of this show I'll have more information for you on that topic but right now let's say hello to Caleb and drink deeply from the well of his knowledge ah hi guys my name is Caleb Meredith and Travis has invited me to make a video on the channel about something which really has a lot to do with the meta conversation and discussion on the dev tips channel about CSS preprocessors frameworks so today I want to talk to you about the CSS architecture so first let's start with the problem and the problem is this difficult to read CSS when we're working in big projects or with groups with CSS we are often we often find our code being messy difficult to read hard to extend and in the future after we've given in a couple months hard to come back and look at it again and be able to get in the same minds that we were when we wrote it so what is what a lot of people have done is they've created these GSS architectures to help style their code and style to code for their groups so that the CSS becomes more readable Smacks smacss scalable modular architecture for CSS aims to do just that it's a CSS architecture that I have adopted now while the CSS architecture Snax is a bit different from a framework like bootstrap a foundation as it's not anything that you download and install and write functions from and all that great stuff instead it's a set of rules it's a mindset it's more abstract so let's learn more about Smacks how to use it how to make our code better cleaner easier to read and modular and scalable as I said it's named so let's get right to the example every project needs some form of organization and just throwing styles into whatever sass file you want is an organization what smacks tries to advocate is a set of standards a set of rules for creating a good organization for your structure so that not only you can figure out what you're doing in the future but also other team members and other people who will have to look and change your source in the future it's almost the same as we write documentation in our code because we want future generations to be able to figure out what we're doing we organized our CSS or more accurately our sass so that people will be able to find Styles more easily and be able to make changes to them that reflect what you initially had in mind so as you can see here I've just created a couple of base files I'm using Coquette to compile my Jade and my sass so it has its configuration here at my index Jade we're also gonna be looking at the wireframe Travis uses for his grid series and just look at smacks in relation to this when we start going in-depth alright so in here I set up a couple of blank sass files here on my index I am importing all of the files I will use I'm okay so Smacks composes of five categories the base layout modules state and the fifth category is themed but as most websites don't have themes it's not that important to add but basically all of the style is he throwing theme are the styles that are going to be changed depending on the theme you're loading so I'm not gonna go over them in this video they're not too important anyway and then for me when I use Mac's with sass I add the utils and the VARs file now you have to remember that Smacks was not originally created with sass and other processors in mind so I've adopted a couple or I've changed a couple of the rules of smacks and added to it in order to better fit the sass preprocessor environment so as you can see here my utilities file is just a couple of utilities golden ratio screen sizes stuff like that that I use on every project and my bars is empty but it's where I would put variables for for all my project alright so let's get started writing code as you can see here's what the indexed IJ looks like and here's what it renders to so we're gonna start with our base styles the base styles define what an element should look like anywhere on the page they are the defaults so if you're using a reset the values that the reset changes your styles that's the defaults for your project so base rules are gonna include things like your default typography font family sans-serif maybe you like to change all your boxes box sizing water bike so maybe you like to do that to all your by at all your on the elements on the page I know I do or maybe you want to make all your links had the default be read and hover be blue I don't know whatever you want to put in the base but all the all the styles in your base should be the default styles for the entire page so as I mentioned before all of your reset files are really a part of the base base style so I like to use normalize dot CSS I'd probably put up here at import normalize so that's what I would do you can do whatever you want so all your default styles for how anything should look anyone the page goes in the base and you should not have any classes or ID selectors in your base files no any if you're going to need to put a class in here you need to have a really good reason and as I go over the other categories that smacks provides you'll realize that when you need to use a class you should be able to put it in one of the other categories you should not need to put it into your base style next up on the next category is layout so the layout styles are will divide the page into sections into major sections not like minor sections like the navigation or maybe the sidebar for example but the major major sections and layouts will hold multiple modules together so let's for a moment talk about what a module and what one of these large layout elements I'm talking about is so I would consider a module on this page to be perhaps the navigation I would consider that as a module or more specifically I would consider this to be a module this little card with the title and like a little label some metadata I would consider this to be a module I would also consider this right here to be a module using or the same module as this just with different content I'd also consider this to be the same module and all of these I'd maybe consider this to be a subclass or an extension of this module but we'll get into that later I consider these little external links to be their own module I'd also consider the search box to be its own module I might also consider this entire little box right here to be its own modules so anything on your page which are useable and modular parts in your design they will be a module and they'll be styled as such your major elements that you're gonna group together in your layout is gonna be your header or your main content or your footer so these are like the main sections that stick out to me footer main content and header and so we should indicate these with IDs now this should be only the one of two times you are going to be using ID selectors on your page because there's only one section you're gonna use the idea of course the other instance you're gonna use let me also just move the hello world in here the other instance you're gonna use IDs is if you want to give this header say an ID so when you type it in the URL it jumps down to that that's the other situation where you might want to use the ID otherwise your ID should be strictly restrained to your major elements of the page which is typically the header main and footer you can also maybe say your sidebar is a is a major element or maybe in your navigation menu is a major element or you could say it's a module whatever your preference is and whatever the requirement of your project is and when I talk about more about modules you should be able to better decide how you want to define these as large as major layout elements or as a module so we defined the styles there but so not only do we define the major element styles in our layout dot sass we also define specific modular classes that we will append to our modules and other elements throughout our page so for example bootstrap has this pull right class right where it says pull right float right and pull left float left so that's the type of utility class we will be creating and adding into our layout file as the second type of things we'll put in here now before I go on I want to talk a moment about naming conventions in Smacks so if you've ever heard of the concept of name spacing it's basically adding the name to the beginning of another element to help distinguish it from anything else so I don't know if you've ever run into the problem where maybe you're writing CSS and you have label of blah blah blah put in whatever styles but then you come to another element later on and you also want it to be a label so instances where you feel like two different things really have the same name well name spacing it you can say element a label or maybe header label and then maybe flitter labels so ultimately they are that they're called the same thing but they have a different name space a different prefix so I use this in all my variables too so maybe I want to have a different color for my heads so I might say see for color head or see link whatever and I also prefix my Mickey my mix-ins so I typically like to have a mixin for tight so I would type tea head as in my typography for my header so I prefix everything you do in sass and it'll just kind of help you organize better so for the layout which brings us back to this for all of these modular classes we're going to use to lay things out and if we want to move stuff around pull it left or pull it right we're going to prefix it with L so I typically I typically don't put the pole that's your choice I typically just do L right for that and L left for float:left maybe you even want to do dot layout on line Center yeah and then you can do text-align:center so these layouts are meant to be just appended wherever on to your thing so maybe maybe not to your major layout elements like these but to your modules and other elements within your page you can now use these layout classes to just quickly float anything left or anything right and define the layout so to recap in the layout dot sass we're going to have our major layout elements like the header or main content or footer and we're also going to have our modular layout classes which we are going to append two modules and whatnot all right so next up on our list we have modules modules are the reusable little bits of snacks that you can throw around everywhere so if we go back to here and when I was talking about layouts I mentioned I would consider this a module I considered this the same module this module this module they considered this may be a module I'd consider probably this whole column of module modules are reusable bits of code and they should be kept that way now I'm not sure if you notice but I also created this modules folder because as you can imagine we're gonna have a lot of modules modules are the most important part of smacks and I'm gonna have a lot of them so I'm gonna want to make my own file for them so I would consider this maybe a card module so let's just quickly write up some of the markup for these modules so if I were marking up the car or this card here I do say card so this would be my namespace this will be my namespace as I mentioned earlier my prefix it'll be a card module and then I'm going to call card label Oh tell you why I do the two dashes and that does it say all mm card Mehta 2 2 2 h 2 dot card head epsom what else do we have we have a paragraph I'll call that card copy and I'm just gonna throw in some wrong command just throw in a bit of lawn ups in there and I know I'll have you a lot card tags list item card tags yeah tag and here and what I'm gonna do is for the tags I am going to define a second module that's inside of the mate the larger card module zone tag tag Epsom my tags tag lorem all right and just for another example I'm just gonna quickly make a module for the navigation just as another example so I do ul nav again being the name or in the name space that we're gonna use Li products and then Li dot and I have search and we're just gonna put in input type equals search okay so next thing I'm going to do is I want to create what I have three modules right and mine AVMA module add my card module and have my tag module so let's create three files this one will be card dot SAS throw into my modules here this one will be yeah I've got sass right there and this one will be tags sass and then in my module sass file I'm just gonna import them so I'm not cluttering up my modules file too much instead I'm breaking them all into different files and these module files you will end up having a lot of them and they will get pretty long so thank you sass for allowing me to important didn't misspell something I did so thank you sass for allowing me to import these files and these variables and all of that stuff okay so I have just have some pre-written style so I'm just gonna quickly copy and paste tags and I'll explain it a bit alright so there we go and I'm just gonna make one more change before I go over them in my base styles I typically like to have my unordered lists be opted in for the list styling if that makes sense so instead of opting out in every single module I'll instead decide if I have an unordered list all I decide to opt in or not so I'm just automatically saying the default is no list styling no margin no padding just as it is alright so let's go over these modules first we'll look at card all right so I set the max width 400 give it a bit of margin and now probably the first thing you'll notice as a little weird or different or something you haven't seen before is this I do and dash dash label so why would I do that instead of just card label well let's see how this compiles say that let it refresh and we'll go down to index SCSS where are we all right so you'll see something a bit different when I write between when I write it like this and when I write it like this when I write it like this you'll see that SAS and automatically nests these two in it so it's card and then it's dot card label whereas here it just takes it just does card meta now doing this is a much better practice and this is something not many or this is a kind of a more abstract topic that not many people get but CSS specificity which is when here let me put this back and just look back in this file again CSS specificity so when you nest two things when you say card and then inside of the card label that's actually not a good practice because what this does is it increases the specificity for these card label Styles now you might not understand specificity it's kind of difficult to explain so I'm gonna say if you want to learn more about specificity and why it's bad there's a great article on CSS tricks otherwise just take my word for it and no that's bad basically what happens is the deeper you are and nesting the harder it is for the rest of the CSS to override those styles and if you've ever been in a battle where you have to put exclamation mark import and then look at the old style and change it that's because of specificity so wouldn't we do it like this trust me it'll save you a lot of headache in the future and a lot less exclamation mark imports by simply doing it that way so this is a little trick that has been hiding in sass right under your noses likely for the whole time you've been using it all that it does is it says the ampersand means for all the selectors above me add this to it and then output it so and dash dash labels so as you can see dot card we took card and we prefixed it so we got card - - label I said it's probably been hiding on your nose because here look at my base styles when I declare a color red and hover let's go up to the style here all it's doing is again taking the a and then adding hover to it so I can put whatever I want here whatever it doesn't matter it'll prefix it or it'll post fix a fix it only this is the correct word whatever I put there so the most common usage is with pseudo-classes but you can do it with whatever n so this is just a nice little shortcut and it lets us keep the awesome nesting feature of sass and it avoids us having to write things like this which we would have to do normally so sass assess is pretty cool bloodiness do that we love indentation so alright so now why do I do this - - here like does that it probably doesn't make sense to you why don't I just use a single - well okay so again card is our namespace here and then label is the name of the element so card namespace meta is the name of our element etc etc well what if I want the namespace to be slightly different what if I have another variation at this this layout actually provides a great example of this this module right here is pretty much the same as each and every other module except for it has a slightly different background so maybe what if I wanted to write card fade what if I just wanted to write that and then I wanted all of these other things to be inherited well it would be a little difficult if I did this as a single and then oh and then what I can do this is then I could just write card fade - - label although I don't recommend that I just recommend using the default styles for card but what if I had something like this and then I was only using a single - so if I were only using a single - here and doing this it's where does the name space end in this case card fade and where does the new element begin so to help distinguish I use the two dashes sometimes you'll see two underscores I like two dashes you can whatever style you like you can use but that's what I'd like to do so again to recap this is going to be our name or this together is our namespace this is the main name this is maybe a different types of one two three whatever red blue pink whatever and then so you separate those two by a dash and then you separate the elements a label met ahead copy or whatever by two dashes alright so those are our modules so here's just a code for nav and here is the code for tax now our last and final section is state or last and final category that is what state defines it's a way to describe how our modules look Lin in a state so this is really for the interactivity and is it hidden is it expanded if you have maybe a jQuery accordion it can you see the content can you not see the content so the state helps us helps us better define what it looked what an element looks like when it's in the state at a specific time so and like we prefix layout with L dash whatever a color with C - whatever we proof we prefix our states with is so for a nav we might commonly see this as is selected so as you can see I wrote a bit of sass here which says when it is an A vitamin again remember what this and is doing is just pulling the nav down and here another ampersand and where it's taking this item pulling down nav and then adding is selected so when we have a nav item and it is selected so we can see how that renders right here nav item and dot is selected we can color it blue it's an arbitrary color that I picked off the time I had when I was styling it obviously not the most aesthetically pleasing I hope you don't use that for your real website but yeah but that's how you do a state all right and so one last comment about modulus that I'd like to make is as you can see with this navsearch' what if I had in my items that I wanted it to have border:solid 1px black a concept of many programming languages is extending so you see how I had these Nevada Nevada nav items I would consider that my most general in here you know remove that blue doesn't look very good holy yelling doesn't look good anyway but it's for demonstration purposes this is navsearch' I would consider a nav item but I don't want to but writing nav item and also nav search kind of makes my markup very messy so what SAS allows us to do is really cool it just allows us to go and - - search that extend dot nav item so it just kind of allows us to easily extend that and as you can see it gets its border if we aren't extending if we aren't extending it it's not going to have a board or yeah and you'll notice that you'll notice that I can't use the ampersand here no I can I have to write it out here but I'll alas that's for one place you can't use it all right so just a couple of closing thoughts if you want to learn more I don't like that Bordeaux changes continue now if you want to learn more about snacks then just go to this website and this max isn't originally my idea and if you want to learn more just go here you can read all about it and but remember it's not originally created for SAS so I just gave you an example of how I use it of how some of my ideas and how to implement it with SAS and other pre-processing languages so thank you so much for your time and have a good day wasn't that awesome I know that I'm gonna take a serious look at my styling habits and insert some smacks up in there so last week I teased about a big announcement coming up it's exciting the announcement is that I'm in the process of organizing an exclusive community for dev tips and it's happening very soon I've set up a forum that you can use to be notified when it launches you can't click on this thing but in the description below is a link to that form the first 100 people who sign up will receive a dev tip sticker and a personal note from me in the mail be sure to click that link in the description I'm really really excited about all this and also next week's release is going to be accompanied by a live dev tip stream the first 10 people who join will join me and will watch next week's video together and you know we can hang out afterwards talk about questions and shoot the breeze whatever I'm exploring different options for the community bonuses and this might be you know like a fun thing to do anyway until I see you again keep on hacking

Channel: DevTips

Views: 45,443

Rating: 4.859251 out of 5

Keywords: HTML, CSS, Javascript, Web Development, Coding, Design, Dev Tips, Web Design, Website, Web, Internet, Internet code, Tips, How To, tutorial, web design tuts, net tuts, web tuts, coding tutorial, advice, development advice, programming, programming help, workflow, code editing, design, graphic design, graphic designer, designer who codes, designers who code, design prototyping, SMACSS, Cascading Style Sheets (Programming Language), Architecture (Industry), Google

Id: 6co781JgoqQ

Length: 30min 15sec (1815 seconds)

Published: Mon Feb 23 2015