 up or something and this is probably going to be like this slightly drier part of the evening I I'm doing this because this is kind of the sort of talk I want to see more because it's very easy to to find out about the latest and stuff that's coming out the standards and everything you can read articles and the information that I find hard to get this like how do people who've been doing things for a couple of years and how do big teams etc how do the pros work and I'm not really a pro but I figured out that if you speak up with some sort of authority that the real pros will stand up and correct you so you just start babbling out crap and hopefully somebody will say something smart and that being said these rules are actually something I I'm following I put in place I'm trying to impose on other people as well so yeah let's go as my bio on the website mentioned I don't really like CSS I think it's very easy to create chaos I don't like other people's code and because of that other people CSS especially also a possible it was really I it I took like five minutes to figure out whether the apostrophe in people's is actually necessary or not I think it's if it's people as in plural then you would do people's and then apostrophe after us but anyway it's difficult so my goals when I do CSS when I have to is the HTML should be clean I don't really care much about the CSS the CSS should be navigable which apparently is a word and it should be sort of clean up you should be able to find your stuff but the really the readability part the the short the concise part I want to see that in HTML and also I think if when it's done right you're gonna write way more HTML than CSS so that's where the focus should be and I don't want any side effects I don't want to change from CSS somewhere and then have side effect somewhere where I don't really where I don't really anticipate them so we get to that first one apparently especially with say web components and with say Angular directives and components you can very easily just make up your own tag names and it actually works in most browsers we don't talk about the browsers that this doesn't work in for production systems nowadays you can really just make up your tag names it looks nice you might violate some standards you might want to think about using JavaScript to register it as a custom tag name or something you have to set a display property unless you want it to be in line they usually most elements I want to be block elements if you can use the tag name as as something that describes your element you can then use classes as for modifiers you don't really clutter up like tons of classes in a in your code this there should be very obvious to most people like who does not use any sort of CSS pre-compilers nowadays SAS or less or something okay I think point three is for I don't know um no I that there might be there might be reasons people might move after I don't know what do you are you yeah that's right um yeah so that's the thing I mean the point is there's always like new stuff and especially the whole modularization department there's a lot of I'm pretty sure most of this stuff will be completely outdated in two years I hope so there will be better better things better concepts but for me mostly I like it because I want to do nothing I want to use variables I need that for the rest also by the way code pen code pen can do SAS or SCSS syntax you can configure that if you click on that little gear thingy in this CSS window so do that and you can like produce more concise shorter code and post CSS if you feel like it this it's kind of a more modular system with plugins etc you can do auto-prefixing stuff like that then so this is about structuring the code base one top level element profile in in the case of the say product list element that I used as an example earlier and the file name will be the name of the tag tag name and it should really just be this one top level element and everything else is nested inside you can use the ampersand in SAS which I'll show you later for those who don't know but it should be like one you shouldn't have any other top level elements in that file and then once you have your list of file of files you can either use some automated way or just manually put them all in one master file in the compile that and you get your CSS so this is the example of the ampersand thing for those who don't know in this case the the class name here the light dash BG class name the rule it will generate when you compile it the CSS it will produce is is basically just together so you have the content section element with the class dot light which is not a descendant or anything it's just you can then the HTML will be content section class light BG so that's technically in the output it will generate multiple CSS rules with like a different top level selector but that's permissible in my arbitrary rules and then I really like pattern libraries because it makes you structure your your CSS like very strictly you define what elements you want to have what modules you want to have you can just basically a pattern library can just be one file where every element you use in your front end is in there maybe with some say some containers for different widths etc. one thing if you want to take this further is looking into atomic design which is this sort of front end philosophy how to break down a complex front end into individual elements and and turn it into a modular code base into modular CSS so this is an excerpt of my of my pattern library these are two elements you see I have some as that's embellishment thisles around it that described the thing so usually when I design something new or when I create something new I put it in there in the pattern library so I can see it really works by itself this one like because it's all contain is one top level element some elements can also contain other elements in that case you have to be careful that you don't have any rules in your element that will affect anything that is below your element again I think with with like web components and all the new fancy stuff that is coming and I'm not sure how supported these things you can you can do like proper and encapsulation maybe somebody wants to say something about that later and this is a kind of stuff that works with current browsers for sure this is an example of a container element the only style that is applied to the element itself is for the title so the element is called content section it has a title and it has content the content is just inside that diff and by using the greater than the what is it called direct descendant selector I guess by using that that h1 style only applies to the to really the title directly below the content section directly inside the content section element and not inside the diff where the extra content goes so really there should be in this case it should be nothing that affects the look of what goes inside that diff then the C in CSS stands for cascading you can have multiple rules applying to the same element which I find super confusing you can't really you and you never know when you change some code you never know what else is it going to affect where do all the rules come from it takes a lot of time to pick it apart you spend your time in in like the CSS inspector etc the exception for this rule is modifier classes which can override some properties of of elements or media queries for responsive stuff if you have code that you want to reuse in multiple places either just turn that thing into its own element or use mixins which are feature of both less and sass I think do they call it mixins in less as well is anyone using less okay right this is this is probably one of the more controversial ones and I haven't really done my homework on font sizes I find it easiest easiest to just use fixed font sizes pixels and none of that EM or relative stuff and some people may disagree please do that later after the like doing the question thing correct me on this please but yeah it's it's very easy again you don't you don't get anything outside of your top level element affecting affecting your looks then this is some mixing code I use for responsiveness it looks like this inside the content section as an example you can you can use mixins with blocks inside I find it reasonably readable in terms of code readability I still find it can get a bit clutter than everything after a while but it's still I I find it one of the better solutions for for like media query stuff SVG that's also something that actually I shouldn't have to mention I hope use SVG when you can it's much smaller it has no pixelation issues you can you can manipulate it yourself if you use it in yeah if you know how to how to use it it's just a XML code in the end if you use SVG minimize your SVGs there's a tool called SVG O there's a web frontend based on a call SVG OMG and look at them because like look at them in a text editor look at least at the size because if you get SVG say from some guy exporting stuff from some adobe things sometimes there's a lot of binary stuff attached to it if they don't really do the whole export for web or whatever it's called current version of the illustrator is really really good at doing exports yeah no I think I've seen I never really touched this off myself but the current one is really good most of that is because there's like crazed SVG enthusiasts Dimitri Baranowski is now working for Adobe and Brody himself he got so frustrated with it yeah I think they really like SVG and it's yeah as I have actually recently I've gotten nicer SVG is generally I think it's mainly a memory from the past and if you do that if you use SVG say as say background images or whatever you can easily with in your build chain you can inline those especially the small ones again once HTTP 2 is everywhere this is probably pointless or counterproductive for now it's kind of nice to have one CSS file that you deliver once and all images are in there what else do we have right don't use bootstrap is anyone who's a big fan of bootstrap generally just don't don't just include don't just include a third party stuff without looking at it if you if you have to use bootstrap if you think I just really need the forms I don't want to design my own stuff I just need the bootstrap forms and this bootstrap says you can include just the modules you want you can configure it and you can compile it into your into your CSS right and the last one that's just the one I find the hardest to watch other people do things just some very basic knowledge of your taxidermy know how to find a file for example instead of clicking is a clicking to a file tree which can be quite tiring and I think these things affect decisions you make when it comes to so if you're bad at navigating your files or your project files it will affect the structure you choose and you will tend towards putting more stuff into one file because you don't like jumping between files because you're bad at jumping between files or you will have like a flat directory hierarchy because you don't like clicking through directories but you shouldn't have to because usually every editor you should be able to to pull up a file by typing like the first three characters or something and and then select it from a list also good stuff I'm using WebStorm so if say you are on a variable or you're on a mix-in your cursor and you want to see where that mix-in or that variable is defined command B you jump there no matter where it is in what file very useful yeah to navigate your code tree anything else right at the company I'm working for I have to say this I keep it within 15 seconds the company I'm working for is hiring if you think you can do a better job than me at this which is likely please do it for me like take the work for me I want to move on and do other stuff for the same company but not necessarily the front end stuff anymore because we have a lot of stuff to build in the back end right questions or corrections or swear words yes well if you don't want to do any CSS I agree if you want to build a website in five minutes you use bootstrap you throw in some HTML you copy paste it together from the documentation and you have a website but if you're doing CSS I think you're just gonna get angry at bootstrap for messing with your stuff but basically my answer is pretty much the same if you want to actually do something then you're better off writing your own code from scratch than modifying bootstrap because it will take you the same amount of time if not less and you'll be a whole lot less frustrated at the end plus you can control your destiny bootstrap has got tons of issues with it if you want to fix them then good luck see as soon as you sign on to any kind of platform back end doesn't really matter because as long as it delivers the HTML who cares front end is really critical yeah so so many reasons not to use bootstrap understand why people do it I just don't like those people much for their choices I mean once it's a lot of things actually in the sense that you don't read what the house I think there's a lot of a lot of a lot of use cases where it makes sense if it's not end user facing if it's some internal whatever thing back end for your stuff sure I mean it's it's really convenient to output decent tables decent navigation yeah as long as it's not as it's not customer end user facing and in that case again you're not doing CSS yeah but then again that's the difference between being a photographer and and just wanting to take snapshots of your food and that's fine that's a thing but then you're not a photographer if you use your camera phone you can't go out and say your professional photographer and sell your services to weddings and stuff like that right but it's fine it has its purpose and I think this is taking time you now have to put on your laptop because you don't like CSS I will put it next to the chairs come sicker from last year sizes in pixel dimension saving from illustrator or sketch or something or is in bite size so you're doing as a G animation yeah so as you just performance issues if you do a lot of it I was really talking about that little Facebook share icon and that stuff yeah if you're getting it stuff like that then you're obviously running to performance issues and when you're doing animations and graphics then it's completely different rules sometimes things make no sense at all to be quicker that's how you just have to do it so you may be better off using well GL or canvas or something else like that but it depends exactly what kind of stuff you try to do there's no simple animations hard on pretty much every platform like file size again or small as possible so the ones I include directly into my code are usually very small couple hundred bytes to maybe two kilobytes or something there are some guides out there for how to simplify your SVGs like sort of avoiding certain declarations and how you actually edit them in the first place they can make a massive difference in terms of bite size I would strongly recommend just googling something along those lines optimizing SVG for the web and not as in post-process but even in the actual editing stage well like you've got exactly the same logo that's designed well or badly the bite size can be massively different and there's usually there's a lot of stuff you can do if you have someone else's work to make it better combining paths bringing different doing the gradients properly and things like that so yeah I strongly recommend you read up on that it's too much to explain quickly but there is a lot that you can do actually I think you can get the largest savings from actually working on the actual SVG file itself because if you are using like for example you're converting it from a raster image to a SVG image programmatically you end up with a lot of unnecessary points so I don't know if there is an automated way to clean it up for me personally actually go into Illustrator to do the manual cleanup if anybody has a better method sure please share with our friend here but I agree with Chris they are a lot of people who actually do this at a very professional level in terms of optimizing SVG because you will see some sites they do a lot of SVG animations and those SVG themselves are quite complex but yet the file sizes are reasonable it's because the SVG files themselves have been optimized at the Illustrator level and not at not when you are actually building the website so I think there's a lot of savings that we actually skip over because we are not the designers we are not the people who actually created the assets so so so that that that's something you maybe want to look look look into and anyway segway into the plug for