.CSS Minify [Trick]

by donscream - 19-10-2015, 05:29 PM
Novice
Posts:
26
Joined:
Oct 2015
Likes:
0
Credits:
13
Reputation:
0
2 Years of Service
#1
OP
Posted: 19-10-2015, 05:29 PM
Hi,

Im going to make a tutorial for web-language .css how to minify.
The reason i wanna do this is because we can make with this the .css read faster then normal.
There are just some simple steps todo when you know how to do this will it make it more fun to edit you're ow .css

___________________________________________________
Step 1

This is a example how the normal .css will look like.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-color: #d0e4fe;
}

h1 {
   color: orange;
   text-align: center;
}

p {
   font-family: "Times New Roman";
   font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

Well u see that there allot of space is in it.
And you're website will read the spaces too.
So let's delete the spaces from this .css script so the website will read it faster.

Code:
body {
   background-color: #d0e4fe;
}

h1 {
   color: orange;
   text-align: center;
}

p {
   font-family: "Times New Roman";
   font-size: 20px;
}

So what we do is make this .css into this.

Code:
body{background-color:#d0e4fe;}
h1{color:orange;text-align:center;}
p{font-family:"Times New Roman";font-size:20px;}

You see there no spaces in this .css

By this step we have created the .css to read faster then when it reads all the white spaces.

Example: you have a .css file that is 1000 characters long.
There allot of white spaces that you're website reads before it is on the end of the script when you load the .css
Now delete all the white spaces and you can reduce the 1000 lines .css script to 500 because of removing the white spaces....

So instead of you're website reads 1000 lines it reads now just 500........ Uhm so this means you're website read less then it normal should be... so it will read faster

Okay let's go back to the example script.....
And after removing all the white spaces it will look like this.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:#d0e4fe;}
h1{color:orange;text-align:center;}
p{font-family:"Times New Roman";font-size:20px;}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

So from 26 lines to 14 lines......

Less white spaces less to read and faster loading....
Active Member
Posts:
220
Joined:
Jul 2015
Likes:
13
Credits:
341
Reputation:
3
2 Years of Service
#2
Posted: 27-10-2015, 05:44 AM
nice idea, i have try something now
Isn't this signature cool ? Heart
Freak
Divine
Posts:
3,333
Joined:
Jan 2015
Likes:
240
Credits:
4,352
Reputation:
127
2 Years of Service
#3
Posted: 03-11-2015, 02:22 PM
Why on earth would you add CSS on the same page? Make an external stylesheet.
Won't be active here anymore.
­
Posts:
4,296
Joined:
Jan 2015
Likes:
122
Credits:
6,105
Reputation:
100
2 Years of Service
#4
Posted: 03-11-2015, 02:37 PM
(03-11-2015, 02:22 PM)Nasyr Wrote: Why on earth would you add CSS on the same page? Make an external stylesheet.

Much easy to use a separate file too imo
Junior Member
Posts:
74
Joined:
Nov 2015
Likes:
2
Credits:
142
Reputation:
1
2 Years of Service
#5
Posted: 03-11-2015, 02:44 PM
(03-11-2015, 02:22 PM)Nasyr Wrote: Why on earth would you add CSS on the same page? Make an external stylesheet.

Because google is a cunt and everything above the fold needs to be within the html file - everything else can be external.
Minifying your code gives you a better rate. For everyone who actually is coding much is using a plugin for sublime lol :D

Nice try op - but i am coding my css well formatted same for other languages. As soon as i am finished i am going to use said plugin and minify it.
Enjoy reformatting more then 3000 lines of css lmao
Novice
Posts:
35
Joined:
Nov 2015
Likes:
1
Credits:
0
Reputation:
-6
2 Years of Service
#6
Posted: 07-12-2015, 07:42 AM
Yeah Sublime has indeed a great plugin for this like Bar said.

For people that do not have these plugins you can use http://cssminifier.com/ super easy and fast.

Just make a mess and this minifer will clean up.
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)