Your location:Tech News>News>Script>Sass use to write object-oriented CSS code

Latest News

Sass use to write object-oriented CSS code

Author:fsadmin

Views:

  Since 2008 Nicole Sullivan asked Object-Oriented CSS (OOCSS).It has become a leading module system for organizing your CSS code is one way.

  Unlike other tissues OOCSS CSS code means, such as BEM or SMACSS.By separating structure and CSS code to make your reusable modules.In fact, I usually SMACSS be confused with OOCSS.

  OOCSS, SMACC and BEM is the very meaning of the stuff in CSS, have long been popular science-related content on the site W3cplus.It can be said to understand the content will be better able to help you organize, manage your CSS code or CSS module.

  Today, I want everyone to explore some of the basic principles of OOCSS.The main recommendations together with you to explore how to better integrate Sass and OOCSS together.

  What is the object?

  This is a visual is repeated module may be HTML, CSS and extracted JavaSctrip independently, be a separate segment --Nicole Sullivan

  A CSS object is extracted first thing to consider is how to separate the style and structure, what is the best way to organize your code?OOCSS founder of Nicole Sllivan raised two main principles:

  Structure and style separation: You should define the structure and location in a subject, and style attributes should be used for class names separated, for example, background or border.In this way you do not need to cover some of the characteristics of the style.

  Container and the contents of the separation: Do not insert styles in your HTML structure.In other words, your style try not to use html tags or id identifier.Instead, it defines the class name to define the style, and the nested hierarchy of selectors should try less.

  We do a quick example

  These principles may be more difficult (to understand what the theory is always egg pain).Let''s look at a simple example, to see how to organize this code:

  CSS Code copied to the clipboard

  .box-1 {

  border: 1px solid #ccc;

  Width : 200px;

  Height : 200px;

  border-radius: 10px;

  }

  .box-2 {

  border: 1px solid #ccc;

  Width : 120px;

  Height : 120px

  border-radius: 10px;

  }

  You can easily find some duplicate styles appear.In this example, border styles are defined in two classes.If you want to change the border or border-radius property values had to modify two places.

  To solve this problem, this style in another newly added class name:

  CSS Code copied to the clipboard

  .box-1 {

  Width : 200px;

  Height : 200px;

  }

  .box-2 {

  Width : 120px;

  Height : 120px;

  }

  .box-border {

  border: 1px solid #CCC;

  border-radius: 10px;

  }

  In the HTML structure, we can use:

  XML / HTML Code copied to the clipboard

  

Lorem ipsum

  

Lorem ipsum

  Semantic and maintenance

  You do not care about the semantics, but I am more concerned about the maintenance of the code.For example, the example shown in FIG..

  Pure CSS to define the semantics of an object would be no, but that there are some problems:

  Every time you change the style style, you need to modify the HTML

  There is no safe way to access the DOM elements

  For OOCSS, in addition to maintaining HTML is difficult, other are very perfect.Our CSS is easy to expand, is also very convenient for new content.

  So we wrote some CSS code to extend the HTML structure.This way really will get better?

  Sass arrival

  I am sure you must have heard Sass @extend command and understand how he works.Therefore, thank you very much selector placeholder% placeholder, in Sass can be extended by @extend, this way is that you can create some semantic class name in CSS, HTML also solve the problem.

  We have to use% placeholder to create objects in a class by @extend call, which together.So that you can organize your own code:

  CSS Code copied to the clipboard

  a.twitter {

  min-Width : 100px;

  padding: 1em;

  border-radius: 1em;

  background: # 55acee

  color: #fff;

  }

  span.facebook {

  min-Width : 100px;

  padding: 1em;

  border-radius: 1em;

  background: # 3b5998;

  color: #fff;

  }

  All objects and basic objects using @extend mixed together, so that you can get a clean CSS objects, it is very easy to do in Sass, we also unnecessary to spend time to modify HTML.

  CSS Code copied to the clipboard

  % Button {

  min-Width : 100px;

  padding: 1em;

  border-radius: 1em;

  }

  % Twitter-background {

  color: #fff;

  background: # 55acee;

  }

  % Facebook-background {

  color: #fff;

  background: # 3b5998;

  }

  .btn {

  & - twitter {

  @extend% button;

  @extend% twitter-background;

  }

  & - facebook {

  @extend% button;

  @extend% facebook-background;

  }

  }

  It has a semantic, and perfect?Sass always solve our.Remember: @extend make your HTML to keep the cleanest, but also has semantics, this is a very easy thing in the Sass.

  I like to call it OOSass, because he is a mixture of Sass and OOCSS.Of course, you do not have to use it.If you do not deliberately pursue semantics in HTML, you can still use OOCSS.Everyone has their own way, then you is how to build your own CSS it?Please share with us.

Recommend article

Relate article