Skip to content

waaws/css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 

Repository files navigation

Si

Usar clases

/* Componente  */
.header{
  height:60px;
} 

/* Elemento interno */
.header__logo{
  width:100px;
} 

/* Modificador */
.header--inverse{
  color:white;
  background-color:black;
} 

Ojo! Hay que estar atentos a los elementos internos ya que es probable que muchos se conviertan en componentes y está super bien.

Componentizar

/* Ejemplos */
.header{}
.footer{}
.banner{}
.slider{}
.product-thumbnail{}
.products-grid{}
.product-detail{}
.product-image-slider{}
.about-info{}

Usar flexblox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.header{
  display:flex;
  justify-content:space-between;
} 
.header__logo{
}
.header__menu{
  flex:1;
}

No :(

Usar IDs

#header{
  height:60px;
} 

Usar Float

... a menos que sea este el caso

alt tag

.header__logo{
  float:left;
} 

Usar subclases

.header .logo{
  height:60px;
} 

Naming convention

####block__element--modifier

http://getbem.com/naming/

About

Estándares y buenas costumbres 😬

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published