Organize and optimize your CSS code in your projects
I'm going to tell you a little about how I've set up CCS for my project at DesarrolloLibre in case you're interested and can pick up some tips in case you have a similar development or want to know how you can organize yourself. I'm simply giving you the way in which I consider to be the best.
Tip One, Check how many modules your application consists of
So the first thing we have to keep in mind is how many modules the application will have. In my case, it has three modules. You could say one is:
- The Academia website, which I consider to be an additional module or a different module to the blog, since this is a Vue application, although the technology here has little to do with it, because we are talking about CCS. In the end, simply because of that fact, I consider it a separate module, apart from the fact that it does not have the same links and is organized a little differently.
- The other is the blog, of course.
- And the other is the management module, which is where I manage the content of the application.
Here, in the dashboard, I use the CKEditor plugin, as you can see, a plugin that requires additional CSS, just as I explained to you in the course, to show the bold, the titles, the ULS, and all of this that is here because Tailwind breaks it, so here we have additional CSS that I will not have, for example, here on the blog, since I do not use the CKEditor plugin anywhere else here.
Tip Two, Check which designs you are going to manage by modules
We can already see a distinction regarding these two, even though it is as it is for the end user, then I really do not have a very different design, it is basically the same as we have here only that well here I am going to remove the dark mode, for the rest it is practically the same, it is simply another organization for the links, another background color but it is a very similar design that is worked with Tailwind which I hope is like that because if not it does not make sense for you to see this video a lot, you should know that here we are using a grid system and such and we organize here our well our content, including here I am using, notice that some similar fonts with what is the underline here below and little else, so really there would be two, the one on the dashboard for what was commented before, especially here for the CKEditor and any additional thing that I am going to place so that the design does not break like this and what are these two modules that again although they include different technologies, it could be said that it is the same design at least for me. If it were different for you then it would be an additional module like the one we have here, then with this clarified.
So many CSS per modules or layouts
Now we can know how many cs files we are going to create one for the dashboard that in my case I called it app Here I have it repeated I really have to see which one I am using in the end since I do not remember I think it was the Well I have to see but in the end in both the caditor is found as is You can see this is the ccs that I always use for the secadito I could place Tailwind rules here But well that is something else but this would be account that this is the same then here I would add the ccs that is specific for my dashboard module that I am not going to need in the blog module so as not to mix things up so well here again whatever you want to put there the next one would be the blog module in which I am going to place the design for the h1 p ul ul images and so on then a little bit of what you can see here and another that would be the base since in the end as it is the same application we are going to have similar designs, that is, I want to use the same typography in my particular case I am going to use
File for common CSS
Here also a design similar to the buttons, the same color palette, well in some parts I use it, for example here again here I have the design a little broken since it is the dashboard and I have not finished arranging it but here you can see that they are buttons similar to the ones we have here, which is exactly what I want, therefore they are common designs, how do we do to be able to inherit it easily instead of copying and pasting, directly injecting the blog file here, the whole style is broken since even though it is here I am going to want to handle a slightly more sober style, not placing, for example, these underlines and others, I do not want them here again because it is a slightly more sober design without so many good ic cones and others, well we place it here directly in another file that would be the common one and which I call base. css and here I add the design, for example for the letters, the behavior that the links and others will have in my letter design, here I also have the buttons and others.
Summary until then
A summary here in the base I am going to place the design that is common to both modules as you can see everything that I am going to use that in this case would be for example the buttons then from both that are the designs or the exclusive assets for both modules here I import it through the import tag that we have in css here I place the base one and here a bit the same this is the blog one and here the same here I place the base one and therefore I am inheriting this design that is common between both well between both platforms or both modules that we have:
resources\css\blog.css
@import 'base';Here and otherwise I have the specific design in which I want to give you another little tip before that I always had a lot of problems with that especially with the subject when I'm working with the images before what I did was here create like a label called post here I have placed a specific design, that is to say I did like with a module within another module what is a post for me since you remember that this is a blog post for me it was basically this publication therefore here I always tried to change the style a little bit so that it was different from the rest of the page, for example the one of the lists and so on. Once I do this I don't even know why I did that but I don't recommend it to you anymore.
Tip Three Designs from the root h1 YES post h1 NO
The organization that I would recommend for your modules is to grab them directly from the root, that is to say, you directly apply the design to the h1, h2, h3 and so on, that is to say, avoid doing this because this will ultimately complicate your existence a lot because you will define some specific styles in this way but then you will want to define them more specifically in this way, then you will surely touch, for example, different margins, different positioning and this in the end will be a tremendous problem because they will start to be overwritten, so sometimes the styles that you are placing here are overwritten or sometimes the styles that you are placing here from the root and apart from the fact that everything remains very disorganized, then the first or the final recommendation once I have clarified how my scheme is to work with the modules based on CSS is that…
Always try to define the styles from the root, this is a copy as you can see it is not the one that I am using and here I show you a little of the final CSS that I am using, which is to grab designs from the root, that is to say, without placing post section or anything here, everything from the root and I try adapt it as best as possible based on what was explained and you can see it here directly h1 p ul ul l a little more here Well obviously I want a specific design in this case to change the typography, be careful that this is not what I mean what I want is that you are not placing content for example here that you place something in content here an h1 then later you get annoyed here you define another one for I don't know post and so on try to avoid this but rather make a design that is common for everything and if it is still not possible like that Simply work based on components either based on Vue or directly based on iware components or directly the lel or whatever or whatever technology you are using and make those components there but avoid making this mess in CSS because in the end it will be a nightmare for you to be able to manage this file and well to show you a little quickly CSS that is obviously common and you can download it from the Libra development page you can see it from there of course and here they are like who says components that I need specific since like any development.
CSS for components Yes, NO for root
In this case I require some components that are specific in this case to add in this case to add spacing and here is also a bit of what was mentioned before I consider this well again the problem would be if from here you placed something similar to this that this can already cause you quite a few problems since these are specific designs that you can decide when you use them therefore this would be optional but if you define it this way it will be mandatory since this tag would be within a template or a layout, that is to say a view within your development then here you can see that everything is again from the root and in this way it is the mechanism that I could use to have the css organized:
resources\css\blog.css
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
@apply text-gray-800 dark:text-white
}
h1 {
font-family: ProtestGuerrilla-Regular;
@apply relative
}
***in my application and in case you're wondering to close the matter a little bit about this that says Well as you can see I have here the main element which would be the h1 and here I created a particular class that is to paint something green here This is to place these little things here which is to make the so to speak content a little bit more pleasant to read although in the end nobody reads this because nobody likes to read but it's a little bit for that obviously I'm not telling you that this is the most beautiful design in the world I'm still working on this but well I'm going little by little on the way and I'm simply showing you some progress and here you can see the spaces that I'm placing based on the spacers that I had up there and here you can also see it again here I had to adjust it a little bit so that it doesn't make so much contrast but I think that the design is turning out a little bit more pleasant than how I had it before in the end I have to place some videos and images here but there I'm going little by little so that would be the recommendation that I could give you.
Common size for image and containers
Another important point that was another problem I had here to finish that I just remembered was the blessed image because this above all was the subject in which I had too many problems and it was more than anything because of this that I created as who says container in this case always the so-called post was because I always handled different sizes here for example it is a with full here notice that I am already placing a max-witdh:
resources\css\blog.css
img {
@apply rounded-sm shadow-lg mt-4 mx-auto my-4 w-full;
max-width: 500px;
}Down there but in other parts it required it to be another size that was precisely that was the nightmare then for example to be able to work a little with different sizes of images in your content here again what I recommend is that you do not implement it directly in the ccs because again it will get quite twisted Or at least that you do it based on classes that is to say image point middle size or something like that then you define half the size or a third of the size or whatever here I would always recommend is that you define a maximum size for the image and simply play with the container in this case my images are always set in a container orora in this case I am using a grid and here we have the container therefore this image if we see here the css that I have applied to it always has a wid of type full but it also has a mawid that in this case I have defined it as 500 px to avoid it from growing enormously and basically occupying almost the entire screen and in the end the person who wants to read your content is not interested in the image but in the text then the image would simply be a representative little thing that can be in accordance with its value, that is to say something small that is simply a visual aid that we have there, then that is a little bit also there what is recommended with the image. In short, define a maximum size and that it is again common as I have it now here to all your content and if you need to change the size simply play with the container in this case again this would be the maximum size allowed forever including what would be the publication since here you can also see that I shrank it a little bit well I placed it at the end this depends on that everyone already has a video and I have another scheme here but I'm going to see if I find one here a very old publication here you can see that I simply now make it take up a little bit of the space and not take up the entire width and for this again I used what are some containers in this case another grid system so well nothing this was what I wanted to show you I hope you were able to at least consider something interesting anything you can also comment that you would improve what I just explained to you another trick or tip to optimize your ccs here and without further ado we'll see you in another video.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter