•   Niedziela, 16 maja 2021
IT systems

Best Practices of a Frontend Developer

..or what mistakes he should not make in his daily work.

Do not use style="..." attribute attribute and the internal style sheet

It causes not only longer loading of the page but also problems with making changes. All styles should be placed in a separate .cssfile

Avoid using !importantstatements

I noticed that this is unavoidable if we use media queries with rules from ... to, for example:

@media (min-width: 500px) and (max-width: 1000px)

that's why I try to avoid it and set the responsiveness of the page only to some width, thanks to that there is no need to use !important declaration, eg:

@media (max-width: 1200px)

3. the fewer files the better

In our projects we often use the .less stylesheet language and do not limit ourselves to only one file. This makes it easier to search for a given rule in large projects. All files are converted to one .cssfile

4. shorten the notation in style rules

WRONG

margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;

GOOD

margin: 10px;

WRONG

margin-top: 0px;

GOOD

margin-top: 0;

WRONG

div.class

GOOD

.class;

5. minimize the number of CSS identifiers and classes

WRONG

a.example, b.example, em.example, i.example, small.example, span.example, strong.example {

GOOD

.example p {
.example p em {

6. set the global text formatting styles in one place

It's best to use the body selector for this, thanks to inheritance the style will carry over to the rest of the document elements.

body {
         font-size: 12px;
         color: #000;
         font-family: Arial,Helvetica,sans-serif;
         background-color: #fff;
     }

7 Text size unit

On screen it is best to use px unit, on a printout - pt

8. font type

Always end the font type by giving the name of the general family, e.g:

font-family: Arial, Helvetica, Verdana, sans-serif;

The font colour should contrast with the background and the font size should be appropriate for the test to be readable.

9 References

Links placed in the body of the article should be highlighted with the mouse cursor changed.

10. image optimization

CSS Sprites is a technique for combining multiple images into one, which is displayed by appropriately positioning the background image. Contrary to what the name might imply, these are not small images, but one large image composed of many smaller images.

Use Consistent Class Names and Identifiers

WRONG

div.red_text {

GOOD

div.container {

12. use a consistent way to format rules

MODE I

html, body {
   color: black;
   background-color: white;
}

MODE II

html, body
{
   color: black;
   background-color: white;
}

MODE III

html, body { color: black; background-color: white; }

13. check the correct display of the page in popular browsers

To check always:

  • Chrome,
  • Opera Firefox,
  • Edge,
  • Internet Explorer 10
  • Safari

14. check correctness of page display on different screen resolutions

I recommend using browser add-ons for this purpose e.g. for Chrome Viewport Resizer

15. code validation with W3C validator

https://jigsaw.w3.org/css-validator/

Zobacz również

Komentarze (0)

Zostaw komentarz ⇾