Skip to main content

OOCSS



OOCSS (Object Oriented Cascading Style Sheets), it seems new also quite a mouthful name but, it is a half a decade old concept that makes visuals in front of the web page more robust and dynamic, in another way this concept helps to implement styling on web pages, much larger scale with more efficient manner.

As a term “object” is something that consist, a state and a related behavior to that particular state, if we relate it to more practical way, an object stores its state in “fields” (variables in some programming languages) and reveal its behavior through “methods” (functions in some programming languages).

So what is a CSS Object? Simply a CSS “object” more of a repeating visual pattern, that can be applied into an independent part of HTML, CSS and “quite possibly” JavaScript. That object can then be reused across the website. Similarly, in the OOP, a pattern abstracting into an isolated block of code.

There are two principals to follow in this OOCSS, firstly “Separating the structure and the skin”. What this thing mean is  to define repeating visual features such as background and border effects/styles as separate “skins” that we can combined or modified with various objects to achieve a large amount of visual data without putting too much code. There is another side, the separation of the skin and the structure means the classes to name the objects and their components, rather than depending just on the semantics of HTML. Referencing these kind of classes in our stylesheets, let’s say rather than directly styling the <p> (paragraph element). Its also flexible, for instance, when a new type of an element is about to introduce (e.g. <panda>), it could be integrated into the HTML without having to touch the CSS.    

Second principle is the “separation of container and content” this means “rarely use location-dependent styles”. An object should look the same no matter where we put it, instead of styling a specific element with a class, create and apply a class that describes the element.

This  will give us an assurance that, all unclassed elements will look the same, all the elements with that category class(mixins) will look the same, also we don’t need to create a override style for the case when we actually do want that element with the class look like the normal element.

Extra Read
http://oocss.org/


Comments

Popular posts from this blog

Bit of Data Science

Data science is a collection of Data inference, algorithm development and technology, focusing on to solve analytically complex problems. At the center, there is data, there are more valuable raw information streaming through the Internet and stored in enterprise data warehouses, what data science doing is, using all that data in more intelligent and creative ways to process and produce insights/information which is used to generate business value, in other way data science helps us to do quantitative data analysis, to make strategic business decisions, just about anything.    There is a side of data science, it's all about uncovering findings from data, it's called "discovery of data insight". whats happening with this is, we look at data in the smallest level we can, and with all the data mining tools, we can understand complex behaviors, trends. It's about revealing hidden information that can help users and companies(mostly companies) to make smarter

කාමරේ | The Room - Final

කෙල්ලගේ හොඳම යාළුවා දාගෙන ලයිෆ් එකේ මැච් එක ගහන්න ඕනේ කියන තියරිය බොහොම පරණ සහ මෙලෝ වැදගත්කමක් නැති දෙයක්. මේ දක්වා මට හම්බුන යාලුවොන්ගෙන් සහ පවුලේ අයගෙන් ඉගෙනගත්ත දෙයක් තමයි, තාවකාලික ආකර්ෂණය, ආදරය කියල වැරදියට හඳුනාගෙන ඉස්සරහට ගිහින්, සමහරු පවුල් වෙලා, වැඩේ නාගෙන අනාගෙන අපහු ඔතාගෙන යන්න වෙලා. ආකර්ෂණයේ සමානකමක් තියෙන්න පුළුවන්, හැසිරීමේ සමානකමක් තියෙන්න පුළුවන් ආකල්ප ටිකක් සමාන වෙනවා බොහොමයක් හොඳම යාළුවොන්ගේ, කොහොමත් එකම ජාතියේ කුරුල්ලෝ එක පොදියටනේ පියබන්නේ……අම්මේ අහුවෙන්න හොඳ නෑ! එහෙන් මෙහෙන් හොයල ඉගෙනගත්ත විදියට ආදරේ කරද්දී ජීවිතේට අදාල ප්‍රායෝගික ගැටළු හම්බවෙන්නේ හරි අඩුවෙන් (ඒ ගොල්ලෝ කියන්නේ ) රියල්  ලයිෆ් කේස්  එන්න ගන්නේ දෙන්නත් එක්කම එක වහලක් යට ඉන්න ගියාම, ජීවිතේට එන ප්‍රයෝගික ගැටළු වලට පේරාදෙණිය  මල් වත්තේ හරි, worldSpice එකේ කෑම මේසේ උඩ හරි, වේල්ස් පාක් එකේ බංකුව උඩ හරි විසඳුම් නැති බව තේරෙනකොට නැති ගිනි ඇවිලෙන්න ගන්නවා, දැනුම් තේරුම් ඇතුව ලව් කරන්න සහ කරපු සුළුතරයක් තමයි එහෙම ගිනි නිවාගෙන  බාධක වලින්  ගොඩ ගියේ. පිස්සු හැදෙනවා නේ! ඇයි නිකන් ඉල්ලන් කන්නේ. ඇරත් නදීගේ යාළුවා නද

කාමරේ | The Room - Part 1

මාස්ක් එක බැඳගෙන පරණ ෂර්ට් එකක් ගහගෙන පොඩි ලේන්සු කෑල්ලක් බැඳගෙන නිකන් රජිනි කාන්ත් වගේ, බැස්සා කාමරේ අස් කරන්න ‘කියලා. එක පාරටම දැක්ක  පරණ පොතක් තිබුන, ටිකක් කහ පාට කවරයක් එක්ක, කාලෙකින් ඇද්දෙ නැති නිසා දාන්න පුළුවන් ඩම් එක දාල පිම්බා. කාමරේ නිකන්  දැන් සහරා කාන්තාරේ වගේ දුවිලි කුණාටුවට වැහිලා ගියා, ඇස් දෙක වහගෙන ජනේලේ ගාවට නින්ජා වගේ ගිහින් පියන් දෙකම ඇරිය. දුවිලි ටික බැහැල  ලස්සනට ලෙවෙල් වෙලා සුපුරුදු හඩු වටපිටාව දර්ශනය වෙන්න පටන් ගත්ත. හ්ම්…. ඒක ඇවිල්ල ඉස්කෝලේ ප්‍රගති වාර්තා පොත, එව්වා එක්ක ඇති වෙන කුණාටු ගැන කියන්න ඕනේ ඕනේ නෑ නේ. අනේ ඉතින් කොහෙවත් හිටපු කෙල්ලෙක්ව ඉම්ප්‍රෙස් කරන්න කියල හිතං පන්තියේ 15,16 වෙනියා වෙලා හිටපු මම අට වසරේ අන්තිම වාරේ ඉදන් එකොළහ වසරේ අන්තිම වාරේ වෙනකන් එක දිගට පන්තියේ පළවෙනිය වෙලා දුන්න ගේම, මතක් වෙද්දී පිස්සු වගේ, ඒ කෙල්ල අපි දන්න කාලේ ඉදන් පන්තියේ පළවෙනිය, කතා කරන්නෙත් අනික් පන්ති වල පලවෙනි තුන්දෙනා එක්ක විතරයි, ඒ කාලේ පොඩි කතාවක් ගියා හොඳම මිටර් ඉන්නේ පලවෙනි තුන්දෙනා අතරේ කියල. මමත් ඉතින් ඇරියේ නෑ බැස්ස ගේම් එකට, අදාළ පාර්ශවයේ  අවධානය එද්දිම තේරුණා ඒ