Suggestion for best practices

Hi, I would like to add some suggestions to improve wp discuzz. I ran my website through Dareboost service and I got a number of issues, some of them related to WP Discuzz. I am pasting them here for your review and hopefully code improvement.

I am not saying everything below is mandatory or even makes sense in your particular code, but take this as improvement hints. Thank you.

1. Explain the purpose of each form field

Clarify the purpose of each field will facilitate the user experience on your website.

A form is composed of several fields that must be the most explicit possible for the user to quickly understand their function.

Define a label

You should prefer using the label tag:

<label for="name">Fill your name:</label>
<input id="name" type="text" name="name">

Otherwise, you can use the aria-label or the title (not supported by all screen readers) attributes. Read more. Note that using the placeholder attribute is insufficient.

• <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="E-mail">
• <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="E-mail">
• <input class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="E-mail">
• <textarea id="wc-textarea-0_0" placeholder="Începe discuția..." required="" name="wc_comment" class="wc_comment wpd-field">
• <textarea id="wc-textarea-wpdiscuzuniqueid" placeholder="Alătură-te discuției..." required="" name="wc_comment" class="wc_comment wpd-field">
• <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType">

2. labels should refer to an element

The for attribute associates the label to an other element of the page, and help screen readers to better interpret your content.

Label and for attribute

A label describes an element (a text to fill, a checkbox, etc.). When a user click on a label associated with a radio button, the option will be directly selected, improving the user experience.

How to use a label?

Associate the label to an element of the page by indicating the ID of the element. Example:

<form action="/action">
  <label for="myId">
  <input type="radio" name="myOptions" id="myId" value="1" >

• Examples:

• <label>
• <label>
• <label>
• <label>
• <label class="wpd_label" title="Notify of new replies to this comment">
• <label class="wpd_label" title="Notify of new replies to this comment">

3. CSS selectors are duplicated

Using several times the same selector for several declarative blocks within a single CSS file can affect the readability and maintainability of the code. It is also an optimization opportunity: by grouping these elements within a single rule, you will reduce the file size and optimize the rendering times.

• #wpcomm .wc-secondary-fo[...]cuz-ftb-right .wpdiscuz-social-login (2 times)
• #wpcomm .wc-comment-foot[...] .wc-vote-result.wc-vote-result-like (2 times)
• #wpcomm .wc-field-submit (2 times)
• #wpcomm .wpdiscuz-item.wpd-field-checkbox.wpd-field-single (2 times)
• .wpdiscuz-activ-stars (2 times)
• #wpcomm div.wpd-field-invalid span (2 times)
• @media screen and (max-w[...]h:800px) #wpcomm .wc_comment_level-5 (2 times)
• @media screen and (max-w[...]th:800px) #wpcomm .wc-comment-header (2 times)

4. Avoid excessive specificity on jQuery selectors

You are using too specifics jQuery selectors. It could impact performance: see more information. Here is an example of a good use of the library:

$( ".data table.firstClass td.secondClass" );
// Better: Drop the middle if possible
$( ".data td.secondClass" );

Example:

$('.wpd-active .wpd-pagination .wpd-action')

$('#wpcomm .wc-thread-wrapper .wc-comment')
$('.wc_social_plugin_wrapper .oneall_social_login .oneall_social_login_providers')

5. CSS properties are overridden by shorthands

CSS has some pitfalls that can cause side effects on your styles.

Override CSS properties

When a property is used 2 times within a CSS rule, the second one overrides the first.
CSS provides some shorthand properties, that can leads to some mistakes. For instance, the "border" property is applied to all borders of an element, avoiding the use of all "border-top", "border-right", "border-left" and "border-bottom" properties.

For intance:

.myClass {
 border-color:red;
 border:5px solid; // border will take again the default color
}

"border-color" is overridden by the "border" shortand property.

Avoid side effects

The use of shorthand properties is risky, because it comes with an implicit override. If the resulting style on your page is the desired one, you should delete the overridden property (it will also reduce the file size).

Example:

#wpcomm .wpd-form-col-full .wpd-item-wrap: "padding" resets "padding-right" property set earlier

6. CSS properties are duplicated

Using several times the same property within a same CSS rule can affect the readability of the CSS. It is also an optimization opportunity: by removing duplicated properties, you will reduce the file size.

CSS properties

The CSS properties allow to apply a style to a set of elements. It is unnecessary to define 2 times the same property with the same value in a same rule.

How to improve it?

Remove one occurrence of the duplicated property. For example, the following properties:

.myClass {
  margin: 10px;
  ...
  margin: 10px;
}

Should be replaced by:

.myClass {
  margin: 10px;
}

Example:

.wpd-wrapper .wpd-page-link {transition: background-color .3s}

7. CSS selectors are duplicated

Using several times the same selector for several declarative blocks within a single CSS file can affect the readability and maintainability of the code. It is also an optimization opportunity: by grouping these elements within a single rule, you will reduce the file size and optimize the rendering times.

The CSS Object Model (CSSOM)

The CSS rules allow to select elements from the HTML code in order to apply styling properties.

In order to do that, the browser constructs its own model of the CSS markup it has fetched: the CSS Object Model. This transformation takes several steps: reading the file, converting the strings of text into browser tokens, transforming this tokens into objects with properties and rules and organizing the elements in a tree-like model. These operations will take place more quickly if the CSS code is written in a simple and non-redundant way.

How to improve the CSS rules?

For maintenance as well as performance, you have to reduce the number of rules contained into your CSS files and group rules whenever it’s possible. For instance, the following rules:

.myClass {
  margin: 0;
}
...
.myClass{
  border: 1px solid black;
}

Should be merged into a single one:

.myClass {
  margin: 0;
  border: 1px solid black;
}

If the duplication is the result of a legacy process or is justified for maintenance reasons, you can consider using a CSS minification tool able to do automatically this improvement.

Examples:

• #wpcomm .wpdiscuz-subscribe-bar (2 times)
• #wpcomm .wc-secondary-fo[...]cuz-ftb-right .wpdiscuz-social-login (2 times)
• #wpcomm .wc-comment-foot[...] .wc-vote-result.wc-vote-result-like (2 times)
• #wpcomm .wc-field-submit (2 times)
• #wpcomm .wpdiscuz-item.wpd-field-checkbox.wpd-field-single (2 times)
• .wpdiscuz-activ-stars (2 times)
• #wpcomm div.wpd-field-invalid span (2 times)
• @media screen and (max-w[...]h:800px) #wpcomm .wc_comment_level-5 (2 times)
• @media screen and (max-w[...]th:800px) #wpcomm .wc-comment-header (2 times)
• .wpd-wrapper.wpd-guest-settings (2 times)
• #widget-comments-container .slick-track (2 times)

8. Abuse of !important in css, no need for examples

9. Do not use too long inline scripts

Any script with a significant size should let the browser cached them in order to reduce loading time/improve performance of your returning visitor.

Inline scripts / cache policy

"inline" scripts allow to integrate easily small portions of scripts directly in the HTML code. Example:

<script type="text/javascript">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']...,'/analytics.js','ga');
    ga('create', 'UA-11111111-1', 'mywebsite.com');
</script>

By doing so, you avoid making a request to the server to retrieve the resource. So inline scripts represent a performance gain if you want to integrate small scripts.

However, once a script has a fairly substantial size, we advise you to outsource it and perform a request to retrieve it. So you will benefit from the cache mechanism.

What should I do?

Outsource your scripts with more than 1500 characters in one or more separate files.

Example:

/* <![CDATA[ */ var wpdiscuzAjaxObj = {"url":"https:\/\/cpis.ro\/wp-admin\/admin-ajax.php","wpdiscuz_options":{"wc_hide_replies_text":"Ascunde r\u0103...