Mastering Cascading Style Sheet - Structuring Your Code - Planning, Organizing and Maintaining Style sheets

  • Posted on: 31 May 2017
  • By: Hernando Cadet
css3 planning

The world of computers is amazing, but you know what makes it, even more amazing, is the fact, that the world of computers, was transformed, into the world of THE INTERNET.

In today’s article, we are going to talk about CSS3, in particularly how a web designer plans, organize and maintain your style sheets.

The CSS of a website, becomes harder to manage, when the website, is very complicated and is graphically rich, all throughout the website.

When a designer is faced, with such a task, he/she must learn to find better and efficient ways, to manage the CSS3 code, and split up files into multiple style sheets, by grouping styles into logical sections.

Also to make the code easier to read, comments are always advised to add to the style sheets, which can become very complicated to follow, after a while.

When styles are to be applied to a document, these styles, can be added directly to the head of a document, when the styles are placed between, style tags, which would look similar to this:
 

<style >
h1 {color:red;}
p {color:blue;}
</style >.


This way of adding styles however, is not as efficient, because a front-end web designer, would have to change the same styles of two different pages, in two different places, when set styles, would need to be changed, for the pages.

Fortunately for front-end web developers, they are able to include an external style sheet, into their (X) HTML documents, so that their styles are in a more centralized location, to manage them better.

A front-end web developer, is able to either link, or import style sheet this way:
 

Use of @import
<style type="text/css">@import url(Path To stylesheet.css) </style>
Use of Link
<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />

There is really no difference between this two ways; but in theory, the only difference between them is that @import is the CSS mechanism to include a style sheets and

the HTML mechanism.

However, browsers handle them differently, giving a clear advantage in terms of performance; therefore is widely used among front-end developers.

If a front-end web developer, wanted to hide complicated, style sheets, from older browsers, then he/she would use, @import, because older browsers, have a hard time understanding, @import.

Styles sheets, don’t have to only be imported, into (X) HTML documents; style sheets, can also be imported into other style sheets.

A front-end web designer, can link a basic style sheet to the (X) HTML document, and then link the more complicated style sheet to the basic style sheet.

All of this is done for the sake of planning, logic, organization and most importantly, performance.

A front-end web designer, can then manage all style sheets, in one place, and help him/her remove some complexity from the (X) HTML document.

It is important to know, that the rules in a linked style sheet, would be overriding rules, which have been imported.

Therefore, a front-end web designer has to remember to, write the imported rules first, or they may not work properly.

A front-end web designer, should also remember to not over do, the import of style sheets into another style sheet, because it could render things very complicated, and it is not well supported among browser also, although it is possible to do.

Thank you, for reading this article!!!