• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Coding Still

  • Home
  • About

Writing less css

November 25, 2010 By _tasos Leave a Comment

One basic rule in programming is reuseability. Every programmer has developed a pattern on how his code is structured, where to keep common functions, application constants, etc. Thus, the code produced is good code that is easily maintained and expanded. When it comes to writing HTML and css things are a bit differently. Most web developers (a.k.a. php or asp.net programmers) sooner or later have to learn to write css.

Css works in a diferent way than programming. You have classes, but you cannot create base classes, there is no inheritance and generally there is no reusability what so ever. At least in the way a programmer understands reuseability. One of the things that really bugs me with css is that sometimes I need to define a color many many times inside a stylesheet and there is no way to avoid this. For example, the <h1> has a specific color (e.g. #575757) which you also want to use it in borders. You have to write the color “#575757” in your stylesheet more than once, and if there is ever the need to change this you must go in and change it twice. I am aware of the Replace all feature that all text editors have, but what if you wanted to change only the color in the borders? You would have to read the stylesheet and decide where to make these changes. There are many scenarios I can think of that would prove that css is not that easy to maintain because you usually end up repeating the same properties again and again in your stylesheet.

I recently found a tool that faces these issues very nicely. Take a look here.  The less tool extends css and allows us to use variables, functions (they are called mixins), and implement class inheritance! These are the things that you will hear a programmer complain about css. What you can do with less is write css with some extensions and then you run a script that will generate a css file. The benefit is that you can write css in a much leaner way.  Let’s take a closer look.

  • Variables.
    You can declare variables e.g. for a color value and instead of repeating the color many times in the stylesheet you use the variable. For example:

    @main_color: #575757;h1 {color: @main_color;}
    #footer {border-top: @main_color;}
  • Mixins.
    Declaring a class can have a parameter. This parameter acts like a variable only in the proeprties of this class. So, instead of writing 3 or 4 similar classes that have differences only in margin values, you could use a mixin and have the margin value as a parameter. With mixins, classes can have as properties other classes, hence we have inheritance!

    .rich_text(@marginsize) {margin:@marginsize;}
    .main_text {.rich_text(4px)}
  • Nested rules.
    With css if you wanted to define an element differently in a specific area of the site you would use the syntax:

    #footer {...}
    #footer p {...}
    #footer p a {...}

    Using nested rules you can write the same thing in a more nice and readable way.

    #footer {... p {... a{...}}}
  • Operations
    You can set base values for font size, border width and define other properties as a proportion to the base value.

    @base_border:1px;
    #footer {border-bottom:@base_border+1;}

You can find similar examples in less web page, http://lesscss.org/. One thing you probably not like, is that the less code must be processed by a Ruby script. This is not very practical, even if you do have Ruby installed because this is a process that your IDE wont give. There is a workaround for this that I found here. There is a .js library that processes .less files and that saves you from the trouble to build your css every time you want to deploy your css. The parsing of the less file occurs in the browser.

This tool I very helpful for me, since it is easier to write and maintain css. I have bumped into a few articles in the past arguing that css doesn’t need to have features such as variables, functions, class inheritance but I never found their arguments very strong.

Googling a bit, I found a web page that mentioned a .NET port for this tool (.less) but sadly, the website for this port was parked and I couldn’t manage to find this port elsewhere.

Filed Under: Web Development Tagged With: CSS, Web design

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Categories

  • .NET Development
  • ASP.NET
  • Databases
  • Fun
  • IIS
  • JavaScript
  • Web Development

Tags

.NET Core Android ANTLR ASP.NET Ajax ASP.NET Core ASP.NET MVC ASP.NET Web Forms AWS Bouncy Castle Chartjs cli Client info detection Comic Continuous integration CSS Data backup Date handling Firebase Firefox addons Github HigLabo HTML5 Image manipulation jQuery JWT MySQL Nodejs Nuget OAuth Objectionjs OOP openssl Oracle ORM PHP Regular expressions SEO Social media SQL SQL Server UI/UX Url rewriting Videos Visual Studio Web design

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Secondary Sidebar

Archives

  • July 2020
  • March 2020
  • August 2019
  • December 2018
  • November 2018
  • February 2018
  • August 2016
  • June 2016
  • May 2016
  • February 2016
  • January 2016
  • August 2015
  • July 2015
  • October 2014
  • July 2014
  • November 2013
  • April 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • May 2012
  • February 2012
  • December 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010

Footer

Recent Posts

  • Anatomy of an Objection.js model
  • Check your RSA private and public keys
  • Round functions on the Nth digit
  • Send FCM Notifications in C#
  • Jwt Manager
  • Things around the web #5
  • Query JSON data as relational in MySQL
  • Create and sign JWT token with RS256 using the private key
  • Drop all database objects in Oracle
  • Create and deploy a Nuget package

Latest tweets

  • Things I Wished More Developers Knew About Databases https://t.co/h4gfq6NJgo #softwaredevelopment #databases May 3, 2020 12:52
  • How a Few Lines of Code Broke Lots of Packages https://t.co/p7ZSiLY5ca #javascript May 3, 2020 12:48
  • Can someone steal my IP address and use it as their own? https://t.co/HoQ7Z3BG69 January 24, 2020 13:27
  • Organizational complexity is the best predictor of bugs in a software module https://t.co/aUYn9hD4oa #softwaredevelopment January 13, 2020 08:24
  • Capitalism for people. Socialism for companies? https://t.co/zgUoPcqnix January 5, 2020 07:46
  • http://twitter.com/codingstill

Misc Links

  • George Liatsos Blog
  • Plethora Themes
  • C# / VB Converter
  • Higlabo: .NET library for mail, DropBox, Twitter & more

Connect with me

  • GitHub
  • LinkedIn
  • RSS
  • Twitter
  • Stack Overflow

Copyright © 2021 · eleven40 Pro on Genesis Framework · WordPress · Log in