<p>Although it is important to write CSS that is correct, it is also a good idea to keep it readable and there are a few ways to do this.</p>
<p>As with a programming language such as Java or C, it is important to include comments, especially when it is not immediately obvious why you are applying a rule. You should also ensure that you are naming things in a consistent manner. There is an interesting blog post on this on the webdevstudios.com site under the name of <ahref="https://webdevstudios.com/2017/03/28/evolution-css-class-naming-methodologies/">Evolution of CSS: Class Naming Methodologies</a>, by Damon Cook (March 28 2017).</p>
<p>Consistently formatting your code is important as well, because it makes CSS much easier to read. The format that I prefer is to have the selector followed by a space and then the opening curly brace on one line. The rules associated with the selector follow on subsequent lines and are indented by one tab. The closing curly brace then goes on its own on the last line. This will look something like</p>
<preclass="inset">
.main_grid {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25% 25%;
margin: 30px;
grid-gap: 10px;
padding: 10px;
height: 300px;
}</pre>
<p>Another useful trick, which is not one I have used myself, is to organise your CSS rules according to the page flow. That is, rules applying to the header go first, rules applying to the footer go last and so on, so the order of the rules is similar to the order of the elements in the HTML code. Personally, I prefer to group rules by selector type so all the rules applying to classes go together, all rules applying to ids go together and all rules applying to elements go together. I don't follow this religiously, but one practice I do try to be consistent with is to keep the more general rules at the top since these apply more widely and will probably be changed more often.</p>
<p>It may be worth noting that if you need to find a rule for a particular element or class, its easy enough to do that. On the other hand, if you need to find out what rules are being applied to a particular element, say a <p&gr; element, it may be easier to find these if your CSS is well organised.</p>
<p>One practice that helps to keep your CSS organised that I do follow is to split up your CSS into different files. For example, I have one file to cover site rules, one to cover web development rules (rules applying to any web development pages) and so on. This is useful because having all of your code in one file can lead to a very large and messy file. Also, I mentioned before that I like to have different colour schemes for different topics, Web Development, Linux and so on and having a stylesheet just for these pages means that it is easier to apply styles on that basis. It also makes it easier to know, when there is a conflict between rules, which one is going to be applied. In general, I want to put some styles that apply to my whole site in one file and styles that only apply to Web Development pages in another file. In some cases, I may want to override a rule that I have in the site stylesheet so having different files can be useful here.</p>
<p>These are the stylesheets currently linked to this page.</p>
<p>The first of these applies site wide and the second applies only to Web Development pages. Since it comes last in this short list, it means that where there is a conflict, it is the rule in the Web Development stylesheet that will be applied since it is the last sheet in this list.</p>
<h2class="sectiontitle">Maintaining CSS with Version Control</h2>
<p>This course doesn't provide any help in terms of using version control. It really just mentions it in passing and points out that Git is the most popular version control system. It also mentions that there are some graphical tools for managing Git which I wasn't aware of but I do know that Dreamweaver can be integrated with it. I haven't really looked into doing this yet but it is definitely a useful tool and a worthwhile skill to have.</p>
<p>Again, the topic is just touched on briefly, but I am already quite familiar with these although I probably don't use them as often as I should. Including this section in the course, for me, just serves a reminder that this is a tool which can be very useful and is worth becoming more familiar with.</p>
<h2class="sectiontitle">Validating CSS</h2>
<p>There are a number of online CSS Validators available, the most popular probably being the <ahref="https://jigsaw.w3.org/css-validator/validator">W3C CSS Validation Service</a>. I don't use this very often. I will usually validate my CSS if there seems to be a problem with it that I can't trace. However, if you are writing CSS in a professional capacity, it is more important that you validate your CSS before releasing it.</p>
