CSS Architecture

 CSS ARCHITECTURE:

         CSS is basically an intuitive language. It is used for describing the presentation of a document. Its main purpose is to define a selector to target HTML and apply the attributes to them. By defining a selector can be easily overridden by some other selectors and also elements can inherit their properties from their parents on the DOM tree.


        That is when a developer defines a CSS class, it automatically affects the global scope which results in the modification of all the related elements  and also their children. But if we want to modify the specific element, this approach can’t be useful. And when the size of the application and the team members grow, this type of styling would mess up all the other things. That’s where CSS architecture comes to play.


COMMON PRACTICES TO BE AVOIDED:


  1. Modifying the elements based on their parents

.navbar {
  background: white;
  color: black;
  width: 50%;
}
#sidebar .navbar {
  width: 200px;
}
Body.homepage .navbar{
  background: white;}


  1. Inordinately the combinators.

#navbar ul li ul li div{ }
 #contents article h1:first-child{ }

  1. Forging generic names for classes.

.card {}
.card .title{}
.card .desc{} 
.card .content{}

 

Though those codes are technically valid, each has led to disaster while working in a group or large application.


MAJOR OBJECTIVES OF CSS ARCHITECTURE:


The four major objectives of CSS architectures are Predictable, Maintainable, Reusable, Scalable.


        Predictable:

  `               Since CSS itself is an intuitive language, CSS architecture should be the same. If a newbie is in a project, he/she itself can easily visualize all the stuff.


        Maintainable:

              When some component is being added to the page, it shouldn't make a drastic change to all other components.


        Reusable:

              CSS rules of a particular component should be abstract, so that we can build new components quickly from the existing one.


        Scalable:

                 Scalable CSS means it can be easily managed by a single person or a large group. It should be easily approachable without requiring an enormous amount of learning.


STEPS TO BE FOLLOWED:


CSS architecture can be achieved by the modular approach. The three steps to start structuring our CSS are

  1. Breaking the code into smaller chunks (SASS, LESS).
  2. Coding the components should be individual and in an encapsulated manner.
  3. Naming the CSS selectors according to their purpose and relationship with other elements(BEM, SMACSS).

These jottings are just the starting point. For further reading on this concept, I would recommend you to go along with our other 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

MULTIMEDIA

Image
  These days, most of us carry a fully functional multimedia studio around in our smartphones says Austin Kleon . We people  really wanted to engage with our own generation, one that is increasingly speaking in an audio/video multimedia language.  Multimedia is an effective way to communicate and share the ideas with users. W hat is multimedia??.... In what ways are they used ??.. Well, The proper definition of multimedi a is a computerized method of presenting information combining text, audio, video, graphics and animation . As the name suggests it is the combination of multi and media that different types of hardware and software tools  are used for communication of information. Let us see some examples related to multimedia from the bricks to the brains; ·         The text we see in books, newspapers or any means of media ·         The sound we hear when we listen to music ·         The graphics...
Read more

DEEP LEARNING

Image
  Deep learning, a buzz in the artificial intelligence field, is the subset of machine learning. It plays a major role from search engines to self driving cars that demand high computational power. The data is the “fuel” of deep learning. It’s a reality, as we have already said, and together with the great computing power, one of the reasons why automatic learning has gained relevance in recent years .What is meant by deep learning?..   Deep learning is nothing but a subset of machine learning, which is essentially a neural network with three or more layers. These neural networks attempt to stimulate the behavior of human brain, allowing it to learn from large amounts of data. Deep learning drives many Artificial Intelligence applications that improve automation, performing analytical and physical tasks without human intervention. Remember the word “accuracy”. Deep learning achieves recognition accuracy at higher levels than ever before. It has two main reasons for its ach...
Read more