Important Tips to keep your CSS tidy
When you start working on larger stylesheets and big projects, you'll find that managing a massive CSS file can be difficult. In this post, we'll take a brief look at some of the best practises for writing your CSS to make it easy to manage, and some of the ideas you'll find in others to help improve maintainability.
Here are few basic tips for how to arrange and clean up your stylesheets.
1. having a coding style guide in project
If you are working on an ongoing project with a team, the first thing to search is whether there is an internal CSS style guide in the area. The guide in Team Style should still prevail over your personal interests. There is always no way to do things right or wrong so continuity is crucial.
2. Keep it consistent
If you should set the project rules or function individually, the most important thing to do is to keep it clear. May continuity be implemented in all types of ways, such as using the same naming conventions for classes, using one type of colour definition or, for example, retaining consistent formatting, can you use tabs or spaces to indent the code? If spaces, how many common spaces?
Getting a set of rules that you often obey decreases the amount of mental overhead necessary when writing CSS, since some of the decisions are already taken.
3. Using White Space For Readability
There are a few forms you'll see CSS formatting. Some developers have put all the rules on one line, like this:
.header { background-color: black; }
h2 { color: white; }
Most developers tend to split it into a single line:
.header {
background-color: black;
}
h2 {
color: white;
}
CSS doesn't care which one you are using. Personally we find that having each property and value pair on a new line is more readable.
4. Comment your CSS
Adding comments to your CSS will allow any potential developer to collaborate on your CSS file but will also assist you after a break when you return to the project.
/* This is a single-line comment */
/* This is
a multi-line
comment */
A smart idea is to add a block of comments in your stylesheet between the logical sections too, help you easily find various sections while browsing over, or even give you something to look for to jump straight into that part of the CSS. If you use a string that would not appear in the code when looking for it you will switch from section to section — below we used {{ Start/End }}.
/* {{ Start Header }} */
...
/* {{ End Header }} */
...
/* {{ Start Main Navigation }} */
...
In your CSS, you don't need to elaborate on every single issue, since much of it would be self-explanatory. What you need to comment on are the stuff on which you make a clear decision for a cause.
body {
font-size: 2em /* 1em = 10px */
}
5.Break large stylesheets into multiple smaller ones
Especially in situations where you have very different styles for various parts of the web, you may want to include a stylesheet that contains all the general rules, and then smaller ones that include the unique rules required for those pieces. You can connect to several stylesheets from a single tab, and the usual cascade rules apply, with rules in stylesheets linked later matching rules in stylesheets linked earlier.
For instance, as part of the web, we could have an online shop, with a lot of CSS that is only used to format the product lists and forms required for the shop. Keeping certain items on a separate stylesheet, or referred to on shop websites, would be smart.
This will make keeping the CSS structured simpler, which also ensures that if many people work on the CSS, you can have less instances where two people try to work on the same stylesheet at once, resulting in source control clashes.
To Sum Up,
In the nature of an in-built entity, CSS itself does not have much, but you need to do the job to generate continuity and guidelines for how you write CSS.
