Each site consists of structural, functional and stylistic elements. Cascading Style Sheets determine the appearance (appearance) of the website. These styles are kept separate from the HTML structure to make it easier to update and adhere to web standards.

The problem with styles

Given the size and complexity of many websites today, style sheets can get quite long and unwieldy. This problem is more complicated now that media queries for responsive website styles are an integral part of the design, ensuring that the website looks the way it should, regardless of the device. These media queries alone can add a significant amount of new styling to a CSS document, making it difficult to work with. Managing this complexity is where CSS comments can be an invaluable help to website designers and developers.

Comments Add structure and clarity

Adding comments to a website’s CSS files organizes sections of this code for the reader who views the document. It also provides consistency when one web professional picks up where another left off, or when groups of people are working on the site.

Well-formatted comments communicate important aspects of the style sheet to team members who may not be familiar with the code. These comments are also useful for people who have worked on the site before but not recently; web designers usually work on many sites and remembering design strategies from one to the next is difficult.

For professional eyes only

CSS comments not showing when page is rendered in web browsers . These comments are for informational purposes only. HTML comments (although the syntax is different). These CSS comments do not affect the visual appearance of the site in any way.

Adding CSS Comments

Adding a CSS comment is quite simple. Reinforce your comment with proper opening and closing comment tags

Start your comment by adding /* and close it */ .

Anything that appears between these two tags is comment content, visible only in code and not rendered by the browser.

A CSS comment can span any number of lines. Here are two examples:

/ * пример красной рамки * / 
div # border_red {
border: thin solid red;

/ ***************************
********************* *******
Стиль для кодового текста
*********** **************** /

Section break

Many designers combine style sheets into small, digestible chunks that are easy to scan while reading. Typically, comments appear in front of you, followed by a series of hyphens that create large, obvious breaks on the page that are easy to see. Here is an example:

/ * ----------------------- Стили заголовков ----------------------- --- * /

These comments indicate the start of a new coding section.

Comment code

Because comment tags tell the browser to ignore everything in between, you can use them to temporarily disable certain parts of CSS code. This technique can be useful when debugging or when setting the formatting of a web page. In fact, designers often use them to «comment out» or «disable» areas of code to see what happens if that section is not part of a page.

Add an opening comment tag before the code you want to comment out (disable); put the end tag where you want the disabled part to end. Nothing in between these tags will affect the visual appearance of the site, which will help you debug the CSS to see where the problem is occurring. You can then go ahead and fix just that glitch and then remove the comments from the code.

CSS Commenting Tips

Many coders include comment blocks at the beginning of any new code file. Mimic this strategy by adding a comment block with your name, relevant dates, and relevant information to help people understand the context of the project, not just make decisions about what’s going on regarding a particular block of code.

Похожие записи