Why should CSS file size small?-CodePudding

Why should

css

file small? and why we must remove unnecessary characters and don't repeat code? is that just for load time, or there are other reasons?

CodePudding user response：

There are many sub-questions in your question, so let's try to answer them one by one.

Why is small file size recommended for CSS files?
Small file size means the browser running on the client-side will be able to download your file much faster. Therefore, the styles specified in your CSS file will be applied faster to your website. This improves performance, user experience, and SEO - since search engines ranks sites with faster load time up in search results.

Why is it recommended to keep the code modular?
Modular code means separation of functionality into small blocks of code that can be repeatedly applied to any HTML element that needs those styles. Bootstrap is a modular library. It has defined classes with relevant styles - for example, btn, which you can apply to any of your HTML button and those same styles will be applied to both. This helps to make CSS file size smaller, since, redundant code is not repeated multiple times - it is referenced multiple times by elements that has its class name on them. Plus, it improves readability of your code drastically, since any developer working on your project will quickly be able to understand what CSS styles are available for each class, and where each class is used in your HTML file. Also, it makes maintainance of your code easier. For example, if you wanted to apply some border-radius to your btn class you can simply type it once, and all HTML elements with this class will have border-radius applied to them - so it saves a lot of typing.

Is it just for load time, or are there other reasons?
So to some up, having smaller and modular CSS file:

Lowers load time for your website.
Improves SEO, since lower load time is a huge factor for SEO.
Makes code easier to read, maintain, and improve.
Enhances user experience, since stylesheet is applied faster.'
And so much other good stuff.

CodePudding user response：

Usually you want to keep code as small and as clean as you can. if you can create something using something you've already made there is no need to duplicate it. It might not be a huge deal in small projects, but when you're working on lage projects with thousands of lines of code, especially if your working in a team it is important to do the following:

Write Comments on code to help teammates easily locate/understand logic
Make sure your code is organized, what this means is removing messy / unnecessary code, and not having mutliple functions / lines that do the same thing.
Follow proper formatting, if your alone just make sure to stick with the same format you like in your project, but if your in a team you'll need to follow that teams coding format.
Clean and readable code allow you to more easily debug code, and add new features to specific areas of the application and or program.

Here are some examples:

Example of clean well documented code with proper formatting and information

EXAMPLE OF CLEAN AND PROPER CODE HTML / index.html

<html>
<!-- This is a comment -->
  <body>
  
  <!--- We create a div tag to more easily organize the information we want to display -->
  
     <div id="main">
     
         <h1 id="header">Hello World!</h1>
         <h3 id="description">This is just an example of what to do</h3>
         <p id="text"><b>This code is clean, and readable which helps you more easily 
         debug your code if you need to.</b></p>
         
     </div>
     
  </body>
  
</html>

CSS / style.css

/* Importing font, you can ignore this */
@import url('https://fonts.googleapis.com/css2?family=Yanone Kaffeesatz:wght@200&display=swap');

/*This is a comment for CSS */

body {
  background-color: #363062;
}

/* No need to have multiple lines for the three different tags we can just do it in one step */

#main{
  color: #E9D5DA;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

JAVASCRIPT / script.js


//comments help others understand whats going on.


//Here we create a listener and we wait for user to click on the header id / the Hello World!
document.getElementById("header").onclick = () => {

    document.body.style.backgroundColor = "#FFFFFF" //Color of background gets changed to white
    document.getElementById("main").style.color = "#4D4D4D" //color of text gets changed to grey
  
}

Example of unorganized code with duplicates

EXAMPLE OF UNORGANIZED MESSY CODE HTML / index.html

<html>
  <body>
     <h1 id="header">Hello World!</h1>
     <h3 id="description">This is just an example of what to do</h3>
     <p id="text"><b>This code is clean, and readable which helps you more easily debug your code if you need to.</b></p>
  </body>
</html>

CSS / style.css

/* Importing font, you can ignore this */
@import url('https://fonts.googleapis.com/css2?family=Yanone Kaffeesatz:wght@200&display=swap');


body {
  background-color: #363062;
}


#header{
  color: #E9D5DA;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}
#description{
  color: #E9D5DA;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}
#text{
  color: #E9D5DA;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}

JAVASCRIPT / script.js


document.getElementById("header").onclick = () => {
    document.body.style.backgroundColor = "#FFFFFF"
    document.getElementById("header").style.color = "#4D4D4D"
  document.getElementById("description").style.color = "#4D4D4D"
    document.getElementById("text").style.color = "#4D4D4D"
}

All that said, if your programming for fun, and your enjoying it, do whatever makes you happy. though as a programmer i do have to say, you will pick up bad habits if you plan on building larger scale applications or even working for companies.

Just remember coding should be fun! hope this helped you out, if you have any other questions feel free to send a comment! :)