SMACSS

 


SMACSS 


What is SMACSS?


           Scalable and Modular Architecture for CSS. “A flexible guide for developing sites small and large”.


           SMACSS (pronounced “smacks”) is more of a style guide than a rigid framework. There is no library for us to download or install. There is no git repository for us to clone.This way of approaching was developed and made as a book by the author Jonathan Snook.This way of  structuring our CSS allows for flexibility and maintainability as our project and our team grows.


           SMACSS is a bit different from CSS frameworks like bootstrap, materialize css, foundation etc., Instead, SMACSS is more like a template or frame. The ultimate aim of SMACSS is dividing all the styles files or folders into 5 different categories. This approach in our project must contain the following folders.


  1. Base

  2. Layout

  3. Modules 

  4. States

  5. Themes


Base:

          Base rules usually define what an element should like in all occurrences on the page. It is simply said as default styling of an element. In this we should not include any class or ID selector. It must contain only the selector, descendant selector or a child selector.


Eg: Base folder must contain files like these

  1. _reset or _normalize

  2. _base


Layout:

          Layout is dividing the page into major and minor components. The major components are top level components like header, footer, article. These are usually styled using the ID selectors.

In this we should prefix the styles with letter “l” to distinguish it from the modules.


           Eg: Layout folder must contain files like these

  1.  _container 

  2. _grid

  3.  _responsive


Modules:

           Modules are discrete components on the page that are reusable and part of a single layout. So these modules should be styled as a standalone component. Here we should avoid using the IDs and element selectors. These classes may be prefixed with the letter ‘m’. 


            Eg: Module folder must contain files like these

     

  1.   _comments

  2. _buttons

  3. _forms


State:

           States are just augments and overrides of the styles. For example, the accordion section may be in the state of expand  or collapse. Similarly, A message may be in the state of success or error. 


          There is plenty of similarity between a sub-module style and a state style. They both modify the existing look of an element. These classes may be prefixed with the letter ‘is’.However, they differ in two key ways:


  1.  State styles can apply to layout and/or module styles; and

  2. State styles indicate a JavaScript dependency


         Eg: States folder must contain files like these 

 1.  _hidden

 2.  _active

               3.  _collapsed


Theme:

             It is used to contain the rules of the primary colors, shapes, borders, shadows, and such.This folder can be simply defined as a utility folder.  Mostly these are elements which repeat across a whole website. We don’t want to redefine them each time ,instead we can define a unique class which we only add on later to a default element.We must not get confused with base rules. These rules are completely different. Moreover, we are restyling the elements in the BASE folder. 


             Overall SMACSS is just a CSS architecture and it does what it says on the tin—nothing more and nothing less.


             Eg: Theme

  1. _variables,

  2. _mixins


           Thanks for reading. To boost your computer science knowledge, I firmly recommend you to get along with our posts.

Comments

Post a Comment

Popular posts from this blog

INTRODUCTION TO KSS

Image
INTRODUCTION TO KSS:                       KSS is the abbreviated form of Knyle Style Sheet. It can be simply described as CSS documentation. Documentation for any flavor of CSS that you’ll love to write. It is in the form of human readable, machine parsable and easy to remember. KSS is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or specificity guideline.It is hierarchical in nature. Why KSS? If we have added a new member to the medieval of our project, he/she would have coped up to our styles. He/she can’t start anything from scratch. This may increase the time to develop our project. Suppose, we have already documented our CSS, a new member can just refer to the styles and start doing their works. This will increase the efficiency of our project.  If you’ve ever been a new developer on a team with weak documentation, you know how confusing it can b...
Read more

LEARN TO CODE(Beginners)

Image
SELECT * FROM WORLD WHERE “SOMEONE” LIKE ’%YOU’ ….Can you all guess what is the result of above few lines??,,or simply what does it mean? Explorers in computer science background may have slight   guess going on in your mind. The result of above query is “no results”. I admire the sayings of Maria Klawe which is “Coding is today’s   language of creativity, All our children deserve a chance to become creators instead of consumers of computer science. Thats the reason I started the article with few lines   of code, so learn to code easily and quickly with right the right learning strategy. WHAT IS CODING?           Coding is all about writing a computer program to solve a specific program.           Computer code is used to program the websites, apps, and other technologies we interact with every day.                  Depending about the software developed, the coder...
Read more

Machine learning approaches

Image
  MACHINE LEARNING APPROACHES: Machine learning: Machine learning is the study of computer algorithms that uses the data and provide the analyzed results. Machine learning algorithms would build a data model which uses the dataset called trained data.   These datasets have been trained based on the algorithms that we need. Machine learning is used in many fields such as medicine, aerospace technology, government-related works, email filtering, speech recognition, etc.,  Machine learning approaches are categorized into various types like Supervised learning Unsupervised learning Semi-supervised learning Reinforcement learning In this blog, we will see about supervised learning and unsupervised learning. Supervised learning: Supervised learning can be defined easily by its use of labeled data. This way of approach is used for building a mathematical model which takes input and gives predicted output. This approach is usually used to build the model for predictions and class...
Read more