 So today I will be talking about Scalibur's printed architecture. I put the word print time to make it fancy. It's mostly about CSS and it has no... I mean, I won't be covering JavaScript and stuff. Hi, as Xavier has already introduced, my name is Praveen. I'm also known as Asraward Twitter. I generally chat about bad coding practices and make one of these UX words. And I work in a company called Punissa as a research upper. Okay, how many of you here write CSS as part of their job? Okay, almost. So how do you find it when you've been a big, large team and you've given a project which has been written by someone else and you get those CSS files and it's housing key general. What do you do when you have a project? Generally you look at the code, feel happy and you say how such an awesome developer he is or generally you start up with the... So generally it happens that in large teams some of the developers might not write the CSS properly. Okay, they might be using the send and selectors which make our lives very difficult. This happens in most of the time. Whenever I see a code I just... First thing is I first start a developer then I defect to the code then I start up. We all follow web standards, right? I mean, I write semantic... Pardon? We write... Okay, but mostly we try to stick to the web standards like writing a standard semantic HTML then, you know, writing properly, separating everything like CSS, separating a separate file all JavaScripts in a separate file is HTML. Okay, so what happens in the league? Whenever you start off the project we feel okay, first project I'll start off very nicely. I'll, you know, it would be a good example of well-meaning CSS and stuff. But slowly as the project grows, the CSS grows to the side and it becomes unmanageable. The CSS best practices, so-called best practices, right? Not to use more classes. They call it class against. And what all other CSS best practices are there? Anyone? What's your favorite CSS best practice? Okay, you don't defect to CSS. So that's the basic thing? No, I can't talk about that. But who's on how to write class names? Don't mean classes answer the nation's questions. Okay, so generally we are asked to write classes that properly, you know, defines the content, okay? That's considered to be a best practice. But what happens is that is not reusable. Suppose you have news content. Then you give a class about news, fine? And you have the same style to be applied to some other block. Then you cannot use that news no more. Because that is not for that news content. So these CSS best practices, so-called best practices, they encourage what the programming world will call out that. Yeah, see, suppose you have a news content. You are using news class. In future, you have another block, which has updates. Which is not related to news. But using the news class makes it a little less meaningful. Well, it's a styling solution. Yeah, so using that name and talking about that name, news, is no longer scalable. I mean, it sounds very funny. We have updates and it's called news. We don't have any consensus. See, CSS is often contextually ungradable. So what I mean with this is, you have descent and selectors, right? So you might have seen most of the cases. You have a sidebar. Then you have a specific module, different modules. Then for each header in a module, you say .module.http. Then you write the rules. So what happens is, all those rules, they are specific to that sidebar. If you have to move that content anywhere else, then that won't apply. So it's the problem. Then CSS engages overrides. You might be knowing this. Yeah, any question? The worst part is it increases that coupling. Let's take this as an example. Okay, we have a sidebar. Inside the sidebar, we have a specific module, which I wrote modular. Then I have a heading and a content. And if you use this selector as sidebar.module.http. What's happening is, we are making an assumption that every module would be of the same form. It will always be extreme. And suppose, in other contexts, semantically, it makes sense to use X2. Then this selector no longer is useful. This is not scalable. So in order to make code more scalable and easy to organize, there is a methodology for object-oriented CSS. This was developed by Nicole Sullivan. And when I say object-oriented, there's nothing to do with object-oriented programming as such. Here, we treat every HTML component as an object. The main principles are separate structure and content. And separate container and content. Structure and screen and container and content. Okay. I think this is how we generally use this thing. We have a class for the structure of that object. So that can be used. And if you have any changes that needs to be made to that object, we can extend it using a class, which I call it here, a skin class. Similarly, face and extend. These things come from object-oriented programming paradigms. You can call it. Okay, now let's come back to our biggest example. We had a sidebar, same thing. But instead of using an X3 selector and preselector, we have made it generalized. We are using a class called HD for the header and BD for the body. So that if suppose we, in some other context, instead of X3, X2 makes more sense, we can say that we use X2, use the same class. They're still usable. If you see any problem in this selector here, .mod HD, .mod BD. They might be problem. Unnecessary class. Unnecessary class. At first it seems it's unnecessary. But you know, this makes it more... See, what is more flexible? Suppose we have another X2 or X4 in the same place, then instead of the previous thing, we would have written .mod HD, .mod HD, and so on and so forth. So every time you add an HD by structure, you again change your CSS. That's not a good thing, right? I mean, it's tightly coupled. Yeah. In this case, In this case, In this case, In this case, Yeah, that's what we learn when we learn about CSS, right? We will keep the HTML constant and they keep on changing the CSS to redesign the site. But in the real world, it never happens. In the real world, you always change the HTML. These days, who writes HTML by hand? All of them, all of it is generated towards some content management system. So it makes more sense to have classes like this. You see the selector, it's not possible on the right side. Yeah. First, take all the Bs, then... All the Bs, you will look then to see if it's a correct kind of a problem. So this way, my style is not a problem. These are more... It is a performance also. Yeah. And yeah, as he said, ideally, in ideal world, we'll have the HTML constant changing the CSS. But I don't think... Show me one example other than CSS in garden, where we keep the HTML constant and keep working on CSS. I don't think so. Never thought of it. It's a pretty famous site by Dave Sheeran. Yeah. But there are very... Yeah, very specific examples, where the structure is very simple, like you have a header, paragraph, any age, and if the structure is not so complex, then it's fine. We'll be changing CSS most of the time. But if you look at most complicated websites, like, say for example, Amazon, Flipkart, we have so many modules. So if you have to change one particular thing, if you use the traditional way, like just keeping the HTML constant and changing the CSS, you might be affecting some other stuff also. This makes sense. Pardon? Yeah. And also, let's say we are not using these classes and we are just using element selectors. Let's say we have .mod h2. Suppose we have some other model here, .mod h4, and it has a different background, some different styling. Then you keep on adding... I mean, what we are doing is by using element selector, we are making attention that the structure is always going to be the same. So it would be a mod. There would be by 3 after that. It might not be nested inside somewhere. But in this case, it doesn't depend on this. This h2 can be nested inside some division or somewhere. But still, this thing applies to that. Yeah, but I still see some problem here. Can you figure out what the problem is? Yeah, if you have multiple paragraphs, you will have the same class. Yeah. When I have elements, like I said, .mod h2. Yeah, but suppose you have another mod, and there you need a different styling for the feedback. Then what would you do? In that case, again, you have to add a class. Then you have one more line of CSS. And suppose there comes another mod because of client requirement. Again, you have one more CSS. So every time you change the CSS, that's not proper separation. When we separate HTML and CSS, it should be like that. Just one of them should be constant. That was what we learned when we started off with CSS, right? That we won't be changing HTML, we will be changing only CSS. But that doesn't happen in real life. Every time the HTML changes. So every time the HTML changes, we need to come back, rework on the CSS. Again, look at it. Now, yeah, I was talking about some problem with this election. This election? No, I mean, if you want, you can use .mod and I mean, right now I don't have any background or anything, any styling for this thing. So I have interest. Yeah, one problem, what I see is this is specific to only this module. Okay. This H2, I mean, every element with HD class and BD class, it makes sense only if it is inside a mod. Again, I'm making an assumption that every element should always be wrapped inside a division or a container with mod class. So again, we are putting some constraint which is, we cannot freely move this stuff somewhere else. In the object oriented CSS methodology, we have this thing called double standard heading hierarchy which sounds very fancy, but it's something very simple to always do. Basically what it means, whenever you define a heading, because this one we use only for heading that is H1 to H6, whenever you define a style like a room for heading, you define the same thing I mean, same room for a class. Let's see how it would look. H1, .H1 and similarly H6, .H6. So this makes it more reusable and flexible. Suppose in this case we don't rely on the semantics of this S2, S3 and stuff, right? Suppose in some place I want H1 to have the styles that are written over here but in some other page, as per the semantics in the document, the H1 comes in the top but it needs to look somewhere like H3. It has a similar look of H3 then directly we can use .H3 and still the code would be semantic because we are using an H1 tag and since, you know, classes have more specificity if you use an .H3 that would overwrite, that would take more procedures. And whenever you design a website I don't think you would need more than 6 headings. If you count Hmax will be 6. If there are any procedures, you can just add one more class and be done with it. Good question. What happens if you add in H1? We add in H1. So if people talk to you just keep on H1 and say we are heading to H1 which is the private sign. The reason I am using it is to have a default sign for H1. So if I have an H1 and if I don't assign any class to it, by default it should get some sign in. So these are the default and you are giving the same styling to other classes. So here, these are not limited only to headings. You can, if you want the same look for a paragraph you can do the same class. So just by defining 6 things you can have any number of combinations going on. Then one more interesting thing that comes from auditory CSS methodologies, media object. Media object is a very simple thing. It has an image on the left with some descriptive content on the right. If you look at Facebook look at any comment, any update, your friends, avatar box yeah for example anything, you have an image on the left and some content to the right. So by looking at that thing what you can assume there is always an image which floats, image floats. There is some content to the right. This is always constant. So this is something you can extract a separate object and you can keep it to the image. How do you do this? Okay, this is what I was talking about. This is how a media block would look. Most of the time it has some media on the left, content on the right. It may happen that you have media on the right and content on the left though. This is something I took it from Flipkart. If you look at Flipkart on the right most sidebar, you have these two blocks. So what I did I copied the same whatever Flipkart wrote I did a change in it here and this is some so if you look at the layout and look at this UI you have two blocks which almost share same styling they have something on the left some numbers on the left some content on the right there is a read module but if you look at the marker by the way I am not trying to find faults with Flipkart this is just an example we have FKS module this is fine right? Yeah, fine. So we have a class FKS module I don't know why maybe because of the way the HMK engine they get they have a box replacement then body then the unit this is a really good thing they have extracted all floating objects as units so whenever you assign a class unit that gets loaded and the last unit generally we clear the float and most of the rest then we have a text text2 again there is now if you look at the second thing second box it almost looks similar but look at the fourth here we have directly two blocks cell1 cell2 and for cell1 again they have text1 text2 there is this header link and if you look at CSS this one is for the first module FK box replacement dot text1 FK box replacement dot text2 so what's happening here is again we are making assumption that anything that has this type always is always wrapped inside the specific class the container with the specific class so once we take it and move it to some other division or some other container and that means lost I mean if you just take the HTML module somewhere else look suppose use the same HTML put it here but we are not recruiting anything out of the CSS actually it's as good as styling as good as inline styling almost so what we can do is just again go back to the exact look at this just observe what all other stuff is being repeated okay so I kind of modified this this might not be ideal one but just for the sake of this demo I have done this I am using FKS module just because we have used it inside I have abstracted this entire thing as a media object so I call any component that has the media floating to the left and some content to the right so this is the media object inside I have a media okay this might be P, that might be P, X2 whatever doesn't matter because I am using the class name here so it's very extensive if I use whatever element you want then we have media body media body is something that comes to the right then we have a header I have again specified X2 so that I can apply size to that X2 class then we have this more length and if you look at the second code second module again the same thing I have a media object I have a media media body X2 but the class is X3 because semantically it should be an X2 it's a little bit different font size is a little bit smaller so I have used an X3 there but more or less this is the original version using the abstraction if you look at the CSS file this is the original version which has around 131 lines the abstracted version within 78 lines we have set that code and just to demo how powerful this abstraction is I have made one more model here again it's a media there is a media, see in the previous example I had used this media on a p-tag but here I can use on whatever I want so I use it on image because there is one image on the left then I have a media body some heading content read module and if I look at this this didn't work much on this thing separately, we already have a component ready because these are the advantages of using following this object oriented methodology apart from head ins and media object we have fewer the stuff I personally didn't like that much like we have we have these selectors for all padding, margin whenever you want to give a margin of 10 pixels, you can add dot, mark, 10 but I didn't like that because I don't know it was as good as writing in line styling again so these are the good parts I have formed in object oriented CSS by the way if you have any queries right now you can start when you can need not wait for the Q and A no I can't see that whenever we use CSS we say we never do slugs, we do it on elements, yeah so I don't see but in that case since when we set everything to some model then we say CSS we say class, and then after that simple and complicated to work because at once I am not getting one it's totally not good that's the way it is again if you take one browser then it's like complicated but we have many browsers and the reason we are using CSS is to make it all yeah so anyway that doesn't interfere with this methodology because we are styling the elements in that and here we are just doing it on classroom and one more thing I have forgot to mention we won't be using ID selectors which is because ID selectors are very specific in nature so once you assign a style to an ID then it becomes difficult to override it if you have to override it again you have to use that band important thing and it's a nightmare like once you see the band important then you know we have this box there are two developers and they say ok my style has been over it and now I have to add one more thing specific to it then the other guy will say ok I will add band important, yeah it will not be done so these things happen we have one more methodology called smax, sma, css which stands for scalable modular architecture for CSS and it was developed by Jonathan who works in previously worked in Yahoo and now he is in Shopify it has the same philosophy basically the philosophy is to identify useful components assign classes to it reusing instead of and here also we won't be using ID selectors or descendants selectors and in this methodology it's based on categorizing the CSS rules so CSS rules fall under these five categories one is a base which is nothing but combination of preset and default look you want to give to a particular website then you have the layout for the containers then you have the module for the individual component then you have state this state when I say mostly you have something to do with a user being logged in or not or you take collapsed panels and then you can go all these things come under state so for assigning rules to this we use we use something like if hyphen or have hyphen that is active has border or something like that and finally we have a thin layer here we just change the typography colors and the background so what we do here is we show that a particular style rule that any particular style should affect only one of the five layers we shouldn't conflict with any other suppose you are styling a module then you should never be using an element class because the moment you use element selector it should be conflicting with the base so by ensuring this what happens is always properly well maintained and anytime you want to add something you will fall under one of these categories so there won't be any issues for this I think you know Peter Bootstrap is a very good example of following this problem in Peter Bootstrap we have we never have conflicting selectors for layout and a specific module in thing in public oriented CSS we have any variations it out depends like all that new developer who needs to know which class to do that he doesn't need to know how we are doing it right? we are just adding a class for every new thing we are designing so it would happen that we have classes for each and every possible element and later we could just make a string in match and create two components and maybe someday you won't be at this place at all we will be just adding classes for HTML and that to be we will just get requirements and we will see that what type of styling are we need to do right here we will just do it that's a very bad practice actually that's a very bad practice that we are suffering from that is called firebug driven development ideally we should never be using firebug by development it should be only for debugging mostly for JavaScript stuff if we are using firebug to make any changes to the UI when I say UI it's just HTML CSS then it's a bad thing so I think opportunity whenever a new developer comes let me know that these are the classes you need to add these are the classes available to you if you want if you don't find anything to get that styling just need to add a new class so we have a repository of all the classes and someday you won't be adding any more classes to the CSS so it would be like a framework we will just be using the same thing over and over we will have all the constable we will have 20 classes I don't think we need more than 4 classes mostly using 4 classes we have many populations to come up with when I have never seen more than 4 classes being applied to anything and moreover this is not something very new if you are familiar with jQuery UI and if you look at the HTML that gets generated in the runtime you have several classes attached to a single node so it's the same principle but we now have a fancy way and it's cool to say I call object-oriented series then I don't think it's a bad thing I don't think it's a bad thing it depends if your site is very huge I mean you have many different components and you cannot add different padding and margins in which way and maybe it makes sense to have classes for padding it would become consistent across when the design is perfect it is consistent across every element so that's fine but I generally don't feel like using that because suppose someday we have to change a particular module then we'll have to go there and remove that padding and that becomes a good work but it depends if you have very much website then that makes sense if you have very simple blog-like layout then you don't need an extra class for good help if you have a normal module selector then it's a more complicated class there is one more there is one more method called BEM which stands for block element modifier I haven't researched much into it but it has more or less the same philosophy identify a pattern identify a reusable component style it and mix and match different components and use so here unlike OCS we have a block so block in every page is a it's like a brick you take a transcription it's like a brick so you use those blocks and create a website one such example is a heavy block body footer instead you can have different blocks like blogging, search, whatever then we have an element the only problem here is these elements they have a meaning only when they are inside a particular block so they are not context free this is what I disliked about this methodology because these elements I cannot use these elements should always be used along with this block itself then we have a modifier which you add to change the styling that is given to this one the common thing in all is the way we look at the OCS architecture the moment you look at a design you write it down straight away start writing code first you look at the design and decide what all can be abstracted separately then what makes the component what is the stuff that I can reuse then we have these things are common across everything even if you look at we had element-agnostic selectors we never used element selectors at all we always used class selectors because that can be assigned to any element you want then we had context free selectors except for BEM for other two methodologies all of them have the same goal that style should not depend on the markup in the structure of the markup it should be independent so that you can drag and drop it anywhere if you have any doubts let's see let's see the free process when you know that so I think see every block like medium block is but if you want the proper independent instead of depending on a particular class if you want to use the media object separately then you are here clearing the quotes on the beat object generally what we do we add a class, we add things or something and it will be done quickly but in this case you can have a mixing class and use it on every element here it's a bit so that if you give this resource to a developer you can directly copy the state instead of including all the entire state that's what puts that place you can just take away one small thing and that directly works instead of including the entire state that's where I think we also should work well in this method class I think is a little bit faster like passing, passing, passing you can directly generally it works well with this methodology if you follow this methodology and then try to use class or less it would be more more maintainable and the generated code is good right now what happens is if you don't know how to write maintainable CSS then what you do is you keep on writing all the things and maybe it's maintainable from the back end but once the CSS gets generated that's a real mess look at it so you think it's an unwritten state you can have the same thing it's wherever you have manual work like you are repeating something basically you can make use of pre-poster to do that because I think stuff like that are made for machines to do it so we can also do the pre-poster I have seen few benchmarks and asked for that and actually what happens is if you use a class for the first time when the browser creates a renderer it will use that class and if you use the same class next time it takes very less time to create the renderer so it's actually a popular bonus for usable classes because that's how Cascade works because the browser has built science sheets already we have other science sheets again we have been said to have science sheets coming from the JavaScript plug-ins but yeah it doesn't make much problem in the commerce once you compress the HTML with everything then everything calls on to the same thing you won't notice any performance changes so if you have to drag a new project it will be too big for Cascade if your friend has never used Cascade it simply started using less but that too for only few things like branding just for the variables for branding and I follow object oriented CSS methodology so whenever we have a new design I don't write away start coding I look at it figure out what all patterns what all objects will be abstract and doing that really makes it easy for other developers because I had an experience after doing that another developer came into the project and he found everything was already written so all he needed to do is just close classes and make a new component one good thing about Cascade is it has I think it's used with compass we can make sprites and media data URLs and other stuff maybe that's good I have never used it okay thank you