CSS Auditing: Style Sheets Shouldn't Be Horrible
When we start working on an existing code base, we first need to audit the CSS. The main harm from poorly organized and running CSS tables is to slow down the development process, as the development team has to wade through the jungle of code, and in a non-working site, if incorrectly defined selectors cause conflicts and style overlap.
Such an audit helps to assess how well the project's CSS tables are organized, how well the pipeline is in charge, which is responsible for their assessment and assembly, modern requirements, and how well the team involved in writing CSS is structured and disciplined. Here are some steps you can use to conduct your own CSS audit:
CSS systems
What to look for
')
Does your project have a CSSReadme file or another similar document that describes the principles of writing CSS for this project? The most successful projects start with tougher systems such as SMACSS, BEM, or OOCSS and change them to reflect the subsequent proposals and structure. If this is not available in the Github wiki repository, the main README file of the project or in the instructions for the new developer in the team, consider that it does not exist.
In the end, the CSS system should indicate the following:
• How to name newly created files and when to create them.
• How to choose names for class and id properties
• What CSS3 properties are supported on the site
• What syntax options are preferred within the project (is it possible to use single-line scripts?)
How it helps
CSS site is increased due to the whims of individual developers. Some of them, before writing a rule, spend time looking at whether there is a proper selector, others do not. The system extracts assumptions and opinions from the CSS records, the developers need only give it a good appearance, and not invent their own rules.
First steps in restoring order
Review the systems described above and present their advantages and disadvantages. Discuss with the rest of the project team what they consider the most important in their style sheets, and choose what best suits your goals.
The safest way to integrate a new system into an existing website is to act slowly, one page at a time. New designs can be performed using the system, and then backporting re-applied styles to previously created pages. In addition, if a conveyor is being redesigned, this is a great opportunity to start anew with the complete processing of the material. Sometimes this is the only way in which you can be sure.
Style guide
What to look for
The responsible CSS development team should have a “kitchen sink” for the components and styles that make up the website for which they are responsible. When a new developer is given a task to design a page, it is not always convenient to wade through CSS pages or even know where to find one or another element in the product. The style guide is a developer-only page that shows which styles and components are already created for the site, so that it can be attached to the legend, which saves time and reduces the number of duplicate styles.
How it helps
The presence of an active page, which you can always check with, makes it easy to find the very blue text from the pop-up window from the computer that you just put on your desktop. Not every developer knows the entire website thoroughly, so this “reference window” encourages the developer to use existing styles rather than reinvent the wheel at the expense of his time.
First steps in restoring order
Next time, as soon as someone creates a new property or element, you need to mark it and use it somewhere on a new page, on which existing style sheets are already included. This will become the germ of your style guide, and you should first of all try to create new elements and components on this page to test their functionality in an isolated space, and then transfer them to the page for which they were originally intended.
Pipeline
What to look for
Somewhere among the documentation for your site there should be a description of the pipeline for processing digital objects, in particular, we are interested in processing CSS. This could be a Gruntfile pointing to tasks that need to be done, or you can use a shell program like Rails, which has many processing functions.
How it helps
Writing raw CSS is not solid. Pre-processing programs like Sass and Less remove most of the sharp corners from the CSS writing process and develop good habits related to functions and variables.
Before sending your functions to work, it is important to validate CSS in some way. Recent Quick Left studies have shown hundreds of properties created, such as colro and z-margin, transferred to work without any effect. It’s almost harmless, but it’s certainly annoying to have it on your website, it shows your inattention to trifles.
In addition to preprocessing programs, it is important to speed up and minimize your CSS into a digital object, which can be transferred via CDN and reliably cached by the browser using the appropriate cache control headers to speed up the site.
First steps in restoring order
If your program shell doesn’t initially have a clue about the pipeline for processing digital objects that can process your CSS and JavaScript, you can try a standalone tool. We like two of these tools - Grunt and Gulp. They are built into large deployment systems in order to either build designs during deployment, or to ensure that they are created, and to receive an artifact (compiled CSS) before deployment, which represents two equal options with their own advantages and disadvantages.
Keeping CSS in order and full of functionality is not easy, it requires constant monitoring, and often developers are given more "heavy" tasks, such as internal properties, or work in an external MVC software shell. However, there are tools that can add to the process of writing their design and testing, and that can help each site to get what it lacks: easy-to-maintain CSS, which does not need to be completely changed every few months. The simplest thing from the above is to start with a simple style reference book, so if your site still doesn’t have it, go ahead, start improving your workflow today !!!
Such an audit helps to assess how well the project's CSS tables are organized, how well the pipeline is in charge, which is responsible for their assessment and assembly, modern requirements, and how well the team involved in writing CSS is structured and disciplined. Here are some steps you can use to conduct your own CSS audit:
CSS systems
What to look for
')
Does your project have a CSSReadme file or another similar document that describes the principles of writing CSS for this project? The most successful projects start with tougher systems such as SMACSS, BEM, or OOCSS and change them to reflect the subsequent proposals and structure. If this is not available in the Github wiki repository, the main README file of the project or in the instructions for the new developer in the team, consider that it does not exist.
In the end, the CSS system should indicate the following:
• How to name newly created files and when to create them.
• How to choose names for class and id properties
• What CSS3 properties are supported on the site
• What syntax options are preferred within the project (is it possible to use single-line scripts?)
How it helps
CSS site is increased due to the whims of individual developers. Some of them, before writing a rule, spend time looking at whether there is a proper selector, others do not. The system extracts assumptions and opinions from the CSS records, the developers need only give it a good appearance, and not invent their own rules.
First steps in restoring order
Review the systems described above and present their advantages and disadvantages. Discuss with the rest of the project team what they consider the most important in their style sheets, and choose what best suits your goals.
The safest way to integrate a new system into an existing website is to act slowly, one page at a time. New designs can be performed using the system, and then backporting re-applied styles to previously created pages. In addition, if a conveyor is being redesigned, this is a great opportunity to start anew with the complete processing of the material. Sometimes this is the only way in which you can be sure.
Style guide
What to look for
The responsible CSS development team should have a “kitchen sink” for the components and styles that make up the website for which they are responsible. When a new developer is given a task to design a page, it is not always convenient to wade through CSS pages or even know where to find one or another element in the product. The style guide is a developer-only page that shows which styles and components are already created for the site, so that it can be attached to the legend, which saves time and reduces the number of duplicate styles.
How it helps
The presence of an active page, which you can always check with, makes it easy to find the very blue text from the pop-up window from the computer that you just put on your desktop. Not every developer knows the entire website thoroughly, so this “reference window” encourages the developer to use existing styles rather than reinvent the wheel at the expense of his time.
First steps in restoring order
Next time, as soon as someone creates a new property or element, you need to mark it and use it somewhere on a new page, on which existing style sheets are already included. This will become the germ of your style guide, and you should first of all try to create new elements and components on this page to test their functionality in an isolated space, and then transfer them to the page for which they were originally intended.
Pipeline
What to look for
Somewhere among the documentation for your site there should be a description of the pipeline for processing digital objects, in particular, we are interested in processing CSS. This could be a Gruntfile pointing to tasks that need to be done, or you can use a shell program like Rails, which has many processing functions.
How it helps
Writing raw CSS is not solid. Pre-processing programs like Sass and Less remove most of the sharp corners from the CSS writing process and develop good habits related to functions and variables.
Before sending your functions to work, it is important to validate CSS in some way. Recent Quick Left studies have shown hundreds of properties created, such as colro and z-margin, transferred to work without any effect. It’s almost harmless, but it’s certainly annoying to have it on your website, it shows your inattention to trifles.
In addition to preprocessing programs, it is important to speed up and minimize your CSS into a digital object, which can be transferred via CDN and reliably cached by the browser using the appropriate cache control headers to speed up the site.
First steps in restoring order
If your program shell doesn’t initially have a clue about the pipeline for processing digital objects that can process your CSS and JavaScript, you can try a standalone tool. We like two of these tools - Grunt and Gulp. They are built into large deployment systems in order to either build designs during deployment, or to ensure that they are created, and to receive an artifact (compiled CSS) before deployment, which represents two equal options with their own advantages and disadvantages.
Keeping CSS in order and full of functionality is not easy, it requires constant monitoring, and often developers are given more "heavy" tasks, such as internal properties, or work in an external MVC software shell. However, there are tools that can add to the process of writing their design and testing, and that can help each site to get what it lacks: easy-to-maintain CSS, which does not need to be completely changed every few months. The simplest thing from the above is to start with a simple style reference book, so if your site still doesn’t have it, go ahead, start improving your workflow today !!!
Source: https://habr.com/ru/post/248985/
All Articles