Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
CSSoocss, smacss & more...
what’s wro          ng with         CSS
“CSS is simple... It’s simple tounderstand. But CSS is notsimple to use or maintain.                                      ...
IssuesIf you’ve ever worked on amedium to large website, youhave probably come across arange of issues with CSS.
RepetitionLots of floats, font-sizereferences, heading levelsrepeated...
UnmanageableIt may have started out well, but ithas become a mess?
Weight warYou need to add some CSS - soyou have to start adding toselectors in order to win.
CouplingYour CSS is specifically tied toHTML or location...
CSS sucks!Developers have been telling usfor years that “CSS sucks”. Weall know it’s time for our CSSpractices to evolve.
New stuff!Luckily, there are a wide range ofexciting new developments toexplore.
Biases aside...Before we start... put aside anybiases. At least until after thepresentation, when you can ripinto me :)
ss oc oriented csso object
What is OOCSS?
In 2009, NicoleSullivan introduced anew way of lookingat CSS. She definedthis as ObjectOriented CSS(OOCSS).
StatisticsAfter optimising Facebook’s CSS,she discovered some amazingstatistics... about how we reapplyCSS properties thro...
Facebook:Facebook blue      261 Unique colors     548        colors   6,498  Salesforce:      padding    3,668        h1-h...
““We have been doing it allwrong.... Our best practices arekilling us”                                       ”            ...
“The purpose of OOCSS is toencourage code reuse and,ultimately, faster and moreefficient stylesheets that areeasier to add...
Looking for patterns -        rows
AbstractionOne of the key aims of OOCSSis to abstract as manycomponents of the layout aspossible.
ExampleCan you see any repeating visualpatterns?
RowsThe first layout pattern could bethe rows.
rowrowrowrow
rowrowrowrow
Past practiceIn the past, people may havestyled these rows using a seriesof IDs.
#header#main#news#footer
OOCSS aims1. use a single class so that it canbe reused as needed2. abstract the module down tocore purposes
Core purposesThese rows have two purposes:1. clear each row2. trigger the block formattingcontext.
.row.row.row.row
Re-useThen we can write one simple,but very powerful class that canbe reused anywhere in the layout.
.row {!   clear: left;          Clears each row!   overflow: hidden;     Triggers block formatting!   zoom: 1;            ...
Different rows
Different rowsDid you notice that two of therows were different? They havedifferent background colours andadditional paddi...
New names?We could now add some classesbased on the purpose of theserows - such as “news” and“footer”.
.news {!   padding: 1em 0;!   background-color: blue;!}.footer {!   padding: 1em 0;!   background-color: pink;!}
AbstractHowever, it would be better toabstract these names further sothat they are more flexible.
.row   {!      clear: left;!      overflow: hidden;!      zoom: 1;!      _overflow: visible;}.row-alt1 {!    padding: 1em ...
<div   class="row"></div><div   class="row"></div><div   class="row row-alt1"></div><div   class="row row-alt2"></div>
FurtherIf you wanted, these could beabstracted even further intopadding and backgrounds asseparate concepts.
.row-padding {!   padding: 1em 0;}.bg-color1 {!   background-color: blue;!}.bg-color2 {!   background-color: pink;!}
<div class="row"></div><div class="row"></div><div class="row row-paddingbg-color1"></div><div class="row row-paddingbg-co...
Up to youIt depends on the site andcircumstances as to how far youthink you need to abstract theseconcepts.
The row module
Primary moduleThe “row” class is our primarymodule. The additional classesare “modifiers” as they modifythe primary class.
ModifiersModifiers should not rewrite anyaspect of the primary module,they only modify or add to theprimary module.
Types of classPrimary module Sub-module   Modifier.row-alt1                   .row-alt1
Looking for patterns -      columns
ColumnsThe second layout pattern couldbe the columns. The wide layoutlooks like it has four columns.
Column 1   Column 2   Column 3   Column 4
PatternsSome of the rows spread acrossall columns. Others spreadacross two or one column.
Column 1     Column 2   Column 3    Column 44 columns2 columns               2 columns2 columns               2 columns1 c...
Framework 1To be safe, we should assume weneed containers for 4, 3, 2 and 1column widths. We can convertthese column optio...
Wide layout    Class names4 column box   .w-4col3 column box   .w-3col2 column box   .w-2col1 column box   .w-1col
<div class="row">!    <div class="w-4col"></div></div><div class="row">!    <div class="w-2col"></div>!    <div class="w-2...
NarrowThe same is true of the narrowlayout, except this time it hasonly two overall columns.
Column 1   Column 2
2 columns1 columns   1 columns1 columns   1 columns1 columns   1 columns
Framework 2We could also create a second,different grid for narrow screen.This would allow us to controlwhether columns sa...
Narrow layout   Class names2 column box    .n-2col1 column box    .n-2col
<div class="row">!    <div class="w-4col"></div></div><div class="row">!    <div class="w-2col n-2col"></div>!    <div cla...
Control!With these two simple grids, wecan control complicated layouts -both wide and narrow.
Looking for patterns -       boxes
Boxes?You may have noticed that therewere also a series of smallerboxes, each with an image to theleft or right.
Core purpose1. contain content2. feature object to left or right3. content beside feature object4. margin below
Adaptable boxWe need to create an adaptable box:- could be placed anywhere- any width or height- any feature content- feat...
TargetWe need to be able to target- the overall box- the object (left or right)- the body content within the box- a possib...
box                     box body                    This is a heading heading                                   box      b...
There are a range of possible class we could use here..box { }.box-feature { }.box-feature-alt { }.box-body { }.box-headin...
WidthDo not give the box a width -allow it to spread to fit the widthof any parent container.
Contain floatsThis box module must contain(and therefore wrap around)either a left or right floatingobject. We can solve th...
.box {!   overflow: hidden;     Triggers block formatting!   zoom: 1;!   _overflow: visible;!   margin-bottom: 1em;}
Location Agnostic The box must work when placed anywhere within the layout. The box must be “location agnostic”.aside .box...
Sit besideThe box may contain objects thathave varying widths. We need ourcontent box (“box-body”) to sitbeside these obje...
BFC againWe can solve this by triggeringthe block formatting context onthe “box-body” class.
box-bodyThis is a headingLorem ipsum dolor sit amet consect etueradipi scing elit sed diam nonummy nibheuismod tinunt ut l...
.box-body {!   overflow: hidden;     Triggers block formatting!   zoom: 1;!   _overflow: visible;}
The box module
Powerful boxWe have just made a verypowerful box. Nicole Sullivanrefers to this box as the “media”element.
.box,.box-body {!    overflow: hidden;!    zoom: 1;!    _overflow: visible;}.box { margin: 0 0 10px; }.box-feature {!    f...
Primary moduleIn this case, the “box” class isour primary module. There are nomodifiers, but there are a range ofsub-modules.
Sub-modulesSub-modules are other classesassociated with the primarymodule. They do not alter or adddirectly to the primary...
Types of classPrimary module Sub-module    Modifier.row-alt1                    .row-alt1.box          .box-feature        ...
Moving forward
Semantic classesFor years, we have been taughtto keep our markup clean andonly use “semantic” class names.
Break the rules?OOCSS seems to break both ofthese rules - and in a big way.But have we been thinking about“semantic” class...
“HTML class names offer nosemantic value to search enginesor screen readers, aside frommicroformats.                      ...
“Rather than concerningourselves with creating semanticclass names, I think we should bethinking about creating sensiblecl...
“If your class is called “blue” andyou want to change it to red, youhave far bigger problems thanclass names to deal with!...
Move forwardIn order to move forward,especially on large scale sites, wecannot keep using old practices.
Solution?OOCSS offers front enddevelopers an alternative - lightweight, modular CSS that can bere-used repeatedly across s...
acss   srmtecturecss achi
What is SMACSS?
“SMACSS is more style guide thanrigid framework - an attempt todocument a consistent approachto site development when usin...
In 2011, JonathanSnook introduced anew way of looking atCSS architecture.He called thisScalable and ModularArchitecture fo...
Categorization
CategoriesBase rulesLayout rulesModule (and sub-module) rulesState rulesTheme rules
BaseBase rules are the defaults. Theyare almost exclusively singleelement selectors.
LayoutLayout rules divide the page intosections. Layouts hold one ormore modules together.
ModulesModules are the reusable,modular parts of our design. Theyare the callouts, the sidebarsections, the product lists ...
SMACSS allows forprimary modules, modifiersand sub-modules, though theyare labelled slightly differently.
Primary module   Sub-module      Modifier                 Sub-component   Sub-module.row-alt1                        .row-a...
StatesState rules are ways to describehow our modules or layouts willlook when in a particular state. Isit hidden or expan...
ThemesTheme rules describe how thelayout or modules might look.
Naming Convention
Avoid IDsUse classes rather than IDs forstyling purposes. Classes aremore flexible. Using classes canreduce specificity issu...
MeaningfulClass names should bemeaningful for other authors, sothat other developers canunderstand their purpose.
PatternClass names should followunderstandable patterns.
PrefixesUse “pseudo-namespaces” asprefixes - so that modules,modifiers and sub-modules canbe identified.
Modifiers Possibly use different naming conventions for modifiers, sub-modules and states..example-widget { }.example-widge...
Decouple HTML/CSS
“I’ve noticed that designerstraditionally write CSS that isdeeply tied to the HTML that it isdesigned to style. How do web...
DecoupleSo how do we “decouple” ourHTML and CSS.1. using additional class names2. using child selectors
ExampleTo see this in action, let’s look atthe “box” example from earlier.What if we wanted to style theheading inside the...
This is a heading            headingLorem ipsum dolor sit amet consect etueradipi scing elit sed diam nonummy nibheuismod ...
Style the h2?We could style this heading usingsomething like this:.box { }.box h2 { }
<div class="box">!   <img class="box-feature"!   src="dummy-140.png" alt="">!   <div class="box-body">!   !   <h2>Heading<...
Problem?The problem is that the CSS is“coupled” with the HTML. Whathappens if there is an <h3>element inside the box?
One solution would be to set allheading levels..box   { }.box   h1 {   }.box   h2 {   }.box   h3 {   }.box   h4 {   }.box ...
Use a classHowever, the safest way to“uncouple” the CSS and HTMLwould be to use a simple class.
<div class="box">!   <img class="box-feature"!   src="dummy-140.png" alt="">!   <div class="box-body">!   !   <h2 class="b...
More flexibleNow our HTML and CSS are moreflexible. It doesn’t matter whatheading level is used..box { }.box-heading { }
a closer look at     modules
GuidelinesThe following “module” guidelinesapply regardless of whether youare coming from OOCSS orSMACSS.
Rule 1:keep modules simple
“By making your base objects thissimple your choices becomeboolean; you use the object oryou don’t. The object is eitheren...
Keep ‘em simpleThe base module should bedefined as simply as possible.This means that they are highlyflexible.
Let’s use an example of our “row” class. What if we added some padding to this rule?.row {!   clear: left;!   overflow: hi...
But what if we want a row thatdoesn’t have padding? Theproblem is that this rule is nowvery specifically defined. It isthere...
Rule 2:don’t undo styles
“Any CSS that unsets styles (apartfrom in a reset) should startringing alarm bells... Rulesetsshould only ever inherit and...
Don’t undoLeading on from the first rule, youshould avoid writing rules to undoa previous module.
For example, what if you wanted almost all of your headings to have a border-bottom?h2 {!   font-size: 1.5em!   margin-bot...
But in some cases you mightwant a heading without aborder-bottom.
You could write a new rule like this:.no-border {!   padding-bottom: 0;!   border-bottom: none;}
This is not ideal. It is much betterto write sub-modules that addstyles, rather than write sub-modules to undo styles.
So, a better way might be towrite two rules like this:
/* default style */h2 {!   font-size: 1.5em!   margin-bottom: 1em;}/* only when border needed */.headline {!   padding-bot...
Rule 3:extend but don’t    modify
Don’t modifyBase modules can be extendedusing sub-modules. However, thebase module itself should neverbe modified.
This is based on the objectoriented programming “open/close principle”.
“Software entities (classes,modules, functions, etc.) shouldbe open for extension, but closedfor modification.            ...
If a based module needs to bemodified to suit a specific case, itis probably better to create anew module.
Rule 4:think before adding   new modules
Don’t rushIt is always tempting to add amodule based on your need atthe time... as well as based onthe needs of the system.
This often happens after the initialplanning and build has beendone. It’s easy to be tempted by“I’ll just drop this new cl...
However, adding poorlystructured new modules, withoutrigorous abstraction, will lead tobloated, hard-to-manage CSS.
icescodingpract
Comment conventions
DocBlockThere is a growing trend to usethe DocBlock as an overallcomment convention. In fact, amovement around this type o...
“"A DocBlock is an extended C++-style PHP comment that beginswith "/**" and has an "*" at thebeginning of every line.DocBl...
/** * Short desc * * Long description first sentence starts * and continues on this line for a while * finally concluding ...
Formatting CSS rules
Single line?In the early days of CSS, a lot ofdevelopers preferred single lineCSS rules as they could easilysee the select...
Multi-lineToday, with the complexity ofindividual rules, most developersseem to prefer either themulti-line format, or mul...
CSS Tricks rule formatting pollMulti-line Format with Indenting                                     44%Multi-line Format  ...
.navigation_rss_icon {!   position: absolute;!   left: 940px;!   bottom: 0px;}#navigation_rss {!   position: absolute;!   ...
.navigation_rss_icon {    position: absolute;    left: 940px;    bottom: 0px;}#navigation_rss {    position: absolute;    ...
Declaration order
Alphabet?Similarly, many developers usedto prefer to sort their declarationsalphabetically.
GroupToday, most people prefer togroup their declarations by type.
CSS Tricks declaration formatting pollGrouped by type 45%                                                 45%Random - 39% ...
.selector {  /* Positioning */  position: absolute;  z-index: 10;  top: 0;  right: 0;  /* Display & Box Model */  display:...
Of course, many tools and pre-processors take care of this foryou. If your tools do not have thiscapability, take a look a...
get busy!
Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin...
.navigation_rss_icon { position: absolute; left:
.navigation_rss_icon { position: absolute; left:
.navigation_rss_icon { position: absolute; left:
.navigation_rss_icon { position: absolute; left:
Nächste SlideShare
Wird geladen in …5
×

.navigation_rss_icon { position: absolute; left: CSS - OOCSS, SMACSS and more

83.437 Aufrufe

Veröffentlicht am

.navigation_rss_icon { position: absolute; left: 940px; bottom: 0px;}#navigation_rss { position: absolute; left: 720px; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; color: #897567; line-height: 2.5em;} #navigation_rss li { display: inline; } #navigation_rss li a:link, #navigation_rss li a:visited { color: #fffffe; text-decoration: none;

Veröffentlicht in: Technologie
  • Earn a 6-Figure Side-Income Online... Signup for the free training HERE ◆◆◆ http://ishbv.com/j1r2c/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Stop getting scammed by online, programs that don't even work! ◆◆◆ https://tinyurl.com/y4urott2
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • More than 5000 IT Certified ( SAP,Oracle,Mainframe,Microsoft and IBM Technologies etc...)Consultants registered. Register for IT courses at http://www.todaycourses.com Most of our companies will help you in processing H1B Visa, Work Permit and Job Placements
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Very well done Russ! I especially liked the way you coin your own terms like 'location agnostic' and replace Nicole's 'media box' with just 'box'. I'm going to be sending our jr. devs to have a look at this for sure!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

×