├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Ara L Abcarians 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Common CSS Class Names 2 | 3 | While using [Object Oriented CSS](https://github.com/stubbornella/oocss/wiki) and [BEM Methodology](http://bem.info/) approaches in [my projects](https://css-tricks.com/design-systems-building-future/), I discovered that naming things is easily one of the most frustrating parts of development. In an effort to make it easier on myself and others who feel the same, I've put together a list of commonly used class names for elements, components, and utility classes. 4 | 5 | --- 6 | 7 | ## The Naming Convention 8 | 9 | My prefered naming convention follows the SUIT CSS [Naming Conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) very closely: 10 | 11 | ``` 12 | /* Components (blocks) */ 13 | .myComponent {} /* Block - camelCase the component (block) name */ 14 | .myComponent-descendant {} /* Element - One dash for a descendant of the component */ 15 | .myComponent--modifier {} /* Modifier - Two dashes for the modifier of the component */ 16 | 17 | /* Utils */ 18 | .u-myHelper {} /* Utility classes are prefixed with `u-` */ 19 | 20 | /* States */ 21 | .myComponent.is-active {} /* State classes are chained */ 22 | 23 | /* Javascript Hooks */ 24 | .js-myComponent {} /* JavaScript classes are prefixed with `js-` and ONLY used as a JS hook */ 25 | 26 | ``` 27 | 28 | 29 | ## Native HTML Elements 30 | 31 | ``` 32 | .heading 33 | .heading--h1 34 | .heading--h2 35 | .heading--h3 36 | .heading--h4 37 | .heading--h5 38 | .heading--h6 39 | 40 | .link 41 | .link--alt 42 | 43 | .list 44 | .list-item 45 | .list--bare 46 | .list--group 47 | .list--ordered 48 | .list--unOrdered 49 | 50 | .form 51 | .form-fields 52 | .form-field 53 | .form-actions 54 | .form--inline 55 | .form--search 56 | 57 | .input 58 | .input--checkbox 59 | .input--radio 60 | .input--select 61 | .input--text 62 | .input--file 63 | .input--email 64 | .input--url 65 | 66 | .img 67 | .img--responsive 68 | .img--responsiveFill 69 | .img--circle 70 | .img--rounded 71 | .img--bordered 72 | 73 | .table 74 | .table-head 75 | .table-foot 76 | .table-th 77 | .table-tr 78 | .table-td 79 | .table--striped 80 | .table--bordered 81 | .table--responsive 82 | 83 | .button 84 | .button--default 85 | .button--primary 86 | .button--secondary 87 | .button--pill 88 | .button--soft 89 | .button--hard 90 | .button--circle 91 | .button--xs 92 | .button--sm 93 | .button--lg 94 | .button--xl 95 | .button--xxl 96 | 97 | ``` 98 | 99 | ## Custom Components 100 | ``` 101 | .alert 102 | .alert-close 103 | .alert-header 104 | .alert-body 105 | .alert-footer 106 | .alert--success 107 | .alert--info 108 | .alert--warning 109 | .alert--error 110 | 111 | .accordion 112 | .accordion-panel 113 | .accordion-trigger 114 | .accordion-content 115 | .accordion--vertical 116 | .accordion--horizontal 117 | 118 | .badge 119 | .badge--xs 120 | .badge--sm 121 | .badge--lg 122 | .badge--xl 123 | 124 | .btnGroup 125 | .btnGroup--stacked 126 | 127 | .carousel 128 | .carousel-item 129 | .carousel-controls 130 | 131 | .dropdown 132 | .dropdown-trigger 133 | .dropdown-content 134 | .dropdown-data 135 | 136 | .grid 137 | .grid--centered 138 | .grid--collapsed 139 | .grid-row 140 | .grid-col 141 | .grid-col--1 142 | .grid-col--2 143 | .grid-col--3 144 | .grid-col--4 145 | .grid-col--5 146 | .grid-col--6 147 | .grid-col--7 148 | .grid-col--8 149 | .grid-col--9 150 | .grid-col--10 151 | .grid-col--11 152 | .grid-col--12 153 | .grid-col--xsm1 154 | .grid-col--xsm2 155 | .grid-col--xsm3 156 | .grid-col--xsm4 157 | .grid-col--xsm5 158 | .grid-col--xsm6 159 | .grid-col--xsm7 160 | .grid-col--xsm8 161 | .grid-col--xsm9 162 | .grid-col--xsm10 163 | .grid-col--xsm11 164 | .grid-col--xsm12 165 | .grid-col--sm1 166 | .grid-col--sm2 167 | .grid-col--sm3 168 | .grid-col--sm4 169 | .grid-col--sm5 170 | .grid-col--sm6 171 | .grid-col--sm7 172 | .grid-col--sm8 173 | .grid-col--sm9 174 | .grid-col--sm10 175 | .grid-col--sm11 176 | .grid-col--sm12 177 | .grid-col--md1 178 | .grid-col--md2 179 | .grid-col--md3 180 | .grid-col--md4 181 | .grid-col--md5 182 | .grid-col--md6 183 | .grid-col--md7 184 | .grid-col--md8 185 | .grid-col--md9 186 | .grid-col--md10 187 | .grid-col--md11 188 | .grid-col--md12 189 | .grid-col--lg1 190 | .grid-col--lg2 191 | .grid-col--lg3 192 | .grid-col--lg4 193 | .grid-col--lg5 194 | .grid-col--lg6 195 | .grid-col--lg7 196 | .grid-col--lg8 197 | .grid-col--lg9 198 | .grid-col--lg10 199 | .grid-col--lg11 200 | .grid-col--lg12 201 | .grid-col--xlg1 202 | .grid-col--xlg2 203 | .grid-col--xlg3 204 | .grid-col--xlg4 205 | .grid-col--xlg5 206 | .grid-col--xlg6 207 | .grid-col--xlg7 208 | .grid-col--xlg8 209 | .grid-col--xlg9 210 | .grid-col--xlg10 211 | .grid-col--xlg11 212 | .grid-col--xlg12 213 | 214 | .hero 215 | .hero-content 216 | .hero--slideshow 217 | .hero--graphic 218 | 219 | .modal 220 | .modal-close 221 | .modal-header 222 | .modal-content 223 | .modal-footer 224 | 225 | .navbar 226 | .navbar--primary 227 | .navbar--secondary 228 | 229 | .icon 230 | .icon--xs 231 | .icon--sm 232 | .icon--lg 233 | .icon--xl 234 | .icon--xxl 235 | 236 | .siteWrapper 237 | .siteHeader 238 | .siteFooter 239 | 240 | .strip 241 | .strip--light 242 | .strip--dark 243 | .strip--xs 244 | .strip--sm 245 | .strip--lg 246 | .strip--xl 247 | 248 | .flexEmbed 249 | .flexEmbed-ratio 250 | .flexEmbed-ratio--3x1 251 | .flexEmbed-ratio--2x1 252 | .flexEmbed-ratio--16x9 253 | .flexEmbed-ratio--4x3 254 | .flexEmbed-content 255 | 256 | .nav 257 | .nav--fit 258 | .nav--stacked 259 | .nav--pagination 260 | .nav--keywords 261 | 262 | .island 263 | .island--xs 264 | .island--sm 265 | .island--lg 266 | .island--xl 267 | 268 | /** 269 | * Media 270 | * 271 | * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ 272 | */ 273 | .media 274 | .media-img 275 | .media-img--rev 276 | .media-body 277 | 278 | /** 279 | * Flag 280 | * 281 | * http://csswizardry.com/2013/05/the-flag-object/ 282 | */ 283 | .flag 284 | .flag-img 285 | .flag-body 286 | .flag--top 287 | .flag--bottom 288 | .flag--rev 289 | 290 | ``` 291 | 292 | 293 | ## States 294 | State classes are prefixed with a keyword that makes sense for the state. 295 | ``` 296 | .is-active 297 | .is-animating 298 | .is-collapsed 299 | .is-hidden 300 | .is-pressed 301 | .is-selected 302 | .is-finished 303 | 304 | ``` 305 | 306 | 307 | ## Utility 308 | Utility classes are prefixed with `u-` 309 | ``` 310 | .u-baseMargin 311 | .u-baseMargin--top 312 | .u-baseMargin--bottom 313 | .u-baseMargin--left 314 | .u-baseMargin--right 315 | 316 | .u-basePadding 317 | .u-basePadding--top 318 | .u-basePadding--bottom 319 | .u-basePadding--left 320 | .u-basePadding--right 321 | 322 | .u-clear 323 | .u-clearfix 324 | .u-clearLeft 325 | .u-clearRight 326 | 327 | u-displayBlock 328 | u-displayNone 329 | u-displayHidden 330 | u-displayInline 331 | u-displayInlineBlock 332 | u-displayTable 333 | u-displayTableCell 334 | u-displayTableRow 335 | 336 | .u-pullLeft 337 | .u-pullRight 338 | 339 | .u-textBreak 340 | .u-textLeft 341 | .u-textCenter 342 | .u-textRight 343 | .u-textAllcaps 344 | .u-textLowercase 345 | .u-textUppercase 346 | .u-textNoWrap 347 | .u-textTruncate 348 | .u-textLoud 349 | .u-textQuiet 350 | 351 | ``` 352 | 353 | --- 354 | 355 | ## Credits 356 | 357 | Heavily inspired by these amazing projects & people: 358 | - [CSS Components, Modifiers, and Subcomponents Collection](https://github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection) 359 | - [SUIT CSS](https://suitcss.github.io/) by [Nicolas Gallagher](https://twitter.com/necolas) 360 | - [Object Oriented CSS](https://github.com/stubbornella/oocss/wiki) by [Nicole Sullivan](https://twitter.com/stubbornella) 361 | - [BEM Methodology](http://bem.info/) by Yandex 362 | - [Inuit CSS](http://inuitcss.com/) by [Harry Roberts](https://twitter.com/csswizardry) 363 | - [Bootstrap](http://getbootstrap.com/) 364 | 365 | ## License 366 | [MIT License](https://github.com/ItsMeAra/CSS-Naming-Conventions/blob/master/LICENSE) 367 | --------------------------------------------------------------------------------