Deployment OOCSS easily with SASS
single,single-post,postid-16866,single-format-standard,,-,ajax_fade,page_not_loaded,qode-theme-ver-5.9,wpb-js-composer js-comp-ver-4.3.4,vc_responsive

Deployment OOCSS easily with SASS

10 Aug Deployment OOCSS easily with SASS

Deployment OOCSS easily with SASS

What is OOCSS?

Before I instructions also reiterate a little of this technique. OOCSS technical means clustering more elements available to common use CSS section if it has the same properties. Then in each sub-element, we can add personal style to it again if necessary customization. The example below isn’t to use CSS OOCSS:

As you can see between .box1 and .box2 it has exactly the same properties as the width, height and float. So instead of rewriting in every element, we can gather it into a common class and then in the private class you can just add the background to it only.

First, we must change the HTML to use two class.

And now we will need to write CSS towards OOCSS as follows:

Look it smarter and leaner, right?

Or you can write into this type if you do not want to use multiple class.

But like I said above there then, how can you imagine in your project how many elements of the same attributes, and each write CSS code you have to retrace her to put it at the appropriate location? Which is a nightmare!

OOCSS easier with SASS

Instead of having to go probe their projects OOCSS writing, or spending too much time planning, you can make things easier for SASS. You just declare% name selections for each object in a certain file as _object.scss such, then import the file into your main CSS and then proceed to inherit it. Type this:

And when it looks CSS like this:

As you can see, the class .box1, .box2, .box3 and .box4 were grouped again to use the same CSS using @extend. This it is like you create a class name box and then shared for the elements but if used, we should use this SASS will be a lot better.

Just that, very simple right? And like I said above, you should put video marquees %name declared in a separate file for easy management later.

Good luck.

hope this article will help you, thanks!



Jenny Tran
No Comments

Post A Comment