├── CNAME ├── favicon.ico ├── _includes ├── js.html ├── tweet-button.html ├── header.html └── footer.html ├── code-guide-logo.png ├── code-guide-social.png ├── cg.scss ├── .editorconfig ├── _config.yml ├── .gitignore ├── _sass ├── _ads.scss ├── _syntax.scss └── _og.scss ├── LICENSE.md ├── _layouts └── default.html ├── README.md ├── code-guide.svg └── index.md /CNAME: -------------------------------------------------------------------------------- 1 | codeguide.co 2 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hansfelix/code-guide/HEAD/favicon.ico -------------------------------------------------------------------------------- /_includes/js.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /code-guide-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hansfelix/code-guide/HEAD/code-guide-logo.png -------------------------------------------------------------------------------- /code-guide-social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hansfelix/code-guide/HEAD/code-guide-social.png -------------------------------------------------------------------------------- /_includes/tweet-button.html: -------------------------------------------------------------------------------- 1 |
2 | Tweet 3 |
4 | -------------------------------------------------------------------------------- /cg.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Front matter comment to ensure Jekyll properly reads file. 3 | --- 4 | 5 | /* 6 | * Code Guide by @mdo 7 | * Licensed MIT 8 | * https://codeguide.co 9 | */ 10 | 11 | @import "ads"; 12 | @import "syntax"; 13 | @import "og"; 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | name: Code Guide by @mdo 2 | description: Estándares para desarrollar HTML y CSS consistentes, flexibles y sostenibles. 3 | url: https://codeguide.co 4 | permalink: pretty 5 | sass: 6 | style: compressed 7 | version: 4.0.0 8 | og_image: https://raw.githubusercontent.com/mdo/code-guide/gh-pages/code-guide-social.png 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _gh_pages 3 | _site 4 | .jekyll-cache 5 | .ruby-version 6 | .sass-cache 7 | 8 | # Numerous always-ignore extensions 9 | *.diff 10 | *.err 11 | *.orig 12 | *.log 13 | *.rej 14 | *.swo 15 | *.swp 16 | *.zip 17 | *.vi 18 | *~ 19 | 20 | # OS or Editor folders 21 | .DS_Store 22 | ._* 23 | Thumbs.db 24 | .cache 25 | .project 26 | .settings 27 | .tmproj 28 | *.esproj 29 | nbproject 30 | *.sublime-project 31 | *.sublime-workspace 32 | .idea 33 | 34 | # Komodo 35 | *.komodoproject 36 | .komodotools 37 | 38 | # grunt-html-validation 39 | validation-status.json 40 | validation-report.json 41 | 42 | # Folders to ignore 43 | node_modules 44 | bower_components 45 | -------------------------------------------------------------------------------- /_sass/_ads.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important, selector-max-id 2 | 3 | // 4 | // Carbon ads 5 | // 6 | 7 | #carbonads { 8 | position: static; 9 | display: block; 10 | max-width: 400px; 11 | padding: 15px 15px 15px 160px; 12 | margin: 2rem 0 0; 13 | overflow: hidden; 14 | font-size: .8125rem; 15 | line-height: 1.4; 16 | text-align: left; 17 | background-color: var(--body-bg); 18 | border: 1px solid var(--border-color); 19 | border-radius: .5rem; 20 | 21 | a { 22 | color: var(--body-color); 23 | text-decoration: none; 24 | } 25 | } 26 | 27 | .carbon-img { 28 | float: left; 29 | margin-left: -145px; 30 | } 31 | 32 | .carbon-poweredby { 33 | display: block; 34 | margin-top: .75rem; 35 | color: var(--accent-color) !important; 36 | } 37 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Code Guide logo 4 |

5 | Guía de Código 6 |

7 |

8 | {{ site.description }} 9 |

10 |

11 | Creado por @mdo · v{{ site.version }} · Repositorio GitHub 12 |

13 |

14 | Traducido por @hansfelix · v{{ site.version }} · Repositorio GitHub 15 |

16 | 17 |
18 |
19 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Mark Otto. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ site.name }} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 44 | 45 | 46 | 47 | 48 | {% include header.html %} 49 | 50 |
51 | {{ content }} 52 | 53 | {% include footer.html %} 54 |
55 | 56 | {% include js.html %} 57 | 58 | 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Code Guide logo 4 | 5 |
6 | Code Guide 7 |

8 | 9 |

10 | Standards for developing consistent, flexible, and sustainable HTML and CSS. 11 |
12 | Start reading ☞ 13 |

14 | 15 | --- 16 | 17 | ## Setup 18 | 19 | Code Guide is built on Jekyll and hosted on GitHub Pages. To install Jekyll: 20 | 21 | ```sh 22 | gem install jekyll 23 | ``` 24 | 25 | To start the local server: 26 | 27 | ```sh 28 | jekyll serve 29 | ``` 30 | 31 | Open `localhost:4000` in your browser. 32 | 33 | ## License 34 | 35 | Released under MIT by, and copyright, @mdo. 36 | 37 | ## Translations 38 | 39 | Translations are maintained by their creators and may not always be up to date with the original here. 40 | 41 | - [Chinese](http://zoomzhao.github.io/code-guide/) - Translated by [Zoom Zhao](https://github.com/ZoomZhao) 42 | - [Chinese](http://codeguide.bootcss.com/) - Translated by [Wang Sai](https://github.com/wangsai) 43 | - [Dutch](http://chunfeilung.github.io/code-guide/) - Translated by [Chun Fei Lung](https://github.com/chunfeilung) 44 | - [French](http://pixelastic.github.io/code-guide/) - Translated by [Tim Carry](https://github.com/pixelastic/) 45 | - [German](http://BackendButters.github.io/code-guide/) - Translated by [BackendButters](https://github.com/BackendButters) 46 | - [German](https://philipbrembeck.github.io/code-guide/) - Translated by [Philip Brembeck](https://github.com/philipbrembeck) 47 | - [Hindi](https://hidaytrahman.github.io/code-guide/) - Translated by [Hidaytullah Rahmani](https://github.com/hidaytrahman) 48 | - [Indonesian](http://diagramatics.github.io/code-guide-id) - Translated by [Steven Sinatra](http://diagramatics.me) 49 | - [Japanese](http://kia-king.com/code-guide/) - Translated by [Kia King Ishii](https://github.com/kiaking) 50 | - [Korean](http://code-guide.aliencube.org/) - Translated by [Aliencube](https://github.com/aliencube) 51 | - [Persian](https://cg.arash-hatami.ir/) - Translated by [Arash Hatami](https://github.com/hatamiarash7) 52 | - [Polish](http://bondarewicz.github.io/code-guide/) - Translated by [Łukasz Bondarewicz](https://github.com/bondarewicz) 53 | - [Portuguese](http://diegoeis.github.io/code-guide/) - Translated by [Diego Eis](http://tableless.com.br/) 54 | - [Romanian](http://vmazare.github.io/code-guide-romanian/) - Translated by [Valeriu Mazare](https://github.com/vmazare) 55 | - [Russian](http://sadcitizen.github.io/code-guide/) - Translated by [Eugene Abrosimov](https://github.com/sadcitizen) 56 | - [Traditional Chinese](https://codeguide.intersection.tw) - Translated by [Yuming Cheung](https://github.com/ymcheung) 57 | 58 | Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. 59 | 60 | <3 61 | -------------------------------------------------------------------------------- /code-guide.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /_sass/_syntax.scss: -------------------------------------------------------------------------------- 1 | // GitHub 2 | :root { 3 | --base00: #ffffff; 4 | --base01: #f5f5f5; 5 | --base02: #c8c8fa; 6 | --base03: #969896; 7 | --base04: #030303; 8 | --base05: #333333; 9 | --base06: #ffffff; 10 | --base07: #b08800; 11 | --base08: #ed6a43; 12 | --base09: #0086b3; 13 | --base0A: #795da3; 14 | --base0B: #183691; 15 | --base0C: #183691; 16 | --base0D: #795da3; 17 | --base0E: #a71d5d; 18 | --base0F: #333333; 19 | } 20 | 21 | // One Light 22 | // :root { 23 | // --base00: #fafafa; 24 | // --base01: #f0f0f1; 25 | // --base02: #e5e5e6; 26 | // --base03: #a0a1a7; 27 | // --base04: #696c77; 28 | // --base05: #383a42; 29 | // --base06: #202227; 30 | // --base07: #090a0b; 31 | // --base08: #ca1243; 32 | // --base09: #d75f00; 33 | // --base0A: #c18401; 34 | // --base0B: #50a14f; 35 | // --base0C: #0184bc; 36 | // --base0D: #4078f2; 37 | // --base0E: #a626a4; 38 | // --base0F: #986801; 39 | // } 40 | 41 | @media (prefers-color-scheme: dark) { 42 | // One Dark 43 | :root { 44 | --base00: #282c34; 45 | --base01: #353b45; 46 | --base02: #3e4451; 47 | --base03: #545862; 48 | --base04: #565c64; 49 | --base05: #abb2bf; 50 | --base06: #b6bdca; 51 | --base07: #d19a66; 52 | --base08: #e06c75; 53 | --base09: #d19a66; 54 | --base0A: #e5c07b; 55 | --base0B: #98c379; 56 | --base0C: #56b6c2; 57 | --base0D: #61afef; 58 | --base0E: #c678dd; 59 | --base0F: #be5046; 60 | } 61 | } 62 | 63 | .hll { background-color: #ffffff } 64 | .c { color: var(--base03) } 65 | .err { color: var(--base08) } 66 | .k { color: var(--base0E) } 67 | .l { color: var(----base09) } 68 | .n { color: var(--base08) } 69 | .o { color: var(--base08) } 70 | .p { color: var(--base05) } 71 | .cm { color: var(--base04) } 72 | .cp { color: var(--base04) } 73 | .c1 { color: var(--base03) } 74 | .cs { color: var(--base04) } 75 | .gd { color: var(--base08) } 76 | .ge { font-style: italic } 77 | .gh { color: #ffffff; font-weight: bold } 78 | .gi { color: var(--base0C) } 79 | .gp { color: var(--base04); font-weight: bold } 80 | .gs { font-weight: bold } 81 | .gu { color: var(--base0C); font-weight: bold } 82 | .kc { color: var(--base0E) } 83 | .kd { color: var(--base0E) } 84 | .kn { color: var(--base0C) } 85 | .kp { color: var(--base0E) } 86 | .kr { color: var(--base0E) } 87 | .kt { color: var(--base0A) } 88 | .ld { color: var(--base0C) } 89 | .m { color: var(--base09) } 90 | .s { color: var(--base0C) } 91 | .na { color: var(--base08) } 92 | .nb { color: var(--base05) } 93 | .nc { color: var(--base07) } 94 | .no { color: var(--base08) } 95 | .nd { color: var(--base07) } 96 | .ni { color: #ffffff } 97 | .ne { color: var(--base08) } 98 | .nf { color: var(--base0B) } 99 | .nl { color: var(--base05) } 100 | .nn { color: var(--base0A) } 101 | .nx { color: var(--base0A) } 102 | .py { color: var(--base08) } 103 | .nt { color: var(--base08) } 104 | .nv { color: var(--base08) } 105 | .ow { color: var(--base0C) } 106 | .w { color: #ffffff } 107 | .mf { color: var(--base09) } 108 | .mh { color: var(--base09) } 109 | .mi { color: var(--base09) } 110 | .mo { color: var(--base09) } 111 | .sb { color: var(--base0C) } 112 | .sc { color: #ffffff } 113 | .sd { color: var(--base04) } 114 | .s2 { color: var(--base0C) } 115 | .se { color: var(--base09) } 116 | .sh { color: var(--base0C) } 117 | .si { color: var(--base09) } 118 | .sx { color: var(--base0C) } 119 | .sr { color: var(--base0C) } 120 | .s1 { color: var(--base0C) } 121 | .ss { color: var(--base0C) } 122 | .bp { color: var(--base05) } 123 | .vc { color: var(--base08) } 124 | .vg { color: var(--base08) } 125 | .vi { color: var(--base08) } 126 | .il { color: var(--base09) } 127 | 128 | // Color commas in rgba() values 129 | .m + .o { color: var(--base03) } 130 | 131 | // Fix bash 132 | .language-sh .c { color: var(--base03) } -------------------------------------------------------------------------------- /_sass/_og.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Global 3 | // 4 | 5 | :root { 6 | --blue: #0d6efd; 7 | --indigo: #6610f2; 8 | --purple: #6f42c1; 9 | --pink: #d63384; 10 | --red: #dc3545; 11 | --orange: #fd7e14; 12 | --yellow: #ffc107; 13 | --green: #198754; 14 | --teal: #20c997; 15 | --cyan: #0dcaf0; 16 | --white: #fff; 17 | --gray: #6c757d; 18 | --gray-dark: #343a40; 19 | 20 | --blue-300: #6ea8fe; 21 | --blue-700: #084298; 22 | 23 | --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 24 | --font-heading: InterDisplay; 25 | 26 | --body-bg: #fff; 27 | --body-color: #212529; 28 | --secondary-color: #6c757d; 29 | --border-color: rgba(0, 0, 0, .1); 30 | --accent-bg: #f8f9fa; 31 | --link-color: var(--blue); 32 | --masthead-bg: var(--accent-bg); 33 | --gap: 2rem; 34 | } 35 | 36 | @media (prefers-color-scheme: dark) { 37 | :root { 38 | --body-bg: #212529; 39 | --body-color: #dee2e6; 40 | --accent-bg: #2a2f34; 41 | --link-color: var(--blue-300); 42 | --border-color: rgba(255, 255, 255, .1); 43 | } 44 | } 45 | 46 | *, 47 | *::before, 48 | *::after { 49 | box-sizing: border-box; 50 | } 51 | 52 | html { 53 | font-size: 16px; 54 | font-family: var(--font); 55 | line-height: 1.5; 56 | } 57 | 58 | body { 59 | margin: 0; 60 | color: var(--body-color); 61 | background-color: var(--body-bg); 62 | } 63 | 64 | a { 65 | color: var(--link-color); 66 | text-decoration: none; 67 | 68 | &:hover { 69 | text-decoration: underline; 70 | } 71 | 72 | code { 73 | color: inherit; 74 | } 75 | } 76 | 77 | h1, h2, h3, h4 { 78 | margin-top: 0; 79 | margin-bottom: .5rem; 80 | font-family: var(--font-heading), var(--font); 81 | font-weight: 600; 82 | line-height: 1; 83 | } 84 | h1 { font-size: 2.5rem; } 85 | h2 { font-size: 2rem; } 86 | h3 { font-size: 1.75rem; } 87 | h4 { font-size: 1.5rem } 88 | 89 | p { 90 | margin-top: 0; 91 | margin-bottom: 1rem; 92 | } 93 | 94 | blockquote { 95 | position: relative; 96 | margin: 0 1rem 1rem; 97 | font-style: italic; 98 | color: #7a7a7a; 99 | 100 | p { 101 | margin-bottom: 0; 102 | } 103 | } 104 | 105 | ul { 106 | padding-left: 1.5em; 107 | } 108 | 109 | li { 110 | padding-inline-start: 1.5ch; 111 | margin-bottom: .25rem; 112 | list-style-type: "—"; 113 | 114 | &::marker { color: var(--secondary-color); } 115 | } 116 | 117 | p:last-child, 118 | ul:last-child, 119 | blockquote:last-child { 120 | margin-bottom: 0; 121 | } 122 | 123 | 124 | // 125 | // Code 126 | // 127 | 128 | code, 129 | pre { 130 | font-family: "SFMono-Regular", Menlo, "Courier New", monospace; 131 | font-size: 95%; 132 | } 133 | code { 134 | font-size: 85%; 135 | color: var(--pink); 136 | border-radius: .2rem; 137 | } 138 | 139 | pre { 140 | display: block; 141 | margin: 0 0 1rem; 142 | line-height: 1.4; 143 | white-space: pre; 144 | white-space: pre-wrap; 145 | 146 | code { 147 | padding: 0; 148 | color: inherit; 149 | background-color: transparent; 150 | border: 0; 151 | } 152 | } 153 | 154 | .highlight { 155 | margin: 0; 156 | background-color: var(--accent-bg); 157 | 158 | pre { 159 | margin-bottom: 0; 160 | padding: var(--gap); 161 | } 162 | 163 | & + .highlight { 164 | margin-top: 1rem; 165 | } 166 | } 167 | 168 | 169 | // 170 | // Masthead 171 | // 172 | 173 | .cg-icon { 174 | display: block; 175 | width: 128px; 176 | height: 128px; 177 | margin-left: -.75rem; 178 | margin-bottom: 1.5rem; 179 | 180 | @media (min-width: 768px) { 181 | width: 192px; 182 | height: 192px; 183 | margin-left: -1.25rem; 184 | } 185 | } 186 | 187 | .cg-masthead { 188 | padding-top: 2rem; 189 | padding-bottom: 3rem; 190 | margin-bottom: 1.5rem; 191 | background-color: var(--masthead-bg); 192 | 193 | p { 194 | margin-bottom: 1rem; 195 | } 196 | 197 | @media (min-width: 960px) { 198 | padding-top: 3rem; 199 | padding-bottom: 4rem; 200 | } 201 | } 202 | 203 | .cg-masthead-title { 204 | margin-bottom: 1rem; 205 | font-size: 4rem; 206 | font-weight: 700; 207 | line-height: .9; 208 | color: inherit; 209 | 210 | @media (min-width: 768px) { 211 | font-size: 6rem; 212 | } 213 | } 214 | 215 | .cg-masthead-subtitle { 216 | max-width: 46rem; 217 | margin-bottom: 1.5rem; 218 | font-size: 1.5rem; 219 | line-height: 1.25; 220 | 221 | @media (min-width: 768px) { 222 | font-size: 2rem; 223 | } 224 | } 225 | 226 | 227 | // 228 | // Content 229 | // 230 | 231 | .container { 232 | max-width: 80em; 233 | padding-right: 2rem; 234 | padding-left: 2rem; 235 | margin-right: auto; 236 | margin-left: auto; 237 | 238 | @media (min-width: 768px) { 239 | padding-right: 3rem; 240 | padding-left: 3rem; 241 | } 242 | } 243 | 244 | .content { 245 | display: flex; 246 | flex-direction: column; 247 | gap: var(--gap); 248 | 249 | @media (min-width: 768px) { 250 | display: grid; 251 | grid-template-columns: repeat(2, 1fr); 252 | gap: calc(var(--gap) * 2) var(--gap); 253 | align-items: stretch; 254 | 255 | h2 { 256 | grid-column: auto / span 2; 257 | } 258 | 259 | .highlight { 260 | height: 100%; 261 | } 262 | } 263 | } 264 | 265 | 266 | // 267 | // The Grid 268 | // 269 | 270 | @media (min-width: 768px) { 271 | .col, 272 | blockquote { 273 | grid-column: auto / span 1; 274 | } 275 | } 276 | 277 | 278 | // 279 | // Sections 280 | // 281 | 282 | h2 { 283 | padding-top: 1rem; 284 | margin-top: 3rem; 285 | margin-bottom: 0; 286 | border-top: .25rem solid; 287 | } 288 | 289 | 290 | // 291 | // Footer 292 | // 293 | 294 | .footer { 295 | grid-column: auto / span 2; 296 | padding-top: 3rem; 297 | padding-bottom: 3rem; 298 | margin-top: 5rem; 299 | border-top: .25rem solid; 300 | } 301 | 302 | .footer p { 303 | margin-bottom: .5rem; 304 | } 305 | 306 | .quick-links { 307 | display: flex; 308 | gap: 1.25rem; 309 | list-style: none; 310 | margin-left: 0; 311 | padding-left: 0; 312 | } 313 | .quick-links li { 314 | display: inline; 315 | padding-inline-start: 0; 316 | } 317 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |

Tabla de contenido

6 | 7 |
8 | ### [HTML](#html) 9 | 10 | - [Sintaxis](#html-syntax) 11 | - [HTML5 doctype](#html5-doctype) 12 | - [Atributo de idioma](#language-attribute) 13 | - [Modo de compatibilidad con IE](#ie-compatibility-mode) 14 | - [Codificación de caracteres](#character-encoding) 15 | - [Vinculación de archivos CSS y JavaScript](#css-and-javascript-includes) 16 | - [Practicidad sobre pureza](#practicality-over-purity) 17 | - [Orden de los atributos](#attribute-order) 18 | - [Atributos booleanos](#boolean-attributes) 19 | - [Reducir las etiquetas](#reduce-markup) 20 | - [Preferencias del editor](#editor-preferences) 21 |
22 | 23 |
24 | ### [CSS](#css) 25 | 26 | - [Sintaxis CSS](#css-syntax) 27 | - [Orden en la declaración](#declaration-order) 28 | - [Colores](#colors) 29 | - [Propiedades lógicas](#logical-properties) 30 | - [Evite los `@import`s](#avoid-imports) 31 | - [Ubicación de los media query](#media-query-placement) 32 | - [Declaraciones de una línea](#single-declarations) 33 | - [Notaciones abreviadas](#shorthand-notation) 34 | - [Anidamiento en preprocesadores](#nesting-in-preprocessors) 35 | - [Operadores en preprocesadores](#operators-in-preprocessors) 36 | - [Comentarios](#comments) 37 | - [Nombre de las clases](#class-names) 38 | - [Selectores](#selectors) 39 | - [Selectores de hijos y de descendientes](#child-and-descendant-selectors) 40 | - [Organización](#organization) 41 |
42 | 43 | ## Regla de oro 44 | 45 | Cumpla los siguientes estándares, o los suyos, en todo momento. No importa si el error es pequeño o grande, evite lo que es incorrecto. Para adiciones o contribuciones a esta Guía de código, [cree un issue en GitHub](https://github.com/mdo/code-guide/issues/new). 46 | 47 | > Cada línea de código debe parecer escrita por una sola persona, no importa el número de contribuyentes que tenga el proyecto. 48 | 49 | ## HTML 50 | 51 |
52 | ### Sintaxis 53 | {: #html-syntax } 54 | 55 | - No use mayúsculas en las etiquetas HTML, incluido el `doctype`. 56 | - Use dos espacios en blanco para formatear y definir niveles entre las etiquetas HTML—es la única forma de garantizar que el código se renderice de la misma manera en cualquier entorno. 57 | - Elementos anidados deben indentarse una vez (con dos espacios). 58 | - Utilice siempre comillas dobles, nunca comillas simples para los atributos. 59 | - No incluya una barra inclinada final en los elementos de cierre automático—la [especificación de HTML5](https://html.spec.whatwg.org/multipage/syntax.html#syntax-start-tag) nos dice que es opcional. 60 | - No omita las etiquetas de cierre opcionales (p. ej. `` o ``). 61 |
62 | 63 | ```html 64 | 65 | 66 | 67 | Page title 68 | 69 | 70 | Company 71 |

Hello, world!

72 | 73 | 74 | ``` 75 | 76 |
77 | ### HTML5 doctype 78 | {: #html5-doctype } 79 | 80 | Utilice el [modo estándar](https://developer.mozilla.org/es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) para una representación más consistente en todos los navegadores declarando el `doctype` simple al comienzo de cada página HTML. Manteniendo la sintaxis sugerida use siempre minúsculas. 81 | 82 |
83 | 84 | ```html 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | ``` 95 | 96 |
97 | ### Atributo de idioma 98 | {: #language-attribute } 99 | 100 | De acuerdo a las especificaciones HTML5: 101 | 102 | > Se recomienda a los autores a especificar el atributo lang en el elemento html raíz, dando el idioma del documento. Esto ayuda a las herramientas de síntesis de voz a determinar qué pronunciaciones usar y a las herramientas de traducción a determinar qué reglas usar, etc. 103 | 104 | Lea más información sobre el atributo `lang` en las [especificaciones de HTML5](https://html.spec.whatwg.org/multipage/semantics.html#the-html-element). Dirígase a la IANA para obtener una [lista de códigos de idioma](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry). 105 |
106 | 107 | ```html 108 | 109 | 110 | 111 | ``` 112 | 113 |
114 | ### Modo de compatibilidad con IE 115 | {: #ie-compatibility-mode } 116 | 117 | No es necesario incluir la etiqueta `` para compatibilidad de documentos de Internet Explorer en estos días, a menos que necesite soporte para IE10 y versiones anteriores. La etiqueta se eliminó en IE11 y no se usa en Microsoft Edge (heredado o no). 118 | 119 | Para más información, [lea este increíble artículo de Stack Overflow](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do). 120 |
121 | 122 | ```html 123 | 124 | 125 | ``` 126 | 127 |
128 | ### Codificación de caracteres 129 | {: #character-encoding } 130 | 131 | Garantice una representación adecuada del contenido declarando una codificación de caracteres explícita. Esto también le permite usar caracteres regulares en lugar de sus entidades HTML, como `—` en lugar de `&emdash;`, siempre que su codificación coincida con la del documento. Para algunos caracteres XML reservados, como ampersand, espacios de no separación, menor/mayor que y comillas, es posible que aún necesite usar las entidades HTML. 132 | 133 | UTF-8 es la codificación recomendada. 134 |
135 | 136 | ```html 137 | 138 | 139 | 140 | 141 |

Para usar un guión largo como — no es requerido una entidad HTML.

142 | 143 | ``` 144 | 145 |
146 | ### Vinculación de archivos CSS y JavaScript 147 | {: #css-and-javascript-includes } 148 | 149 | Según la especificación de HTML5, normalmente no es necesario especificar el atributo `type` cuando se incluyen archivos CSS y JavaScript, ya que `text/css` y `text/javascript` son sus respectivos valores predeterminados. 150 | 151 | #### Especificaciones HTML5 152 | 153 | - [Usando link](https://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element) 154 | - [Usando style](https://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element) 155 | - [Usando script](https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element) 156 |
157 | 158 | ```html 159 | 160 | 161 | 162 | 163 | 166 | 167 | 168 | 169 | ``` 170 | 171 |
172 | ### Practicidad sobre pureza 173 | {: #practicality-over-purity } 174 | 175 | Esfuércese por mantener los estándares y semántica HTML, pero no a costa de la practicidad. Use la menor cantidad de marcado con la menor cantidad de complejidades, siempre que sea posible. 176 |
177 | 178 | ```html 179 | 180 | 181 | 182 | 183 |
...
184 | ``` 185 | 186 |
187 | ### Orden de los atributos 188 | {: #attribute-order } 189 | 190 | Los atributos HTML deben seguir este orden particular para facilitar la lectura del código. 191 | 192 | - `class` 193 | - `id`, `name` 194 | - `data-*` 195 | - `src`, `for`, `type`, `href`, `value` 196 | - `title`, `alt` 197 | - `role`, `aria-*` 198 | - `tabindex` 199 | - `style` 200 | 201 | Los atributos que más se usan para identificar elementos deben ir primero— atributos `class`, `id`, `name` y `data`. Los atributos misceláneos exclusivos de elementos específicos ocupan el segundo lugar, seguidos de los atributos relacionados con la accesibilidad y el estilo. 202 |
203 | 204 | ```html 205 | 206 | Link de ejemplo 207 | 208 | 209 | 210 | 211 | ... 212 | ``` 213 | 214 |
215 | ### Atributos booleanos 216 | {: #boolean-attributes } 217 | 218 | Un atributo booleano es aquel que no necesita un valor declarado. XHTML requería que declarara un valor, pero HTML5 no tiene tal requisito. 219 | 220 | Para más información, consulte la [sección de WhatWG sobre atributos booleanos](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) 221 | 222 | > La presencia de un atributo booleano en un elemento representa el valor verdadero y la ausencia del atributo representa el valor falso. 223 | 224 | Si debe incluir el valor del atributo y **no es necesario**, siga esta guía de WhatWG: 225 | 226 | > Si el atributo está presente, su valor debe ser la cadena vacía o […] el nombre canónico del atributo, sin espacios en blanco al principio o al final. 227 | 228 | En resumen, **no añada un valor**. 229 |
230 | 231 | ```html 232 | 233 | 234 | 235 | 236 | 239 | ``` 240 | 241 |
242 | ### Reducir las etiquetas 243 | {: #reduce-markup } 244 | 245 | Siempre que sea posible, evite los elementos padres redundantes al escribir HTML. Muchas veces esto requiere iteración y refactorización de código, pero produce menos HTML. 246 |
247 | 248 | ```html 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | ``` 257 | 258 |
259 | ### Preferencias del editor 260 | {: #editor-preferences } 261 | 262 | Pepare su editor con las siguientes configuraciones para evitar inconsistencias de código comunes y diferencias: 263 | 264 | - Usar tabulaciones suaves con dos espacios. 265 | - Eliminar el espacio en blaco al final de cada línea al guardar. 266 | - Establecer la codificación en UTF-8. 267 | - Agregar una nueva línea en blanco al final de cada archivos. 268 | 269 | Considere documentar y aplicar estas preferencias al archivo `.editorconfig` de su proyecto. Para ver un ejemplo, revise [el de Bootstrap](https://github.com/twbs/bootstrap/blob/main/.editorconfig). Obtenga más información [sobre EditorConfig](https://editorconfig.org). 270 |
271 | 272 | ## CSS 273 | 274 |
275 | ### Sintaxis CSS 276 | {: #css-syntax } 277 | 278 | - Use tabulaciones suaves con dos espacios—son la única forma de garantizar que el código se reproduzca de la misma manera en cualquier entorno. 279 | - Cuando agrupe selectores, mantenga los selectores individuales en una sola línea. 280 | - Incluya un espacio en blanco antes de la llave de apertura de los bloques de declaración, para facilitar la legibilidad. 281 | - Coloque las llaves de cierre de los bloques de declaración en una nueva línea. 282 | - Incluya un espacio en blanco después de `:` para cada declaración. 283 | - Cada declaración debe aparecer en su propia línea para un informe de errores más preciso. 284 | - Termine todas las declaraciones con un punto y coma. En la última declaración es opcional, pero su código es más propenso a errores sin ella. 285 | - Los valores de propiedad separados por comas deben incluir un espacio después de cada coma (por ejemplo: `box-shadow`). 286 | - Usar valores separados por espacios para las propiedades de color (por ejemplo: `color: rgb(0 0 0 / .5)`). [Consulte la sección Colores de esta guía para más información.](#colors) 287 | - No prefije los valores de propiedad o los parámetros de color con un cero inicial (por ejemplo: `.5` en vez de `0.5` y `-.5px` en vez de `-0.5px`). 288 | - Ponga en minúsculas todos los valores hexadecimales, por ejemplo, `#fff`. Las letras minúsculas son mucho más fáciles de distinguir al escanear un documento, ya que tienden a tener formas más únicas. 289 | - Utilice valores hexadecimales abreviados cuando estén disponibles, por ejemplo, `#fff` en vez de `#ffffff`. 290 | - Utilice valores de atributo en selectores, por ejemplo, `input[type="text"]`. [Solo son opcionales en algunos casos](https://mathiasbynens.be/notes/unquoted-attribute-values#css), y es una buena práctica para mantener la coherencia. 291 | - Evite especificar unidades para valores cero, por ejemplo, `margin: 0;` en vez de `margin: 0px;`. 292 | 293 | ¿Preguntas sobre los términos utilizados aquí? Consulte la [sección de sintaxis del artículo Hojas de Estilo en Cascada](https://es.wikipedia.org/wiki/CSS) en Wikipedia. 294 |
295 | 296 | ```scss 297 | // Mal CSS 298 | .selector, .selector-secondary, .selector[type=text] { 299 | padding:15px; 300 | margin:0px 0px 15px; 301 | background-color:rgba(0, 0, 0, 0.5); 302 | box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF 303 | } 304 | 305 | // Buen CSS 306 | .selector, 307 | .selector-secondary, 308 | .selector[type="text"] { 309 | padding: 15px; 310 | margin-bottom: 15px; 311 | background-color: rgb(0 0 0 / .5); 312 | box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; 313 | } 314 | ``` 315 | 316 |
317 | ### Orden en la declaración 318 | {: #declaration-order } 319 | 320 | Las declaraciones de las propiedades CSS deben agruparse en el siguiente orden: 321 | 322 | 1. Posicionamiento 323 | 2. Modelo de caja 324 | 3. Tipografía 325 | 4. Visual 326 | 5. Misceláneo 327 | 328 | El posicionamiento es lo primero porque puede eliminar un elemento del flujo normal del documento y anular los estilos relacionados con el modelo de caja. El modelo de caja—ya sea `flex`, `float`, `grid` o `table`—es lo siguiente, ya que dicta las dimensiones, la ubicación y la alineación del componente. Todo lo demás tiene lugar _dentro_ del componente o no afecta a las dos grupos anteriores, por lo que quedan en último lugar. 329 | 330 | Si bien `border` es parte del modelo de caja, la mayoría de los sistemas restablecen globalmente el [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) a `border-box` para que `border-width` no afecte las dimensiones generales. 331 | Todo esto, combinado con mantener el `border` cerca de `border-radius`, es la razón por la que está en la sección visual. 332 | 333 | Los mixins y funciones de los preprocesadores deben aparecer donde sea más apropiado. Por ejemplo, un mixin `border-top-radius()` reemplazaría las propiedades `border-radius`, mientras que una función `responsive-font-size()` reemplazaría las propiedades `font-size`. 334 | 335 | Para obtener una lista completa de propiedades y su orden, consulte el [orden de propiedades de Stylelint](https://github.com/stormwarning/stylelint-config-recess-order) utilizado por [Bootstrap](https://getbootstrap.com). 336 |
337 | 338 | ```scss 339 | .declaration-order { 340 | // Posicionamiento 341 | position: absolute; 342 | top: 0; 343 | right: 0; 344 | bottom: 0; 345 | left: 0; 346 | z-index: 100; 347 | 348 | // Modelo de caja 349 | display: flex; 350 | flex-direction: column; 351 | justify-content: center; 352 | align-items: center; 353 | width: 100px; 354 | height: 100px; 355 | 356 | // Tipografía 357 | font: normal 14px "Helvetica Neue", sans-serif; 358 | line-height: 1.5; 359 | color: #333; 360 | text-align: center; 361 | text-decoration: underline; 362 | 363 | // Visual 364 | background-color: #f5f5f5; 365 | border: 1px solid #e5e5e5; 366 | border-radius: 3px; 367 | 368 | // Misceláneo 369 | opacity: 1; 370 | } 371 | ``` 372 | 373 |
374 | ### Propiedades lógicas 375 | {: #logical-properties } 376 | 377 | Las propiedades lógicas son alternativas a las propiedades direccionales y dimensionales basadas en términos como *block* e *inline*. Por defecto, *block* se refiere a la dirección vertical (arriba y abajo) mientras que *inline* se refiere a la dirección horizontal (derecha e izquierda). Puede comenzar a usar estos valores en su CSS en todos los navegadores modernos y futuros. 378 | 379 | **¿Por qué usar propiedades lógicas?** No todos los idiomas se escriben de izquierda a derecha como el español o inglés, por lo que el [writing mode](https://developer.mozilla.org/es/docs/Web/CSS/writing-mode) debe ser flexible. Con propiedades lógicas, puede admitir fácilmente idiomas que se pueden escribir horizontal o verticalmente (como el chino, japonés y coreano). Además, estas propiedades suelen ser más breves y fáciles de escribir. 380 | 381 | **Más información:** 382 | 383 | - [Propiedades y Valores Lógicos de CSS – MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_logical_properties_and_values) 384 | - [CSS Logical Properties and Values — CSS Tricks](https://css-tricks.com/css-logical-properties-and-values/) 385 | - [CSS Writing Modes – MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Writing_Modes) 386 |
387 | 388 | ```scss 389 | // Sin propiedades lógicas 390 | .element { 391 | margin-right: auto; 392 | margin-left: auto; 393 | border-top: 1px solid #eee; 394 | border-bottom: 1px solid #eee; 395 | } 396 | 397 | // Con propiedades lógicas 398 | .element { 399 | margin-inline: auto; 400 | border-block: 1px solid #eee; 401 | } 402 | ``` 403 | 404 |
405 | ### Colores 406 | {: #colors } 407 | 408 | Con el soporte de [CSS Color Levels 4](https://www.w3.org/TR/css-color-4/) [en todos los principales navegadores](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#browser_compatibility), `rgba()` y `hsla()` ahora son alias para `rgb()` y `hsl()`, lo que significa que puede modificar los valores alpha en `rgb()` y `hsl()`. Junto con esto viene el soporte para la nueva sintaxis separada por espacios para los valores de color. Para compatibilidad con futuras funciones de color CSS use esta nueva sintaxis. 409 | 410 | Independientemente de los valores y la sintaxis de color, siempre asegúrese de que sus opciones de color cumplan con las [relaciones de contraste mínimas de WCAG](https://webaim.org/articles/contrast/) (4,5:1 para 16 px y más pequeños, 3:1 para más grandes). 411 | 412 | **Más información:** 413 | 414 | - [Smashing Magazine - A Guide To Modern CSS Colors](https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/) 415 | - [`rgb()` - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb) 416 |
417 | 418 | ```css 419 | .element { 420 | color: rgb(255 255 255 / .65); 421 | background-color: rgb(0 0 0 / .95); 422 | } 423 | ``` 424 | 425 |
426 | ### Evite los `@import`s 427 | {: #avoid-imports } 428 | 429 | En comparación con ``, `@import` es más lento, ya que agrega solicitudes de página adicionales y puede causar otros problemas no previstos. Evítelos y opte por un enfoque alternativo: 430 | 431 | Compared to ``s, `@import` is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach: 432 | 433 | - Use elementos `` 434 | - Compile su CSS en un solo archivo con preprocesadores como [Sass](https://sass-lang.com/) o [Less](https://lesscss.org/) 435 | - Concatene sus archivos CSS con funciones proporcionadas en Rails, Jekyll y otros entornos 436 | 437 | Para más información, [puede leer este artículo de Steve Souders](https://www.stevesouders.com/blog/2009/04/09/dont-use-import/). 438 |
439 | 440 | ```html 441 | 442 | 443 | 444 | 445 | 448 | ``` 449 | 450 |
451 | ### Ubicación de los media query 452 | {: #media-query-placement } 453 | 454 | Ubique las sentencias media query lo más cerca posible de sus conjuntos de reglas relevantes, siempre que sea posible. No los agrupe todos en una hoja de estilo separada o al final del documento, hacer esti solo hará que sea más fácil que los desarrolladores los olviden a futuro. 455 | Aquí hay una configuración de ejemplo. 456 |
457 | 458 | ```css 459 | .element { ... } 460 | .element-avatar { ... } 461 | .element-selected { ... } 462 | 463 | @media (min-width: 480px) { 464 | .element { ... } 465 | .element-avatar { ... } 466 | .element-selected { ... } 467 | } 468 | ``` 469 | 470 |
471 | ### Declaraciones de una línea 472 | {: #single-declarations } 473 | 474 | En los casos en que un conjunto de reglas incluya **solo una declaración**, considere eliminar los saltos de línea para facilitar la lectura y una edición más rápida. Cualquier conjunto de reglas con múltiples declaraciones debe dividirse en líneas separadas. 475 | 476 | El factor clave aquí es la detección de errores, por ejemplo, un validador de CSS que indica que tiene un error de sintaxis en la línea 183. Con una sola declaración, no se puede perder. Con múltiples declaraciones, las líneas separadas son imprescindibles para su entendimiento. 477 |
478 | 479 | ```scss 480 | // Declaración de una sola línea 481 | .span1 { width: 60px; } 482 | .span2 { width: 140px; } 483 | .span3 { width: 220px; } 484 | 485 | // Declaraciones de varias líneas, una por línea 486 | .sprite { 487 | display: inline-block; 488 | width: 16px; 489 | height: 15px; 490 | background-image: url("../img/sprite.png"); 491 | } 492 | .icon { background-position: 0 0; } 493 | .icon-home { background-position: 0 -20px; } 494 | .icon-account { background-position: 0 -40px; } 495 | ``` 496 | 497 |
498 | ### Notaciones abreviadas 499 | {: #shorthand-notation } 500 | 501 | Limite el uso de propiedades abreviadas a instancias en las que debe establecer explícitamente todos los valores disponibles. Las propiedades abreviadas que se suelen usar en exceso frecuentemente incluyen: 502 | 503 | - `padding` 504 | - `margin` 505 | - `font` 506 | - `background` 507 | - `border` 508 | - `border-radius` 509 | 510 | Por lo general, no necesitamos establecer todos los valores que representa una propiedad abreviada. Por ejemplo, los encabezados HTML solo establecen el margen superior e inferior, por lo que si es necesario, solo anule esos dos valores. Un valor `0` implica una anulación de un valor predeterminado del navegador o un valor especificado previamente. 511 | 512 | El uso excesivo de propiedades abreviadas conduce a un código más descuidado con anulaciones innecesarias y efectos secundarios no deseados. 513 | 514 | La *Mozilla Developer Network* tiene un excelente artículo sobre [propiedades abreviadas](https://developer.mozilla.org/es/docs/Web/CSS/Shorthand_properties) para aquellos que no esten familiarizados con su notación y comportamiento. 515 |
516 | 517 | ```scss 518 | // Mal ejemplo 519 | .element { 520 | margin: 0 0 10px; 521 | background: red; 522 | background: url("image.jpg"); 523 | border-radius: 3px 3px 0 0; 524 | } 525 | 526 | // Buen ejemplo 527 | .element { 528 | margin-bottom: 10px; 529 | background-color: red; 530 | background-image: url("image.jpg"); 531 | border-top-left-radius: 3px; 532 | border-top-right-radius: 3px; 533 | } 534 | ``` 535 | 536 |
537 | ### Anidamiento en preprocesadores 538 | {: #nesting-in-preprocessors } 539 | 540 | Evite el anidamiento innecesario en los preprocesadores siempre que sea posible—manténgalo simple y evite el anidamiento inverso. Considere anidar solo si debe aplicar estilos a un padre y si este tiene varios elementos para anidar. 541 | 542 | **Más información:** 543 | 544 | - Nesting in Sass and Less 545 |
546 | 547 | ```scss 548 | // Sin anidamiento 549 | .table > thead > tr > th { … } 550 | .table > thead > tr > td { … } 551 | 552 | // Con anidamiento 553 | .table > thead > tr { 554 | > th { … } 555 | > td { … } 556 | } 557 | ``` 558 | 559 |
560 | ### Operadores en preprocesadores 561 | {: #operators-in-preprocessors } 562 | 563 | Para mejorar la legibilidad, encierre todas las operaciones matemáticas entre paréntesis separadas con un espacio en blanco entre valores, variables y operadores. 564 |
565 | 566 | ```scss 567 | // Mal ejemplo 568 | .element { 569 | margin: 10px 0 @variable*2 10px; 570 | } 571 | 572 | // Buen ejemplo 573 | .element { 574 | margin: 10px 0 (@variable * 2) 10px; 575 | } 576 | ``` 577 | 578 |
579 | ### Comentarios 580 | {: #comments } 581 | 582 | El código es escrito y mantenido por varias personas. Asegúrese de que su código sea descriptivo, correctamente comentado y accesible para los demás. Los grandes comentarios de código transmiten contexto o propósito. No reitere simplemente el nombre de un componente o clase. Utilice la sintaxis de comentario `//` al escribir CSS con preprocesadores. Al enviar CSS a producción elimine todos los comentarios. 583 | 584 | Asegúrese de escribir oraciones completas para comentarios más extensos y frases breves para notas generales. 585 |
586 | 587 | ```scss 588 | // Mal ejemplo 589 | // Cabecera del modal 590 | .modal-header { 591 | ... 592 | } 593 | 594 | // Buen ejemplo 595 | // Elemento que encierra a .modal-title y .modal-close 596 | .modal-header { 597 | ... 598 | } 599 | ``` 600 | 601 |
602 | ### Nombre de las clases 603 | {: #class-names } 604 | 605 | - Mantenga las clases en minúsculas y use guiones (no guiones bajos ni camelCase). Los guiones sirven como separaciones naturales en el nombre de la clase (por ejemplo, `.btn` y `.btn-danger`). 606 | - Evite una notación abreviada excesiva y arbitraria. `.btn` es útil para referirse a un _button_, pero `.s` no significa nada. 607 | - Mantenga las clases tan cortas y concisa como sea posible. 608 | - Use nombres significativos; use nombres con estructuras o con un propósito definido por encima de que sea vistoso. 609 | - Los prefijos de las clases deben estar basadas en la clase padre o base más cercana. 610 | - Use clases `.js-*` para indicar el comportamiento (a diferencia del estilo), y mantenga estas clases fuera de sus estilos CSS. 611 | 612 | También es útil aplicar muchas de estas mismas reglas al crear propiedades personalizadas y nombres de variables de preprocesadores. 613 |
614 | 615 | ```scss 616 | // Mal ejemplo 617 | .t { ... } 618 | .red { ... } 619 | .header { ... } 620 | 621 | // Buen ejemplo 622 | .tweet { ... } 623 | .important { ... } 624 | .tweet-header { ... } 625 | ``` 626 | 627 |
628 | ### Selectores 629 | {: #selectors } 630 | 631 | - Prefiera usar clases sobre elementos HTML genéricos para un estilo más explícito y confiable que no dependa de su marcado. 632 | - Evite usar varios selectores de atributos (por ejemplo, `[class^="..."]`) en componentes comunes. Se sabe que el rendimiento del navegador se ve afectado por este tipo de selectores. 633 | - Mantenga los selectores cortos y esfuércese por limitar la cantidad de elementos en cada selector a tres. 634 | - Utilice el alcance de las clases al padre más cercano `solo` cuando sea necesario (por ejemplo, cuando no se usen clases prefijadas). 635 | 636 | **Más información:** 637 | 638 | - [Scope CSS classes with prefixes](https://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/) 639 | - [Stop the cascade](https://markdotto.com/2012/03/02/stop-the-cascade/) 640 |
641 | 642 | ```scss 643 | // Mal ejemplo 644 | span { ... } 645 | .page-container #stream .stream-item .tweet .tweet-header .username { ... } 646 | .avatar { ... } 647 | 648 | // Buen ejemplo 649 | .avatar { ... } 650 | .tweet-header .username { ... } 651 | .tweet .avatar { ... } 652 | ``` 653 | 654 |
655 | ### Selectores de hijos y de descendientes 656 | {: #child-and-descendant-selectors } 657 | 658 | Cuando sea necesario, puede ser útil usar el [selector de hijos (`>`)](https://developer.mozilla.org/es/docs/Web/CSS/Child_combinator) para limitar la cascada de algunos estilos en elementos como `` que a menudo están anidados recursivamente. Úselo para limitar los estilos a los elementos secundarios inmediatos de un elemento principal para evitar anulaciones innecesarias más adelante. 659 | 660 | 661 | ```css 662 | .custom-table > tbody > tr > td, 663 | .custom-table > tbody > tr > th { 664 | /* ... */ 665 | } 666 | ``` 667 | 668 |
669 | ### Organización 670 | {: #organization } 671 | 672 | - Organice secciones de código por componente. 673 | - Desarrolle una jerarquía de comentarios consistente. 674 | - Utilice saltos de línea consistentes a su favor cuando separe secciones de código para leer archivos más grandes. 675 | - Cuando utilice varios archivos CSS, divídalos por componente en lugar de por página. Las páginas se pueden reorganizar y los componentes se pueden mover. 676 |
677 | 678 | ```scss 679 | // 680 | // Encabezado de la sección de componentes 681 | // 682 | 683 | .element { ... } 684 | 685 | 686 | // 687 | // Encabezado de la sección de componentes 688 | // 689 | // A veces es necesario incluir un contexto opcional para todo el componente. Haz eso aquí arriba si es algo importante. 690 | // 691 | 692 | .element { ... } 693 | 694 | // Subcomponente contextual o modificador 695 | .element-heading { ... } 696 | ``` 697 | --------------------------------------------------------------------------------