Tips for working with your CSS3 style sheets


Once we have defined the structure of our website and have developed the SUN In a precise way, it is important to define the styles of the same, it is also the most creative area and in which you can customize with a greater degree of precision until the last corner of your website. Cascading style sheets are the most suitable solution, but for all those who are making their first foray into the world of web development, there are some tips that must be taken into account to achieve the best results.

To obtain a professional result typical of a consecrated front end, it is necessary to take into account certain aspects such as order, readability and the correction of the most common errors within this type of practice. I share below five tips very basic but at the same time very important for the treatment and optimal configuration of our CSS style sheets.

Make sure to establish an effective order and structure in your CSS3 style sheets

I always divide my stylesheets in a hierarchical order. In the first place I usually apply general selectors and then go on to add the declarations of the html selectors and lastly go to work inside the ids of the containers and minor elements. Basically ground follow the logic of the DOM and starting from the parents to end with the children. However we can also follow another formula or order, for example we can group our selectors and declarations taking into account their function. Everything will depend on what our preferences are and how we feel more comfortable working.

Choose clear and concise names for each of your selectors

There is something very important that you must take into account, and that is that CSS3 differs in the use of upper and lower case letters, so writing a word with a capital letter can mean something different and can cause errors. The easiest thing is to always use lower case letters to avoid this type of problem. Also try choose names for your classes and your ID's that are clearly recognizable and that they do not infer us to doubts or errors.

Don't forget to add clarifying comments

Surely you need to share your files with other people, perhaps your client or colleagues from your work team such as layout designers, other designers or developers. For this reason it is very important to pay attention to the structure and to ensure a clean and orderly finish. The clarifying comments will help anyone accessing our style sheet to quickly find their way around at a glance. Any type of observation that must be taken into account it must appear as content. Remember that you can include content both in your Html file and in your CSS file and that in both cases they are comments that will not logically be reflected in the final result and will only be visible when the source code of the same is accessed so they can be very helpful.

Always apply a reset in your style sheets

Each browser has its default style sheet, so to avoid any errors or changes depending on the browser in which our page is viewed, it is very useful and recommended that reset your stylesheets. There are several alternatives. Eric Meyer's reset stylesheet can be a very good option.

Choose the most effective tool

There are many tools that you can use to be as efficient as possible when working on your website design. From the creation of Wireframes to developing the structure of your site, as well as all kinds of applications including Adobe Photoshop, Illustrator or Fireworks. You also have many professional editors being one of the most recommended (at least the one I use) Sublime Text or, failing that, Adobe Dreamweaver since they provide very simple interfaces with high degrees of personality as well as the possibility of working with our codes through a system of shortcuts and with an autocomplete system that will help us save more than 70% of the time that we would use with an editor of traditional plain text.

Leave a Comment

Your email address will not be published. Required fields are marked with *



  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   Marga Sanchez said

    Thanks for the advice, I am passionate about design and all advice is well received. Keep going.
    Thank you!!!