Css - The Right Way

CSS the

Right way

There is no *best* way to design a website, no right way to incorporate standards into your workflow.

Jeffrey Zeldman

BUT

THERE IS :

• Best Practices

• Methodology

• Guidelines

• Frameworks

BEST PRACTICE

PREFIXAlways use prefix in your project and only one per project.

.media{}

.media__img{}

.media__img—rev{}

.media__body{}

.tx-media{}

.tx-media__img{}

.tx-media__img—rev{}

.tx-media__body{}

BEST PRACTICE

NAMESPACINGTry to avoid #ID and use .class instead.

“Code today, Use tomorrow”

BEST PRACTICE

NAMESPACING

Use meaningful #ID and .class name

.module-ct { ……. }

.module-categories { ……. }

BEST PRACTICE

NAMESPACINGUse - after every word and use it everywhere.

.whoisonline {}

.back-to-top{}.who-is-online{} .back-to-top{}

BEST PRACTICE

NAMESPACINGCategorize css rules

BEST PRACTICE

NAMESPACING

B E MBlock Element Modifier

It is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers.

BEST PRACTICE

BEMThe naming convention follows this pattern:

.block {} .block__element {} .block--modifier {}

BEST PRACTICE

BEM <form class="site-search site-search--full"> <input type="text" class="site-search__field"> <input type="Submit" value ="Search" class="site-search__button"> </form>

.site-search {} /*Block*/ .site-search__field {} /*Element*/ .site-search__button {} /*Element*/ .site-search—full {} /*Modifier*/

TRY

FRAMEWORKSDo not stick on one framework. Give others a try.

USE PREPROCESSORS• For functional css coding • For reusability though mixin • Better maintainable, themable and

extendable • Write less do more

USE PREPROCESSORSCSS Way

.menu{}

.menu ul {}

.menu ul li {}

.menu ul li a{}

.menu ul li a:hover{}

.menu ul li a:active{}

LESS Way

.menu{ … ul{

… li{… a{

… &:hover{}&:active{}

}}

} }

USE PREPROCESSORS

Mixin

.rotate(@degrees) {-webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees);-o-transform: rotate(@degrees);transform: rotate(@degrees);}

Call

div{.rotate(45deg);

}

Outputdiv{ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}

LEVERAGE

CSS AT ITS BEST

.menu > li { border-left: 1px solid #fff; }

.menu > li:first-child{ border-left: 0; }

.menu > li:not(:first-child) { border-left: 1px solid #fff; }

USEFULL REFERENCES• http://csswizardry.com/2013/01/mindbemding-getting-your-head-

round-bem-syntax/ • http://www.smashingmagazine.com/2012/04/16/a-new-front-end-

methodology-bem/ • http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-

memorize--net-16048 • https://developer.mozilla.org/en-US/docs/Web/Guide/CSS

WHO AM I ?Founder and CEO, ThemeXpert

parvez@themexpert.com

www.themexpert.com

THANK YOU