├── assets
    └── file-structure.png
├── LICENSE
└── README.md


/assets/file-structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtigranv/Front-end-Guidelines/HEAD/assets/file-structure.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | # Front-end Guidelines
   2 | 
   3 | ## Introduction
   4 | During my 15 years of experience in web development, I’ve worked with various companies, from enterprise-level to startups, and I’ve worked with many, many fellow software engineers along the way. One of the most common and important problems I’ve came across in my projects has been failure to write clean and easy-to-understand code. 
   5 | Even the best developers from top-notch companies don’t always follow best practices and write code which can be cleaned and optimized.
   6 | 
   7 | ## Problems and consequences of messy and dirty code
   8 | > “Source code is akin to financial debt. Suppose you want to buy a house to live in. Most people don’t have the financial wherewithal to pay cash for a house, so you take out a mortgage instead. But the mortgage itself is not a great thing to have. It’s a liability. You have to pay interest on your debt every month. You always want your mortgage to be as small as possible while still allowing you to buy a house that meets your needs. But if you don’t do some careful thinking about the terms and implications of your mortgage before you buy a house, you can wind up in a load of trouble. It’s possible to end up underwater in a situation where your debt is actually bigger than your house is worth.
   9 | 
  10 | > So too in web development. The code has ongoing costs. You have to understand it, you have to maintain it, you have to adapt it to new goals over time. The more code you have, the larger those ongoing costs will be. It’s in our best interest to have as little source code as possible while still being able to accomplish our business goals.”
  11 |  
  12 |  
  13 | Quoted from an old but still relevant blog post: https://blogs.msdn.microsoft.com/elee/2009/03/11/source-code-is-a-liability-not-an-asset/
  14 | 
  15 | 
  16 | ## Table of Contents
  17 | 
  18 |   ### Code styling  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
  19 |   1. [File structure](#file-structure--)
  20 |   1. [Code validation](#code-validation--)
  21 |   1. [Alternative tag of images](#use-alternative-text-on-img-tags-for-clean-code-principles-validity--)
  22 |   1. [kebab-case names](#kebab-case-names--)
  23 |   1. [Meaningful, short names of classes](#meaningful-short-names-of-classes--)
  24 |   1. [Type attributes](#remove-type-attributes--)
  25 |   1. [Parent element classes](#add-a-class-to-the-parent-element--)
  26 |   1. [Zero values without units](#drop-units-from-zero-values--)
  27 |   1. [Use of hr tag](#use-an-hr-tag--)
  28 |   1. [CSS height and width](#css-without-fixed-height-and-width--) 
  29 |   ### HTML ![HTML](https://img.shields.io/badge/-HTML-e24e30.svg)
  30 |   1. [Markup based HTML](#try-to-have-a-front-end-that-is-as-markup-based-as-possible--)  
  31 |   1. [Unnecessary wrappers in HTML](#avoid-using-unnecessary-wrappers-in-html--) 
  32 |   1. [Atomic classes](#use-atomic-classes-for-styling--) 
  33 |   1. [Semantic elements](#make-use-of-semantic-elements--) 
  34 |   1. [HTML5 tags](#use-html5-tags--) 
  35 |   ### CSS ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
  36 |   1. [A > B selector](#a--b-selector--)
  37 |   1. [CSS preprocessors](#use-a-css-preprocessor--) 
  38 |   1. [Group selectors or @extend in SASS](#use-extend-in-sass-or-group-selectors--)
  39 |   1. [rem units](#use-rem-units--) 
  40 |   1. [CSS rule without affected other elements](#before-writing-a-css-rule-think-about-which-element-will-be-affected--)
  41 |   1. [Look for existing CSS rules and variables](#look-for-existing-css-rules-and-variables-before-writing-new-ones--) 
  42 |   1. [Specific rules](#use-specific-rules--) 
  43 |   1. [Shorthand properties and values](#use-shorthand-properties-and-values--) 
  44 |   1. [em instead of px](#em-instead-of-px-for-line-height--) 
  45 |   1. [Specific classes](#use-specific-classes-when-necessary--)
  46 |   1. [normalize.css](#dont-use-resetcss-use-normalizecss-instead--)
  47 |   ### Bootstrap  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
  48 |   1. [More Bootstrap classes](#use-bootstrap-classes-as-much-as-possible--)  
  49 |   1. [One parent item in SCSS ](#use-parent-item-just-once-in-scss--)  
  50 |   1. [Customizing properly framework](#customize-your-framework-properly--)
  51 |   1. [.container fixed width](#dont-overwrite-container-width--)  
  52 |   1. [Bootstrap 4 classes](#use-bootstrap-4-classes-and-write-less-css--)  
  53 |   1. [Same value for col-X](#remove-col-md-x-and-col-lg-x-if-col-sm-x-has-same-value-for-x--) 
  54 |   1. [Use of .col-xs-12](#dont-use-col-xs-12--) 
  55 |   1. [Wrapping Up](#wrapping-up)
  56 |  
  57 |  
  58 |  ###
  59 | ## Code styling
  60 | 
  61 | ### File Structure  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
  62 | 
  63 | 
  64 | If you are going to develop a big app, then you need to take care of the file structure. It can, or rather should, look like this:
  65 | 
  66 | ![Good example of file structure in SCSS](https://raw.githubusercontent.com/vtigranv/Front-end-Guidelines/master/assets/file-structure.png)
  67 | 
  68 | 
  69 | ### Code validation  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
  70 | 
  71 | Try to always check your code with [HTML](https://validator.w3.org/) and [CSS](https://jigsaw.w3.org/css-validator/) validators
  72 | 
  73 | 
  74 |   ###### ⚠ Bad Code
  75 |   ```html
  76 |   <figure>
  77 |     <div>
  78 |       <img src="demo.jpg" alt="">
  79 |       <figcaption>
  80 |         <h2>Hello world</h2>
  81 |       </figcaption>
  82 |     </div>
  83 |   </figure>
  84 | 
  85 |   <picture>
  86 |     <source src="demo.webp" type="image/webp">
  87 |     <img src="demo.jpg" alt="">
  88 |   </picture>
  89 | 
  90 |   <details>
  91 |     <header>
  92 |       <summary>Expand details</summary>
  93 |     </header>
  94 |     <p>All content goes here</p>
  95 |   </details>
  96 |   ```
  97 |   ```css
  98 |  
  99 |   p {
 100 |     font: 400 inherit/1.125 serif;
 101 |   }
 102 |   ```
 103 |   
 104 | 
 105 | ###### 👍 Good Code
 106 | 
 107 |   ```html
 108 |   <figure>
 109 |     <img src="demo.jpg" alt="">
 110 |     <!-- figcaption should be child of figure element, not div -->
 111 |     <figcaption>
 112 |       <h2>Hello world</h2>
 113 |     </figcaption>
 114 |   </figure>
 115 | 
 116 |   <picture>
 117 |     <!-- source should have srcset attribute -->
 118 |     <source srcset="demo.webp" type="image/webp">
 119 |     <img src="demo.jpg" alt="">
 120 |   </picture>
 121 | 
 122 |   <details>
 123 |     <!-- summary is not allowed as child of header -->
 124 |     <summary>Expand details</summary>
 125 |     <p>All content goes here</p>
 126 |   </details>
 127 |   ```
 128 |   ```css
 129 |   p {
 130 |     font-weight: 400;
 131 |     font-size: inherit;
 132 |     line-height: 1.125;
 133 |     font-family: serif;
 134 |   }
 135 |   ```
 136 |   
 137 | **[🔝 ](#table-of-contents)**
 138 | ###
 139 | ###
 140 | ######
 141 | ----
 142 | ### Use alternative text on `<img>` tags for clean code principles validity  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 143 |   
 144 |  This attribute plays vital role for SEO, search engines, web crawlers, screen readers, etc.
 145 |   
 146 | ###### ⚠ Bad Code
 147 | 
 148 | ```html
 149 | <img src="demo.jpg">
 150 | ```
 151 |   
 152 | ###### 👍 Good Code
 153 | 
 154 |  ```html
 155 |  <img src="demo.jpg" alt="This is placeholder of the image">
 156 |  ``` 
 157 |   
 158 |  ### Kebab-case names  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 159 |  
 160 |  For names, try to use `kebab-case (spinal-case)` and not use `camelCase`, or `snake_case`. Use `snake_case` only when using [BEM](https://en.bem.info/), though if you are using Bootstrap, it’s better to keep consistent and go with `-` as a delimiter.
 161 |  
 162 |  ###### ⚠ Bad Code
 163 | 
 164 | ```html
 165 | <section class="section_featured_Listing">
 166 |   <h1 class="largeTitle">H1 title</h1>
 167 | </section>
 168 | ```
 169 |   
 170 | ###### 👍 Good Code
 171 | 
 172 | ```html
 173 | <section class="section-featured-listing">
 174 |   <h1 class="large-title">H1 title</h1>
 175 | </section>
 176 | ```
 177 |  
 178 | `kebab-case` is more readable then `camelCase` and `snake_case`.
 179 | ###
 180 | **[🔝 ](#table-of-contents)**
 181 | ###
 182 | ### 
 183 | ----
 184 | ### Meaningful, short names of classes  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 185 | 
 186 | The names of classes should look like `.noun-adjective`, which can be understood by anyone, keep them short
 187 | 
 188 | Try to use common names of classes instead of writing content specific names. It makes code more readable
 189 | 
 190 |  ###### ⚠ Bad Code
 191 | 
 192 | ```html
 193 | <div class="team-wrapper">
 194 |   <button class="large-button-green"></button>
 195 |   <p class="greenText-john-smith-description"></p>
 196 |   <div class="white-bg"></div>
 197 | </div>
 198 | ```
 199 |   
 200 | ###### 👍 Good Code
 201 | 
 202 | ```html
 203 | <div class="section-team">
 204 |   <button class="btn-lg btn-success"></button>
 205 |   <p class="text-success"></p>
 206 |   <div class="bg-white"></div>
 207 | </div>
 208 | ```
 209 |  
 210 | ### Remove type attributes  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 211 | 
 212 | Don’t write type attributes for stylesheets and script in HTML5. They are not required with HTML5, but are required by W3C standards in HTML4/XHTML.
 213 | 
 214 |  ###### ⚠ Bad Code
 215 | 
 216 | ```html
 217 | <link type="text/css" rel="stylesheet" href="../styles.css">
 218 | <script type="text/javascript" src="../main.js"></script>
 219 | ```
 220 |   
 221 | ###### 👍 Good Code
 222 | 
 223 | ```html
 224 | <link rel="stylesheet" href="styles.css">
 225 | <script src="app.js"></script>
 226 | ```
 227 | 
 228 | ###
 229 | **[🔝](#table-of-contents)**
 230 | ###
 231 | ###
 232 | ----
 233 | 
 234 | ### Add a class to the parent element  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 235 | 
 236 | If you need to use the same block but with different styling, try to keep the HTML as untouched as possible. Just add one class to the parent element and apply all new stylings to the children of that class in CSS.
 237 | 
 238 | ###### ⚠ Bad Code
 239 | 
 240 | ```html
 241 | <article>
 242 |   <h1>Same section with another styles</h1>
 243 |   <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p>
 244 |   …
 245 | </article>
 246 | 
 247 | <article class=”another-article”>
 248 |   <h1 class=”other-styling-title”>Same section with another styles</h1>
 249 |   <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p>
 250 |   …
 251 | </article>
 252 | ```
 253 | ```css
 254 | article {
 255 |   padding: 10px 15px;
 256 |   h1 {
 257 |     font-size: 32px;
 258 |     color: #ff0000;
 259 |   }
 260 | }
 261 | 
 262 | .another-article {
 263 |   padding-bottom: 30px;
 264 |   border-bottom: 4px solid #ccc;
 265 | }
 266 | h1.other-styling-title {
 267 |   font-size: 20px;
 268 | }
 269 | ```
 270 |   
 271 | ###### 👍 Good Code
 272 | 
 273 | ```html
 274 | <article>
 275 |   <h1>Same section with another styles</h1>
 276 |   <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p>
 277 |   … 
 278 | </article>
 279 | 
 280 | <article class=”other-styling”>
 281 |   <h1>Same section with another styles</h1>
 282 |   <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p>
 283 |   … 
 284 | </article>
 285 | ```
 286 | ```css
 287 | article {
 288 |   padding: 10px 15px;
 289 |   h1 {
 290 |     font-size: 32px;
 291 |     color: #ff0000;
 292 |   }
 293 | 
 294 |   &.other-styling {
 295 |     padding-bottom: 30px;
 296 |     border-bottom: 4px solid #ccc;
 297 |     /* you will have less classes */
 298 |     h1 {
 299 |       font-size: 20px;
 300 |     }
 301 |   }
 302 | }
 303 | ```
 304 | 
 305 | 
 306 | ###
 307 | **[🔝](#table-of-contents)**
 308 | ###
 309 | ###
 310 | ----
 311 | ### Drop units from zero values  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 312 | 
 313 | Adding the unit is unnecessary and provides no additional value. There is no difference between 0px, 0em, 0%, or any other zero-value. The units aren’t important because the value is still zero.
 314 | 
 315 | ###### ⚠ Bad Code
 316 | 
 317 | ```html
 318 | div {
 319 |   margin: 20px 0px;
 320 |   letter-spacing: 0%;
 321 |   padding: 0px 5px;
 322 | }
 323 | ```
 324 |   
 325 | ###### 👍 Good Code
 326 | 
 327 | ```html
 328 | div {
 329 |   margin: 20px 0;
 330 |   letter-spacing: 0;
 331 |   padding: 0 5px;
 332 | }
 333 | ```
 334 | 
 335 | ###
 336 | **[🔝](#table-of-contents)**
 337 | ###
 338 | ###
 339 | ----
 340 | ### Use an `hr` tag  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 341 |  
 342 | Don’t write `border-bottom` in CSS if you can add an `hr` tag. Use the hr tag instead of writing a new selector and adding border styles in CSS. It makes the code more markup-based, and that’s what we’re going for.
 343 | 
 344 | ###### ⚠ Bad Code
 345 | 
 346 | ```html
 347 | <p class="border-bottom">I want this section to have a border.</p>
 348 | <p>Lorem ipsum</p>
 349 | ```
 350 | ```css
 351 | .border-bottom {
 352 |   border-bottom: 1px solid #000;
 353 | }
 354 | ```
 355 |   
 356 | ###### 👍 Good Code
 357 | 
 358 | ```html
 359 | <p>I want this section to have a border.</p>
 360 | <hr>
 361 | <p>Lorem ipsum</p>
 362 | // If necessary change hr variable in bootstrap
 363 | ```
 364 | 
 365 | ###
 366 | **[🔝](#table-of-contents)**
 367 | ###
 368 | ###
 369 | ----
 370 | ### CSS without fixed height and width  ![Code Styling](https://img.shields.io/badge/-Code%20Styling-green.svg)
 371 | 
 372 | Try to avoid having fixed height or width in CSS. Heights can be generated by having inner content + paddings and widths can be defined by a grid system (use nested grid if necessary).
 373 | 
 374 | ###### ⚠ Bad Code
 375 | 
 376 | ```html
 377 | <footer id="footer" class="text-center">
 378 |   <h2>Let's Get In Touch!</h2>
 379 |   <hr>
 380 |   <p>Ready to start your next project with us?</p>
 381 |  </footer>
 382 | ```
 383 | ```css
 384 | #footer {
 385 |   height: 130px;
 386 | }
 387 | ```
 388 |   
 389 | ###### 👍 Good Code
 390 | 
 391 | ```html
 392 | <footer id="footer" class="text-center">
 393 |   <h2>Let's Get In Touch!</h2>
 394 |   <hr>
 395 |   <p>Ready to start your next project with us?</p>
 396 | </footer>
 397 | ``` 
 398 | ```css
 399 | #footer {
 400 |   padding-top: 23px;
 401 |   padding-bottom: 47px;
 402 | }
 403 | ``` 
 404 | 
 405 | ###
 406 | **[🔝](#table-of-contents)**
 407 | ###
 408 | ###
 409 | ## HTML
 410 | 
 411 | Moving on to HTML, the priority will be to ensure a robust and easy to maintain front-end.
 412 | 
 413 | -----
 414 | ### Try to have a front-end that is as markup-based as possible  ![HTML](https://img.shields.io/badge/-HTML-e24e30.svg)
 415 | 
 416 | Make your front-end code markup-based instead of writing too much CSS.
 417 | 
 418 | This will will help search engines and make your code more readable, potentially enhancing search rankings and user experience.
 419 | 
 420 | 
 421 | ###### ⚠ Bad Code
 422 | 
 423 | ```html
 424 | <div class="main-content">
 425 |   <p class="content-title">Main text title</p>
 426 |   <img src="http://via.placeholder.com/150x150" alt="example">
 427 |   <p class="image-description">Here is image description</p>
 428 | </div>
 429 | ```
 430 |   
 431 | ###### 👍 Good Code
 432 | 
 433 | ```html
 434 | <main>
 435 |   <h1>Main text title</h1>
 436 |   <figure>
 437 |     <img src="http://via.placeholder.com/150x150" alt="example">
 438 |     <figcaption>
 439 |       Here is image description
 440 |     </figcaption>
 441 |   </figure>
 442 | </main>
 443 | ```
 444 | 
 445 | ###
 446 | **[🔝](#table-of-contents)**
 447 | ###
 448 | ###
 449 | ----
 450 | ### Avoid using unnecessary wrappers in HTML  ![HTML](https://img.shields.io/badge/-HTML-e24e30.svg)
 451 | 
 452 | Try not to use unnecessary wrapper elements in HTML. Having tons tons of `<div>` and `<span>` elements is a thing of the past. Keeping things granular and linear enables you to achieve minimal code (see next point).
 453 | 
 454 | ###### ⚠ Bad Code
 455 | 
 456 | ```html
 457 | <section class=”container”>
 458 |   <div class=”row”>
 459 |     <div class=”col-xs-12”>
 460 |       <div class=”inner-wrapper”>
 461 |         <span>Unnecessary br tags</span>
 462 |       </div>
 463 |     </div>
 464 |   </div>
 465 | </section>
 466 | ```
 467 |   
 468 | ###### 👍 Good Code
 469 | 
 470 | ```html
 471 | <section class=”container”>
 472 |   <p>Unnecessary br tags</p>
 473 | </section>
 474 | ```
 475 | 
 476 | ###
 477 | **[🔝](#table-of-contents)**
 478 | ###
 479 | ###
 480 | ----
 481 | ### Use atomic classes for styling  ![HTML](https://img.shields.io/badge/-HTML-e24e30.svg)
 482 | 
 483 | Do not use any custom colors or font sizes (if the color or font size is not in the framework, just add your atomic classes). Atomic classes are simple, single-purpose units of styling. Much like inline styles, Atomic styles only apply a single style declaration.
 484 | 
 485 | ###### ⚠ Bad Code
 486 | 
 487 | ```html
 488 | <h1>Without using atomic class</h1>
 489 | <p>Paragraph without atomic class</p>
 490 | <section>
 491 |   <h1> Another h1 text</h1>
 492 |   <p>Paragraph inside div without class</p>
 493 | </section>
 494 | ```
 495 | ```css
 496 | h1 {
 497 |   color: red;
 498 | }
 499 | section > h1 {
 500 |   color: blue;
 501 | }
 502 | ```
 503 |   
 504 | ###### 👍 Good Code
 505 | 
 506 | ```html
 507 | <h1 class="text-red">Without using atomic class</h1>
 508 | <p>Paragraph without atomic class</p>
 509 | <section>
 510 |   <h1 class="text-blue"> Another h1 text</h1>
 511 |   <p>Paragraph inside div without class</p>
 512 | </section>
 513 | ```
 514 | ```css
 515 | .text-red {
 516 |   color: red;
 517 | }
 518 | .text-blue {
 519 |   color: blue;
 520 | }
 521 | ```
 522 | 
 523 | Try to keep granular and atomic classes, and use them when needed. Your front-end will become more markup-based as a result.
 524 | 
 525 | ###
 526 | **[🔝](#table-of-contents)**
 527 | ###
 528 | ###
 529 | ----
 530 | ### Make use of semantic elements  ![HTML](https://img.shields.io/badge/-HTML-e24e30.svg)
 531 | 
 532 | Using semantics provides a better structure and makes the code and content easier to read.
 533 | 
 534 | 
 535 | ###### ⚠ Bad Code
 536 | 
 537 | ```html
 538 | <span class="heading"><strong>Welcome</strong></span>
 539 | <span>This is unnecessary br tag.</span>
 540 | ```
 541 |   
 542 | ###### 👍 Good Code
 543 | 
 544 | ```html
 545 | <h1>Welcome</h1>
 546 | <p>This is unnecessary br tag.</p>
 547 | ```
 548 | 
 549 | ###
 550 | **[🔝](#table-of-contents)**
 551 | ###
 552 | ###
 553 | ----
 554 | ### Use HTML5 tags  ![HTML](https://img.shields.io/badge/-HTML-e24e30.svg)
 555 | 
 556 | The new tags give you more expressive freedom and to standardize common elements, which improves the automated processing of documents. Here is a solid list of all elements. I’ve discovered that a lot of developers always use a lot of `<div>` and `<span>`, but first please [check here](https://www.tutorialrepublic.com/html-reference/html5-tags.php) which tags fit logically in your context:
 557 |  
 558 | ###### ⚠ Bad Code
 559 | 
 560 | ```html
 561 |  <div class="article-blue">
 562 |   <div class="article-title-red">HTML 4 title</div>
 563 |   <div class="content">
 564 |     Semantics
 565 |     <span class="boldtext">are</span>
 566 |     important.
 567 |   </div>
 568 | </div>
 569 | ```
 570 |   
 571 | ###### 👍 Good Code
 572 | 
 573 | ```html
 574 |  <article>
 575 |   <h1>HTML5 title</h1>
 576 |   <p>
 577 |     Semantics <strong>are</strong> important.
 578 |   </p>
 579 | </article>
 580 | ``` 
 581 | 
 582 | Bottom line: Learn and use new elements in HTML5. It’s well worth the effort!
 583 | 
 584 | ###
 585 | **[🔝 ](#table-of-contents)**
 586 | ###
 587 | ###
 588 | ## CSS
 589 | 
 590 | 
 591 | When it comes to CSS, it’s hard not to start off with some unoriginal, yet sassy advice:
 592 | 
 593 | ### A > B selector  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 594 | 
 595 | It’s very helpful to use the `A > B` selector, which applies rules only to direct child(ren), in that case you will not have to reset stylings of all other children which don’t need that styling. For example, it’s very useful when coding nested menus. You will not need to redefine submenu stylings.
 596 | 
 597 | ###### ⚠ Bad Code
 598 | 
 599 | ```html
 600 | <ul>
 601 |   <li>List 1</li>
 602 |   <li>List 2</li>
 603 |   <li>List 3
 604 |     <ul>
 605 |       <li>Submenu 1</li>
 606 |       <li>Submenu 2</li>
 607 |     </ul>
 608 |   </li>
 609 | </ul>
 610 | ```
 611 | ```css
 612 | ul li {
 613 |   list-style-type: none;
 614 | }
 615 | li ul li {
 616 |   /* redefine to default value */
 617 |   list-style-type: disc;
 618 | }
 619 | ```
 620 |   
 621 | ###### 👍 Good Code
 622 | 
 623 | ```html
 624 | <ul>
 625 |   <li>List 1</li>
 626 |   <li>List 2</li>
 627 |   <li>List 3
 628 |     <ul>
 629 |       <li>Submenu 1</li>
 630 |       <li>Submenu 2</li>
 631 |     </ul>
 632 |   </li>
 633 | </ul>
 634 | ```
 635 | ```css
 636 | ul > li {
 637 |   list-style-type: none;
 638 | }
 639 | ```
 640 | 
 641 | ###
 642 | **[🔝](#table-of-contents)**
 643 | ###
 644 | ###
 645 | ----
 646 | ### Use a CSS preprocessor  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 647 | 
 648 | [Sass](http://sass-lang.com/) is the most mature, stable, and powerful professional grade CSS extension language in the world.
 649 | 
 650 | There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS.
 651 | 
 652 | ###
 653 | **[🔝](#table-of-contents)**
 654 | ###
 655 | ###
 656 | ----
 657 | ### Use @extend in SASS or group selectors  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 658 | 
 659 | By grouping your selectors, or using `@extend` in SASS, you should help keep your code DRY (Don’t repeat yourself).
 660 | 
 661 | ###### ⚠ Bad Code
 662 | 
 663 | ```css
 664 | p {
 665 |    font-size: 22px;
 666 |   -webkit-font-smoothing: antialiased;
 667 |   -moz-osx-font-smoothing: grayscale;
 668 | }
 669 | h1 {
 670 |   font-size: 41px;
 671 |   color: #000;
 672 |   -webkit-font-smoothing: antialiased;
 673 |   -moz-osx-font-smoothing: grayscale;
 674 | }
 675 | ```
 676 |   
 677 | ###### 👍 Good Code
 678 | 
 679 | ```css
 680 | .font-smoothing {
 681 |   -webkit-font-smoothing: antialiased;
 682 |   -moz-osx-font-smoothing: grayscale;
 683 | }
 684 | 
 685 | p {
 686 |   font-size: 22px;
 687 |   @extend .font-smoothing;
 688 | }
 689 | h1 {
 690 |   font-size: 22px;
 691 |   @extend .font-smoothing;
 692 | }
 693 | ``` 
 694 | 
 695 | ###
 696 | **[🔝](#table-of-contents)**
 697 | ###
 698 | ###
 699 | ----
 700 | ### Use rem units  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 701 | 
 702 | Use REMs, instead of pixels for sizes and spacings, for example font sizes it make based on the `font-size` of the root `<html>` element. They also allow you to quickly scale an entire project by changing the root font size (for example at a certain media query/screen size).
 703 | 
 704 | You will write less code for responsive views:
 705 | 
 706 | ###### ⚠ Bad Code
 707 | 
 708 | ```css
 709 | p {
 710 |   font-size: 22px;
 711 |   padding: 10px;
 712 | }
 713 | 
 714 | @media (max-width: 767px) {
 715 |   p {
 716 |     font-size: 16px;
 717 |     padding: 5px;
 718 |   }
 719 | }
 720 | ```
 721 |   
 722 | ###### 👍 Good Code
 723 | 
 724 | ```css
 725 | html {
 726 |   font-size: 14px;
 727 | }
 728 | @media (max-width: 767px) {
 729 |   html {
 730 |     font-size: 12px;
 731 |   }
 732 | }
 733 | 
 734 | p {
 735 |   font-size: 1.6rem;
 736 |   padding: 1rem;
 737 | }
 738 | ``` 
 739 | 
 740 | ###
 741 | **[🔝](#table-of-contents)**
 742 | ###
 743 | ###
 744 | ----
 745 | ### Before writing a CSS rule think about which element will be affected  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 746 | 
 747 | Always think about which elements will be affected before writing any CSS rule. If your changes won’t be common, then write your rules in a way to affect only a certain element and nothing else.
 748 | 
 749 | ###### ⚠ Bad Code
 750 | 
 751 | ```css
 752 | /* Commonly used class */
 753 | .title {
 754 |     color: #008000;
 755 | }
 756 | ```
 757 |   
 758 | ###### 👍 Good Code
 759 | 
 760 | ```css
 761 | /* Specify it not to affect other titles */
 762 | .section-blog .title {
 763 |     color: #008000;
 764 | }
 765 | ```
 766 | 
 767 | ###
 768 | **[🔝](#table-of-contents)**
 769 | ###
 770 | ###
 771 | ----
 772 | ### Look for existing CSS rules and variables before writing new ones  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 773 | 
 774 | Always look for existing rules that fit the desired styling, both in custom CSS and in the framework. Only if there is nothing adequate, proceed to writing a new one.
 775 | 
 776 | This is particularly important when working with big apps.
 777 | 
 778 | ###### ⚠ Bad Code
 779 | 
 780 | ```css
 781 | .jumbotron {
 782 |   margin-bottom: 20px;
 783 | }
 784 | ```
 785 |   
 786 | ###### 👍 Good Code
 787 | 
 788 | ```css
 789 | // change $jumbotron-padding from _variables.scss
 790 | .jumbotron {
 791 |   margin-bottom: $jumbotron-padding;
 792 | }
 793 | ```
 794 | 
 795 | ###
 796 | **[🔝](#table-of-contents)**
 797 | ###
 798 | ###
 799 | ----
 800 | ### Use specific rules  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 801 | 
 802 | If the background has one property, we specify that property, But if it has different background properties, we can give it one declaration.
 803 | 
 804 | ###### ⚠ Bad Code
 805 | 
 806 | ```css
 807 | .selector {
 808 |   background: #fff;
 809 | }
 810 | ```
 811 |   
 812 | ###### 👍 Good Code
 813 | 
 814 | ```css
 815 | .selector {
 816 |   /* This way background image will not be overwritten if there is any */
 817 |   background-color: #fff;
 818 | }
 819 | ```
 820 | 
 821 | ###
 822 | **[🔝](#table-of-contents)**
 823 | ###
 824 | ###
 825 | ----
 826 | ### Use shorthand properties and values  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 827 | 
 828 | Do your best to use more shorthand properties and values. Using a shorthand property, you can write concise and, more often than not, much more readable style sheets, saving precious time and energy.
 829 | 
 830 | 
 831 | ###### ⚠ Bad Code
 832 | 
 833 | ```css
 834 | img {
 835 |   margin-top: 5px;
 836 |   margin-right: 10px;
 837 |   margin-bottom: 25px;
 838 |   margin-left: 10px;
 839 | }
 840 | button {
 841 |   padding: 0 0 0 20px;
 842 | }
 843 | ```
 844 |   
 845 | ###### 👍 Good Code
 846 | 
 847 | ```css
 848 | img {
 849 |   /* Shorthand style */
 850 |   margin: 5px 10px 25px;
 851 | }
 852 | button {
 853 |   /* Don’t play with shorthand too much */
 854 |   padding-left: 20px;
 855 | }
 856 | ```
 857 | 
 858 | ###
 859 | **[🔝](#table-of-contents)**
 860 | ###
 861 | ###
 862 | ----
 863 | ### `em` instead of `px` for line height  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 864 | 
 865 | Use em instead of px for line height, it gives us flexibility in our designs and the ability to scale elements up and down instead of being stuck with fixed sizes. We can use this flexibility to make our designs easier to adjust during development and more responsive as well as allow browser users to control the overall scale of sites for maximum readability.
 866 | 
 867 | 
 868 | ###### ⚠ Bad Code
 869 | 
 870 | ```css
 871 | p {
 872 |   font-size: 12px;
 873 |   line-height: 24px;
 874 | }
 875 | ```
 876 |   
 877 | ###### 👍 Good Code
 878 | 
 879 | ```css
 880 | p {
 881 |   font-size: 12px;
 882 |   line-height: 2em; /* or just line-height: 2; */
 883 | }
 884 | ```
 885 | 
 886 | ###
 887 | **[🔝 ](#table-of-contents)**
 888 | ###
 889 | ###
 890 | 
 891 | ----
 892 | 
 893 | ### Use specific classes when necessary  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 894 | 
 895 | Keep the CSS selector more specific and select the elements you need; try not to mention their parents if not necessary. It will allow the code to render faster and remove any managing obstacles in future.
 896 | 
 897 | ###### ⚠ Bad Code
 898 | 
 899 | ```html
 900 | section aside h1 span {
 901 |   margin-left: 25%;
 902 | }
 903 | ```
 904 |   
 905 | ###### 👍 Good Code
 906 | 
 907 | ```html
 908 | .left-offset {
 909 |   margin-left: 25%;
 910 | }
 911 | ```
 912 | 
 913 | While applying a class to the targeted element may create more code within HTML, it will allow the code to render faster and will remove any managing obstacles.
 914 | 
 915 | ###
 916 | **[🔝](#table-of-contents)**
 917 | ###
 918 | ###
 919 | ----
 920 | 
 921 | ### Don’t use `reset.css`; use `normalize.css` instead  ![CSS](https://img.shields.io/badge/-CSS-1572B6.svg)
 922 | 
 923 | If you are using Bootstrap, then `normalize.css` is already included there, no need to include it twice.
 924 | 
 925 | ###
 926 | **[🔝 ](#table-of-contents)**
 927 | ###
 928 | ###
 929 | 
 930 | ## Bootstrap
 931 |   
 932 | ### Use Bootstrap classes as much as possible  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
 933 | 
 934 | While this rule could apply to UI frameworks in general, I am using [Bootstrap](http://getbootstrap.com/) as an example, because it is the world’s most popular front-end component library.
 935 | 
 936 | Bootstrap allows you to use a lot of ready classes, making your work easier. Try to use Bootstrap classes as much as possible, to make more HTML-based markup.
 937 | 
 938 | 
 939 | ###### ⚠ Bad Code
 940 | 
 941 | ```html
 942 | <section class="without-bootstrap">
 943 |   <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
 944 |   <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
 945 | </section>
 946 | ```
 947 | ```css
 948 | .first-column,
 949 | .second-column {
 950 |   width: 25%;
 951 |   float: left;
 952 |   padding-left: 15px;
 953 |   padding-right: 15px;
 954 | }
 955 | ```
 956 |   
 957 | ###### 👍 Good Code
 958 | 
 959 | ```html
 960 | <section class="row">
 961 |   <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
 962 |   <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
 963 | </section>
 964 | ```
 965 | 
 966 | ###
 967 | **[🔝](#table-of-contents)**
 968 | ###
 969 | ###
 970 | ----
 971 | ### Use parent item just once in SCSS  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
 972 | 
 973 | When you’re using a CSS preprocessor, and planning to write styling for any section, make sure to use the parent item in CSS just once, and include all child elements and media queries inside its brackets. This will allow you to find and modify the main parent element easily in one place when making changes in future.
 974 | 
 975 | ###### ⚠ Bad Code
 976 | 
 977 | ```css
 978 | .section-parent-class {
 979 |   position: relative;
 980 |   h2 {
 981 |       color: #ff0;
 982 |     }
 983 |   header {
 984 |     margin: 2rem 1rem;
 985 |   }
 986 | }
 987 | 
 988 | @media (max-width: 767px) {
 989 |   .section-parent-class {
 990 |     footer {
 991 |       padding: .5rem;
 992 |     }
 993 |   }
 994 | }
 995 | ```
 996 |   
 997 | ###### 👍 Good Code
 998 | 
 999 | ```css
1000 | .section-parent-class {
1001 |   position: relative;
1002 |   h2 {
1003 |     color: #ff0;
1004 |   }
1005 |   header {
1006 |     margin: 2rem 1rem;
1007 |   }
1008 |   
1009 |   footer {
1010 |     @media (max-width: 767px) {
1011 |       padding: .5rem;
1012 |     }
1013 |   }
1014 | }
1015 | ```
1016 | 
1017 | ###
1018 | **[🔝](#table-of-contents)**
1019 | ###
1020 | ###
1021 | ----
1022 | ### Customize your framework properly  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
1023 | 
1024 | Bootstrap relies on the [variables.scss](https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss) file, which allows you to easily configure and customize your front-end without writing a single line of code. Otherwise, if you are going to manually write all the customizations on your own, you’d be better not to use a framework at all.
1025 | 
1026 | Some developers avoid changing variables.scss, thinking they will still be able to upgrade Bootstrap to a new version without much hassle, but it can be a tedious task. Even minor updates require developers to read the changelog, go through all markup and CSS, and migrate to the new version manually.
1027 | 
1028 | ###### ⚠ Bad Code
1029 | 
1030 | ```css
1031 | .navbar {
1032 |   padding: 20px 10px;
1033 | }
1034 | .carousel-indicators {
1035 |   li {
1036 |     width: 6px;
1037 |     height: 6px;
1038 |     margin-right: 3px;
1039 |     margin-left: 3px;
1040 |   }
1041 | }
1042 | ```
1043 |   
1044 | ###### 👍 Good Code
1045 | 
1046 | ```html
1047 | $navbar-padding-y:      ($spacer / 2) !default;
1048 | $navbar-padding-x:      $spacer !default;
1049 | 
1050 | $carousel-indicator-width:       30px !default;
1051 | $carousel-indicator-height:      3px !default;
1052 | $carousel-indicator-spacer:      3px !default;
1053 | ```
1054 | 
1055 | ###
1056 | **[🔝](#table-of-contents)**
1057 | ###
1058 | ###
1059 | ----
1060 | ### Don’t overwrite `.container` width  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
1061 | 
1062 | Try to not overwrite `.container`’s width. Try using a grid system instead, or just change the container width in `_variables.scss`. If you need to decrease its width, just use max-width instead of width. In that case, `.container` from Bootstrap will stay untouched in responsive views.
1063 | 
1064 | ###### ⚠ Bad Code
1065 | 
1066 | ```css
1067 | .container {
1068 |   @media (min-width: $screen-lg-min) {
1069 |       width: 1300px;
1070 |   }
1071 | }
1072 | ```
1073 |   
1074 | ###### 👍 Good Code
1075 | 
1076 | ```html
1077 | // change $container-lg from _variables.scss
1078 | .container {
1079 |   @media (min-width: $screen-lg-min) {
1080 |     width: $container-lg;
1081 |   }
1082 | }
1083 | ```
1084 | 
1085 | ###
1086 | **[🔝](#table-of-contents)**
1087 | ###
1088 | ###
1089 | ----
1090 | ### Use Bootstrap 4 classes and write less CSS  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
1091 | 
1092 | Start using Bootstrap 4, even though it’s in beta. It includes many new classes which will help you create layouts faster, especially Flexbox and spacers
1093 | 
1094 | ###### ⚠ Bad Code
1095 | 
1096 | ```html
1097 | <div class="flex-ex">
1098 |   <div>Flex item 1</div>
1099 |   <div>Flex item 2</div>
1100 |   <div>Flex item 3</div>
1101 | </div>
1102 | <div class="flex-ex flex-reverse">
1103 |   <div>Flex item 1</div>
1104 |   <div>Flex item 2</div>
1105 |   <div>Flex item 3</div>
1106 | </div>
1107 | ```
1108 | ```css
1109 | .flex-ex {
1110 |   display: flex;
1111 |   > div {
1112 |     padding: 2px;
1113 |   }
1114 |   &.flex-reverse {
1115 |     flex-direction: row-reverse;
1116 |   }
1117 |   li {
1118 |    list-style: none;
1119 |     padding: .5rem;
1120 |   }
1121 | }
1122 | ```
1123 |   
1124 | ###### 👍 Good Code
1125 | 
1126 | ```html
1127 |  <ul class="list-unstyled list-inline d-flex flex-row">
1128 |   <li class="p-2">Flex item 1</li>
1129 |   <li class="p-2">Flex item 2</li>
1130 |   <li class="p-2">Flex item 3</li>
1131 | </ul>
1132 | <ul class="list-unstyled list-inline d-flex flex-row-reverse">
1133 |   <li class="p-2">Flex item 1</li>
1134 |   <li class="p-2">Flex item 2</li>
1135 |   <li class="p-2">Flex item 3</li>
1136 | </ul>
1137 | ```
1138 | 
1139 | Now we can assign classes to an element to remove all borders or some borders.
1140 | 
1141 | ###### ⚠ Bad Code
1142 | 
1143 | ```html
1144 | <div class="border-example2 py-5">
1145 |   <span class="border0"></span>
1146 |   <span class="border-top0"></span>
1147 |   <span class="border-right0"></span>
1148 |   <span class="border-bottom0"></span>
1149 |   <span class="border-left0"></span>
1150 | </div>
1151 | ```
1152 | ```css
1153 | .border-example2 {
1154 |   > span {
1155 |     width: 100px;
1156 |     height: 100px;
1157 |     display: inline-block;
1158 |     margin: .50rem;
1159 |     background-color: #e1e1e1;
1160 |     border: 1px solid;
1161 |       &.border0 {
1162 |         border: none;
1163 |       }
1164 |       &.border-top0 {
1165 |         border-top: none;
1166 |       }
1167 |       &.border-right0 {
1168 |         border-right: none;
1169 |       }
1170 |       &.border-bottom0 {
1171 |         border-bottom: none;
1172 |       }
1173 |       &.border-left0 {
1174 |         border-left: none;
1175 |       }
1176 |     }
1177 | }
1178 | ```
1179 | 
1180 | ###### 👍 Good Code
1181 | 
1182 | ```html
1183 | <div class="border-example py-5">
1184 |   <span class="d-inline-block m-2 border-0"></span>
1185 |   <span class="d-inline-block m-2 border-top-0"></span>
1186 |   <span class="d-inline-block m-2 border-right-0"></span>
1187 |   <span class="d-inline-block m-2 border-bottom-0"></span>
1188 |   <span class="d-inline-block m-2 border-left-0"></span>
1189 | </div>
1190 | ```
1191 | ```css
1192 | .border-example {
1193 |   > span {
1194 |     width: 100px;
1195 |     height: 100px;
1196 |     background-color: #e1e1e1;
1197 |     border: 1px solid;
1198 |   }
1199 | }
1200 | ```
1201 | 
1202 | ###
1203 | **[🔝](#table-of-contents)**
1204 | ###
1205 | ###
1206 | ----
1207 | ### Remove `.col-md-X` and `.col-lg-X` if `.col-sm-X` has same value for X  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
1208 | 
1209 | Don’t write `.col-md-X` and `.col-lg-X` if .col-sm-X has same value for X. For example, there is no need to write `.col-lg-10` because when we write `.col-md-10`, we automatically include `.col-lg-10` in it
1210 | 
1211 | ###### ⚠ Bad Code
1212 | 
1213 | ```html
1214 | <ul class="press-list list-inline row">
1215 |   <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li>
1216 |   <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li>
1217 | </ul>
1218 | ```
1219 | 
1220 | ###### 👍 Good Code
1221 | 
1222 | ```html
1223 | <ul class="press-list list-inline row">
1224 |   <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li>
1225 |   <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li>
1226 | </ul>
1227 | ```
1228 | 
1229 | ###
1230 | **[🔝](#table-of-contents)**
1231 | ###
1232 | ###
1233 | ----
1234 | ### Don’t use `.col-xs-12`  ![Bootstrap](https://img.shields.io/badge/-Bootstrap-7142A8.svg)
1235 | 
1236 | Don’t use `.col-xs-12` because if no .col-xs-X is assigned, then it will be `.col-xs-12` by default.
1237 | 
1238 | ###### ⚠ Bad Code
1239 | 
1240 | ```html
1241 | <section id="services">
1242 |   <div class="container">
1243 |     <div class="row">
1244 |       <div class="col-lg-12 text-center">
1245 |         <h2>Services</h2>
1246 |         <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
1247 |       </div>
1248 |     </div>
1249 |     <div class="row text-center">
1250 |       <div class="col-md-6 col-xs-12">
1251 |         <h4>E-Commerce</h4>
1252 |         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
1253 |       </div>
1254 |     </div>
1255 |   </div>
1256 | </section> 
1257 | ```
1258 | 
1259 | ###### 👍 Good Code
1260 | 
1261 | ```html
1262 | <section id="section-services" class="text-center">
1263 |   <div class="container">
1264 |     <h2>Services</h2>
1265 |     <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
1266 |     <div class="row">
1267 |       <div class="col-md-6">
1268 |         <h4>E-Commerce</h4>
1269 |         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
1270 |       </div>
1271 |     </div>
1272 |   </div>
1273 | </section> 
1274 | ```
1275 | 
1276 | ###
1277 | **[🔝](#table-of-contents)**
1278 | ###
1279 | ###
1280 | 
1281 | ----
1282 | ### Follow guidelines, even if they’re not a best practice
1283 | 
1284 | For the sake of consistency, it’s better to always follow the rules and guidelines you started with (whether they’re about naming, code style, or file structure)
1285 | 
1286 | ----
1287 | ### Wrapping Up
1288 | 
1289 | I hope you have been able to take away something helpful and that you will think more about writing minimal HTML and CSS code with best practices.
1290 | 
1291 | For big companies, it’s quite difficult to maintain big applications when there is messy code. And of course, big companies have the money to pay for good quality. If you follow clean coding principles, you’ll improve your chances of landing a good job. It’s also worth bringing up the freelance aspect: Professionals juggling multiple projects and clients must deliver clean code that can be passed on to other developers in no time.
1292 | 
1293 | I hope to expand to more advanced topics in future posts, as I intend to talk about automating the coding process, using Gulp/Grunt tasks, Linters, Editor plugins, tools that generate code, AI tools that write code instead of you, and other related topics.
1294 | 
1295 | I hope this has been an interesting and informative read. Good luck in your coding endeavors.
1296 | 


--------------------------------------------------------------------------------